Question

i have a small problem.

When the form is submitted and the form returns false it will not submit again.

For instance. if the user misses out their name it will return false and show a message stating to input their name.

But the user can not resubmit the form without refreshing the page which means all data is lost.

How do i go about stopping this?

Here is the html side:

<form action="javascript:parseResponse();" method="post" name="ajaxcontactform" id="ajaxcontactform">

                <div class="contacttextarea">
                    <input name="contactform" type="hidden" value="1" />

                    <fieldset>
                        <textarea name="comment" cols="5" rows="5" class="contacttextarea"onfocus="if (this.value == 'Please Leave A Message') {this.value = '';}">Please Leave A Message</textarea>
                    </fieldset>

                </div>

                <div class="contacttextboxes">

                    <fieldset>
                        <input id="name" name="name" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Name') {this.value = '';}"value="Please Insert Your Name">
                    </fieldset>

                    <fieldset>
                        <input id="phone" name="phone" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Phone Number') {this.value = '';}"value="Please Insert Your Phone Number">
                    </fieldset>

                    <fieldset>
                        <input id="email" name="email" type="text" class="contacttextform" onfocus="if (this.value == 'Please Insert Your Email') {this.value = '';}"value="Please Insert Your Email">
                    </fieldset>

                    <fieldset>
                        <input name="send" type="submit" class="contactformbutton" value="Send">
                    </fieldset>

                </div>

            </form>

Here is the jquery side

$(document).ready(function() {
//// Start Contact Form ////
    $('#ajaxcontactform').submit(function(){$('input[type=submit]', this).attr('disabled', 'disabled');});


    $('#ajaxcontactform').submit(

        function parseResponse() {

            var usersname = $("#name");
            var usersemail = $("#email");
            var usersphonenumber = $("#phone");
            var usersmessage = $("#comment");
            var url = "contact.php";

                var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
                var valid = emailReg.test(usersemail);

                if(!valid) {
                    $("#contactwarning").html('<p>Your email is not valid!</p>').slideDown().delay(3000).slideUp();
                    return false;
                }

              if (usersname.val() == "" || usersname.val() == "Please Insert Your Name") {                
                   $("#contactwarning").html('<p>Please Insert Your Name!</p>').slideDown().delay(3000).slideUp();
                   return false;                   
              }
              if (usersemail.val() == "" || usersemail.val() == "Please Insert Your Email") {
                   $("#contactwarning").html('<p>Please Insert Your Email!</p>').slideDown().delay(3000).slideUp();
                   return false;
              }
              if (usersphonenumber.val() == "" || usersphonenumber.val() == "Please Insert Your Phone Number") {
                   $("#contactwarning").html('<p>Please Insert Your Phone Number!</p>').slideDown().delay(3000).slideUp();
                   return false;
              }
              if (usersmessage.val() == "") {
                   $("#contactwarning").html('<p>You forgot to leave a message!</p>').slideDown().delay(3000).slideUp();
                   return false;
              }



                    $.post(url,{ usersname: usersname.val(), usersemail: usersemail.val(), usersphonenumber: usersphonenumber.val(), usersmessage: usersmessage.val() } , function(data) {
                        $('#contactajax').html(data);
                        $("#ajaxcontactform").fadeOut(100).delay(12000).fadeIn(3000);
                        $('#contactajax').fadeIn(3000).delay(3000).fadeOut(3000);
                    });

          }

      );
//// End Contact Form ////

 });

Here is the php part:

<?php

if(isset($_REQUEST['contactform']) && $_REQUEST['contactform'] == 1){
    echo '<p>Success!</p>';
} else {
    echo '<p>Form could not be sent, please try again!</p>';
}

All is working apart from when an error is shown it will not resubmit.

Answer 1

Try replacing action attribute value of form with some URL instead of JavaScript method. Also have the parseResponse() method body directly executed in Form.submit() event.

Edit:

Add following line of code before return false in every if condition. It will do the trick.

 $('input[type=submit]', $("#ajaxcontactform")).removeAttr('disabled');