Using AJAX to stop a page from reloading upon error

[RalphLeMouf]

Hey Guys -

 

I have a page that has a jquery modal box that pops up, in that box there is a simple form that prompts the user to submit a name and email. I am trying to stop the page from reloading if there is an error, so the box stays open showing the error. As of now, it closes the box and you have to open the box again to view the error. 

 

I am having great trouble implementing the AJAX to my existing code. I am very new to jquery and AJAX and need some major help. I am lost. 

 

I've tried a few attempts at adding the AJAX to stop the page from reloading upon error but am just plain confused so I've taken it out. I will show you the code for the jquery and php I have working so far. I just need to add that last function of stopping the page from reloading and keeping the box open until the form is filled out correctly.

 

thanks in advance.

 

if(isset($_POST['submit'])) {
$email = $_POST['email'];
if(empty($_POST['name']) || empty($_POST['email'])) { 
$error = "Please enter the info in the fields that are marked <br /> with *";
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$error_email = "Please enter a valid email address";
}else{
$success = true;
$success = "Thank You"; 






mysql_query("INSERT INTO watch_list 
(name, email) VALUES('".$_POST['name']."', '".$_POST['email']."')") 
or die(mysql_error());  
header( 'Location: /watch.php' );
}


} 

<?php if(isset($success)) { ?>
<div class="success_watch">Thank You!</div>
<?php } ?>


<?php if(isset($error)) { ?>
<div class="error_watch">
<?php echo $error; ?>
</div>
<?php } ?>
<?php if(isset($error_email)) { ?>
<div class="error_watch">
<?php echo $error_email; ?>
</div>
<?php } ?>


           <form method="post" action="/index.php">
<div class="form_text_sign_up_required">
All fields marked with an asterisk * are required
</div>
<div class="form_text_sign_up">
Name*
</div>
<input type="text" name="name" value="<?php if(isset($_POST['name'])) {echo $_POST['name'];} ?>" /> <br /><br />


<div class="form_text_sign_up">
Email*
</div>
<input type="text" name="email" value="<?php if(isset($_POST['email'])) { echo $_POST['email'];} ?>" /><br /><br /> 
<input type='submit' name='submit' value='submit' class='post'/>
</form>

<script>
jQuery(function($) {


$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});


/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
    $('span.ecs_tooltip').hide();
  }
);


$("div.close").click(function() {
disablePopup();  // function close pop up
});


$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup();  // function close pop up
}
});


       $("div#backgroundPopup").click(function() {
disablePopup();  // function close pop up
});


$('a.livebox').click(function() {
alert('Hello World!');
return false;
});


/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}


var popupStatus = 0; // set value


function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}


function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0;  // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
</script>