pv619 pv619 - 2 years ago 109
Ajax Question

Ajax not displaying validation messages

I have got a PHP contact form where I'm trying to implement Ajax to it to make it more user friendly because the contact form is a pop-up form using javascript/jQuery, so everytime the form is submitted it refreshes the page and you have to go back in the form to view the validation message.

Could you check what am I missing here please? I've been on it for sometime now and it still doesn't work. Please let me know if you want me to add the PHP script.

Ajax code:

jQuery(document).ready(function ($) {

$("#ajax-contact-form").submit(function () {
var str = $(this).serialize();

type: "POST",
url: "demoform.php",
data: str,

success: function (msg) {
if (msg == 'OK') {
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
} else {
result = msg;


return false;


<p>Please complete the form below <br />to request a <br/> <span id="free_demo">FREE DEMO</span></p>

<div id="note"></div>
<div id="fields">
<form id="ajax-contact-form" enctype="multipart/form-data">

<div><input type="text" placeholder="Name" name="fullname" id="vpbfullname" value="<?php echo strip_tags($_POST["fullname"]); ?>" class="vpb_input_fields"> <?php echo $submission_status1; ?></div>
<div><input type="text" placeholder="E-Mail" name="email" id="email" value="<?php echo strip_tags($_POST["email"]); ?>" class="vpb_input_fields"><?php echo $submission_status2; ?></div>
<div><input type="text" placeholder="Company" name="company" id="company" value="<?php echo strip_tags($_POST["company"]); ?>" class="vpb_input_fields"><?php echo $submission_status3; ?></div>
<div><input type="text" placeholder="Telephone" name="phone" id="telephone" value="<?php echo strip_tags($_POST["phone"]); ?>" class="vpb_input_fields"><?php echo $submission_status4; ?></div>

<div class="vpb_captcha_wrappers"><input type="text" placeholder="Security Code" id="vpb_captcha_code" name="vpb_captcha_code" class="vpb_input_fields"> </div>
<a href="javascript:void(0);" id="refresh" onClick="vpb_refresh_aptcha();">Refresh Security Code</a></font>
<div class="vpb_captcha_wrapper"><img src="vasplusCaptcha.php?rand=<?php echo rand(); ?>" id='captchaimg' ></div><br clear="all"><br/>

<br clear="all">

<div><?php echo $submission_status; ?></div><!-- Display success or error messages -->

<input type="hidden" id="submitted" name="submitted" value="1">
<input type="submit" class="vpb_general_button" value="Submit"></form> </div>

<br clear="all">

Any help would be great.. Thanks

Answer Source

Use preventDefault();

$("#ajax-contact-form").submit(function (e) {

This is preventing the form submit, but ajax call will happens.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download