CODEWITHSUNDEEP
phpjqueryhtmlajax
Robert
Robert

Reputation: 925

form not submitting again after returning false in jquery

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.

Upvotes: 1

Views: 1773

Answers (3)

Nirav Gandhi
Nirav Gandhi

Reputation: 2005

you would want to return false in any case since you want to submit the form without reloading the page.
simply add return false after $.post(); to prevent the page reload

and if you want to disable the submit button after the submission, then do it in the call back function of $.post

Upvotes: 0

Epuri
Epuri

Reputation: 300

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');

Upvotes: 2

keithhatfield
keithhatfield

Reputation: 3273

When the user clicks submit, it looks like you're disabling the submit button (to prevent double submissions, I assume).

When returning false, you're never re-enabling the submit button. You will need to make sure that the disabled attribute is removed from the submit button before returning false.

Upvotes: 1

Related Questions