Jump to content

Ajax form submit does not work


MEER

Recommended Posts

hello every one,

i have my form validated using  jQuery and submited using ajax but the ajax part does work could you help.

here is my code

 

// JavaScript Document

 

$(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");

  }

  });

});

 

Link to comment
https://forums.phpfreaks.com/topic/237313-ajax-form-submit-does-not-work/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.