jQuery Ajax submit form problem

Question

i have my form validated using jQuery and should be submited using ajax the problem is. if any of the input is not filled out or wrong data is enered by the user the input should turn on red it works fine, but if i click on the input inorder to fill it out or edit it gets lost.

here is my code

$(document).ready(function(){
  // Place ID's of all required fields here.

  required=["name", "adres","huisnr","postcod", "phone","email"];

   name=$("#name");
   huisnr=$("#huisnr");
   email=$("#email");
   phone=$("#phone");
   postcod=$("#postcod");
   errornotice=$("#error");

   // The text to show up within a field when it is incorrect
     emptyerror="wrong";
    emailerror = "Invalid e-mail.";
     postcoderror="Invalid postcode.";
    phonerror = "Invalid phone number.";

    $(".submit").click(function(){
      //Validate required fields
      for(i=0;i<required.length;i++){
         var input=$('#'+required);

         if(input.val() == "" || input.val() == emptyerror){
            input.addClass("textfield error");
            input.val(emptyerror);
            errornotice.fadeIn(750);
         }else{
            input.removeClass("textfield error");
         }
      }

   //Validate the Postcode.first letter should not be 0, space then the two alphabit big letters from A-Z
          if(! postcod.val().match(/^([1-9]\d{3}\s[A-Z]{2})$/)){
           postcod.addClass("textfield error");
           postcod.val(postcoderror);
         }
   //Validate the phone      
          if(!phone.val().match(/^[0-9]{3}-|\s[0-9]{3}-|\s[0-9]{5}$/)) {
           phone.addClass("textfield error");
           phone.val(phonerror);
         }      

    // Validate the e-mail.
          if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
         email.addClass("textfield error");
         email.val(emailerror);
      }

   //if any inputs on the page have the class 'textfield error' the form will not submit
          if($(":input").hasClass("textfield error")){
             return false;
         }else{
              errornotice.hide();
             return true;
         }

      var dataString=   'name=' + name + '&huisnr=' + huisnr + '&email=' + email + '&phone=' + phone + '&postcod=' + postcod ;
      alert (dataString);


 $.ajax({   
  type: "POST",   
  url: "mail.php",   
  data: dataString,   
  success: function() {   
    $('#contact_form').html("<div id='message'></div>");   
    $('#message').html("<h2>Contact Form Submitted!</h2>")   
    .append("<p>We have received your order.</p>")   
    .hide()   
    .fadeIn(1500, function() {   
      $('#message').append("<img id='checkmark' src='images/check.png' />");   
  });
  }
 });
//cancel the submit button default behaviours 
    return false;      


});

   // Clears any fields in the form when the user clicks on them
       $(":input").focus(function(){
        if($(this).hasClass("textfield error")){
          $(this).val("");
          $(this).removeClass("textfield error");
        }
      });
});

HTML Form:
<form id="theform" action="mail.php" method="post">
                            <fieldset>
                                <legend></legend>
                                <table cellpadding="0" cellspacing="0" border="0" style="margin-top:7px;">
                                    <tr>
                                        <td><label for="">Name *</label></td>
                                        <td><input type="text" name="name" id="name" value="" class="textfield" tabindex="1" /></td>
                                    </tr>
                                    <tr>
                                        <td><label for="">Adres *</label></td>
                                        <td><input type="text" name="adres" id="adres" value="" class="textfield" style="width:160px; margin-right:10px;" tabindex="2" /> Huisnr. * <input type="text" name="huisnr" id="huisnr" value="" class="textfield" style="width:74px;" tabindex="3" /></td>
                                    </tr>
                                    <tr>
                                        <td><label for="">Postcode *</label></td>
                                        <td><input type="text" name="postcod" id="postcod" value="" class="textfield" maxlength="7" style="width:70px; margin-right:10px;" tabindex="4" /> 
                                    </tr>
                                    <tr>
                                        <td><label for="">Telefoonnummer *</label></td>
                                        <td><input type="text" name="phone" id="phone" value="" class="textfield" tabindex="6" /></td>
                                    </tr>
                                    <tr>
                                        <td><label for="">E-mailadres *</label></td>
                                        <td><input type="text" name="email" id="email" value="" class="textfield" tabindex="6" /></td>
                                        </tr>
                                        <tr>
                                        <td colspan="2" id="error">There were errors on the form, please make sure all fields are filled out correctly.</td>
                                    </tr>
                                </table>
                            </fieldset>
                        </form>
<div class="checkOut"><a href="" class="submit"><span>Submit Form</span></a><div class="spacer"></div></div>
                </div>

Maybe you want to edit your question so we can see the complete code example in a neat and clean manner. Just indent your code by 4 spaces, and it will be displayed correctly. — xlttj
– xlttj, Commented May 24, 2011 at 10:09
I think your dataString is incorrect. make sure you use '&email=' + email + '&phone=' + phone ... — Blazes
– Blazes, Commented May 24, 2011 at 11:10

Hoff · Accepted Answer · 2011-05-24 11:29:54Z

2

the input gets lost when clicking on an input field with error because you have an onFocus listener in you code that does exactly that:

 $(":input").focus(function(){
        if($(this).hasClass("textfield error")){
          // here is your problem:
          $(this).val("");
          $(this).removeClass("textfield error");
        }
      });

answered May 24, 2011 at 11:29

Hoff

40.2k17 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mary Over a year ago

hey Hoff wait you are right i got it.. it work fine now thanks alot

Sam Magura · Accepted Answer · 2011-05-24 11:23:44Z

0

Not positive if this fixes the problem, but I noticed this line was wrong:

var input=$('#'+required);

It should be required[i].

answered May 24, 2011 at 11:23

Sam Magura

9901 gold badge12 silver badges20 bronze badges

1 Comment

Mary Over a year ago

i think i made mistake in copying or did not show up it is required[i]. you are right

inquam · Accepted Answer · 2011-05-24 11:28:15Z

0

You could take a look at the JQuery Ajax Form plugin. Takes care of most of the stuff for you. Converts a "normal" to an Ajax form, encodes the data and posts it.

All you have to do is create the functions you want to run before and after your form posts basically.

http://jquery.malsup.com/form/

answered May 24, 2011 at 11:28

inquam

12.9k17 gold badges66 silver badges106 bronze badges

Collectives™ on Stack Overflow

jQuery Ajax submit form problem

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related