简体   繁体   中英

Embeded Google map is breaking my contact form checking script

I have a contact form checking script that works completely fine by itself, but as soon as I embed a Google map onto the page, when you press submit it just goes straight to contact.php instead of checking the form.

form checking script:

<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>

form 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>

Map embed code:

<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>

Here is my website: http://www.eclipsetemplates.com/testzone2/contact.html

Remove first window.onload from your script (at the top)

and update window.onload (bottom)

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM