PHP form without changing pages

Question

How to configure my PHP, HTML and jQuery so that the page does not change when the user clicks? My form is in a lightbox plugin called Fancybox (fancybox.net)

Full example: my church site

Here is my php.

<?php if(isset($_POST['email'])) { $first_name = $_POST['first_name']; // required $last_name = $_POST['last_name']; // required $email_from = $_POST['email']; // required $telephone = $_POST['telephone']; // not required $comments = $_POST['comments']; // required // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = " [e-mail] "; $email_also =" [e-mail] "; $email_subject = $first_name + " " + $last_name + " Website Inquiry"; function died($error) { // your error code can go here echo "We are very sorry, but there were error(s) found with the form you submitted. "; echo "These errors appear below.<br /><br />"; echo $error."<br /><br />"; echo "Please go back and fix these errors.<br /><br />"; die(); } // validation expected data exists if(!isset($_POST['first_name']) || !isset($_POST['last_name']) || !isset($_POST['email']) || !isset($_POST['telephone']) || !isset($_POST['comments'])) { died('We are sorry, but there appears to be a problem with the form you submitted.'); } $error_message = ""; $email_exp = '/^[A-Za-z0-9._%-] +@ [A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; if(!preg_match($email_exp,$email_from)) { $error_message .= 'The Email Address you entered does not appear to be valid.<br />'; } $string_exp = "/^[A-Za-z .'-]+$/"; if(!preg_match($string_exp,$first_name)) { $error_message .= 'The First Name you entered does not appear to be valid.<br />'; } if(!preg_match($string_exp,$last_name)) { $error_message .= 'The Last Name you entered does not appear to be valid.<br />'; } if(strlen($comments) < 2) { $error_message .= 'The Comments you entered do not appear to be valid.<br />'; } if(strlen($error_message) > 0) { died($error_message); } $email_message = "Form details below.\n\n"; function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $email_message .= "First Name: ".clean_string($first_name)."\n"; $email_message .= "Last Name: ".clean_string($last_name)."\n"; $email_message .= "Email: ".clean_string($email_from)."\n"; $email_message .= "Telephone: ".clean_string($telephone)."\n"; $email_message .= "Comments: ".clean_string($comments)."\n"; // create email headers $headers = 'From: '.$email_from."\r\n". 'Reply-To: '.$email_from."\r\n" . 'X-Mailer: PHP/' . phpversion(); @mail($email_to, $email_subject, $email_message, $headers); @mail($email_also, $email_subject, $email_message, $headers); ?> <!-- include your own success html here --> Thank you for contacting us. We will be in touch with you very soon. <?php } ?> 

JQuery

 <script> $(document).ready(function() { $("#question_form_link").fancybox({ 'scrolling' : 'no', 'titleShow' : true, 'onClosed' : function() { } }); }); //end ready </script> 

And my form:

  <div style="display:none"> <form id="question_form" name="question_form" method="post" action="send_form_email.php"> <table width="450px"> <tr> <td valign="top"><label for="first_name">First Name *</label></td> <td valign="top"><input type="text" name="first_name" maxlength="50" size="30"></td> </tr> <tr> <td valign="top"><label for="last_name">Last Name *</label></td> <td valign="top"><input type="text" name="last_name" maxlength="50" size="30"></td> </tr> <tr> <td valign="top"><label for="email">Email Address *</label></td> <td valign="top"><input type="text" name="email" maxlength="80" size="30"></td> </tr> <tr> <td valign="top"><label for="telephone">Telephone Number</label></td> <td valign="top"><input type="text" name="telephone" maxlength="30" size="30"></td> </tr> <tr> <td valign="top"><label for="comments">Comments *</label></td> <td valign="top"><textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea></td> </tr> <tr> <td colspan="2" style="text-align:center"><input type="submit" value="Submit"> </td> </tr> </table> </form> </div> 

Answer 1

You will need ajax. First, give all input fields an ID so that they can be easily selected by jQuery. Then add the following to your JS.

 $("#submit_button").click(function() { // Get all of the values from the input fields thru their ID's var first_name = $("#first_name").val(); var last_name = $("#last_name").val(); var email = $("#email").val(); var telephone = $("#telephone").val(); var comments = $("#comments").val(); // Validate the form to make sure that all of the required fields are not left empty if(first_name != '' && last_name != '' && email != '' && comments != '') { $.ajax({ url: "email.php", type: "POST", data: ({ first_name: first_name, last_name: last_name, email: email, telephone: telephone, comments: comments }), success: function(data) { // You might wanna display a message telling the user that the form was successfully filled out. } }); } if(first_name == '' || last_name == '' || email == '' || comments == '') { alert("You left one of the required fields empty"); } }); 

Answer 2

You can use .serialize () to get data from your form.

 $.post('send_form_email.php' , $("#question_form").serialize()) .done(function( data ) { alert("ok"); }) .fail(function() { alert("error"); }) .always(function() { alert("always show this message"); });