无需更改页面的 PHP 表单

Question

如何设置我的 PHP、HTML 和 JQuery，以便在用户单击提交时页面不发生变化？我的表单位于名为 Fancybox (fancybox.net) 的灯箱插件中

完整示例位于 my church's website

这是我的 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 = "nonya@yahoo.com";
    $email_also ="nonya2@yahoo.com";
    $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>

还有我的表格:

  <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

您将需要 ajax。首先，为所有输入字段分配一个 ID，以便 jQuery 可以轻松选择它们。然后将以下内容添加到您的 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");
    }
 });