Question

我有一个联系表单检查脚本，它本身可以正常工作，但是只要我将Google地图嵌入到页面中，当您按下提交时，它就会直接转到contact.php而不是检查表单。

表单检查脚本：

<script type="text/javascript" language="javascript">
    var W3CDOM = (document.getElementsByTagName && document.createElement);

    window.onload = function () {
        document.forms[0].onsubmit = function () {
            return validate()
        }
    }

    function validate() {
        validForm = true;
        firstError = null;
        errorstring = '';
        var x = document.forms[0].elements;
        for (var i=0;i<x.length;i++) {
            if (!x[i].value)
                writeError(x[i],'This field is required');
        }
        if (x['email'].value.indexOf('@') == -1)
            writeError(x['email'],'This is not a valid email address');
        if (!W3CDOM)
            alert(errorstring);
        if (firstError)
            firstError.focus();
        if (validForm)
            submit
        return false;
    }

    function writeError(obj,message) {
        validForm = false;
        if (obj.hasError) return;
        if (W3CDOM) {
            obj.className += ' error';
            obj.onchange = removeError;
            var sp = document.createElement('span');
            sp.className = 'error';
            sp.appendChild(document.createTextNode(message));
            obj.parentNode.appendChild(sp);
            obj.hasError = sp;
        }
        else {
            errorstring += obj.name + ': ' + message + '\n';
            obj.hasError = true;
        }
        if (!firstError)
            firstError = obj;
    }

    function removeError()
    {
        this.className = this.className.substring(0,this.className.lastIndexOf(' '));
        this.parentNode.removeChild(this.hasError);
        this.hasError = null;
        this.onchange = null;
    }
</script>

表格html：

<form name="contact" id="contact" action="contact.php" method="post">
    <p>
        <label for="name">Name<br/></label>
        <input size="20" name="name" id="name">
    </p>
    <p>
        <label for="email">e-mail<br/></label>
        <input size="20" name="email" id="email">
    </p>
    <p>
        Message<br/>
        <textarea name="message" rows="8" cols="65"></textarea>
    </p>
    <p>
        <input type="submit" value="Submit">
        <input type="reset" value="Clear">
    </p>
</form>

地图嵌入代码：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="width:100%px;">
    <div class="wpgmappity_container" id="wpgmappitymap" style="width:100%px;height:400px;">
    </div>
</div>
<script type="text/javascript">
    (function(){
    function wpgmappity_maps_loaded() {
    var latlng = new google.maps.LatLng(-42.882391,147.328591);
    var options = {
     center : latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     zoomControl : false,
     mapTypeControl : false,
     scaleControl : false,
     scrollwheel: false,
     streetViewControl : false,
     panControl : false, zoom : 16
    };
    var wpgmappitymap = new google.maps.Map(document.getElementById('wpgmappitymap'), options);
    var point0 = new google.maps.LatLng(-42.8823585,147.32854010000005);
    var marker0= new google.maps.Marker({
     position : point0,
     map : wpgmappitymap
     });
    google.maps.event.addListener(marker0,'click',
     function() {
     var infowindow = new google.maps.InfoWindow(
     {content: 'undefined'});
     infowindow.open(wpgmappitymap,marker0);
     });
    }
    window.onload = function() {
     wpgmappity_maps_loaded();
    };
    })()
</script>

这是我的网站：http://www.eclipsetemplates.com/testzone2/contact.html

Answer 1

从脚本中删除第一个window.onload（在顶部）

并更新window.onload（底部）

window.onload = function() {
    wpgmappity_maps_loaded();
    document.forms[0].onsubmit = function () { 
        return validate();
    }
};

嵌入谷歌地图打破了我的联系表单检查脚本

1 个答案: