在PHP表单提交刷新div

Question

I have a mail form, and I want the #emailform div to be refreshed with a confirmation on submit click. As it is now, the page reloads. Not sure how to set this up.

Here is my php:

<?php
ini_set('display_errors',1);
 error_reporting(E_ALL);

if(!isset($_POST['submit']))
{
  //This page should not be accessed directly. Need to submit the form.
  echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$email = $_POST['email'];
$purchasecode = $_POST['purchasecode'];
$vendor = $_POST['vendor'];


//Validate first
if(empty($_POST['name'])  ||
   empty($_POST['email']) ||
   empty($_POST['purchasecode']) ||
   empty($_POST['vendor']))
{
    echo "All fields are required.";
exit;
}

if(IsInjected($email))
{
    echo "Bad email value!";
    exit;
}

$email_from = $email;
$email_subject = "GDFY Purchase Confirmation";
$email_body = "New purchase confirmation from $name.
".
    "Here are the details:

 Name: $name 

 Email: $email 

 Purchase Code: $purchasecode 

 Vendor: $vendor";

$to = "[e-mail]";//<== update the email address

$headers = "From: $email_from 
";
$headers .= "Reply-To: $email_from 
";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: index.html');

// echo "success";


// Function to validate against any email injection attempts
function IsInjected($str)
{
  $injections = array('(
+)',
              '(+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}

?>

My HTML:

<div id="emailform">
                <h2>Confirm your purchase information</h2>
                <hr>
                <form method="post" name="contactform" action="mail_form.php">
                <p>
                <label for='name'>Your Name:</label> <br>
                <input type="text" name="name">
                </p>
                <p>
                <label for='email'>Email Address:</label> <br>
                <input type="text" name="email">
                </p>
                <p>
                <label for='purchasecode'>Purchase Code:</label> <br>
                <input type="text" name="purchasecode">
                </p>
                <p>
                <label for='vendor'>Vendor Name:</label> <br>
                <select name="vendor">
                  <option value="" selected="selected"></option>
                  <option value="Amazon" >Amazon</option>
                  <option value="Barnes&Noble" >Barnes &amp; Noble</option>
                  <option value="Family Christian" >Family Christian</option>
                  <option value="Christianbook" >Christianbook.com</option>
                  <option value="LifeWay" >LifeWay</option>
                  <option value="BAM" >Books-A-Million</option>
                  <option value="Mardel" >Mardel</option>
                </select>
                </p>
                <button type="submit" id="submitbutton" name="submit" value="Submit" class="mainButton">SUBMIT</button><br>
                </form>

<!--            Code for validating the form
                Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
                for details -->
                <script type="text/javascript">
                var frmvalidator  = new Validator("contactform");
                frmvalidator.addValidation("name","req","Please provide your name");
                frmvalidator.addValidation("email","email","Please enter a valid email address");
                frmvalidator.addValidation("vendor","dontselect=000");
                frmvalidator.addValidation("purchasecode","maxlen=50");
                </script>
            </div>

My JavaScript:

$('#submit').submit(function() { // catch the form's submit event
      $.ajax({ // create an AJAX call...
          data: $(this).serialize(), // get the form data
          type: $(this).attr('method'), // GET or POST
          url: $(this).attr('action'), // the file to call
          success: function(response) { // on success..
              $('#emailform').html("<h1>Thank you!</h1>Thank you for submitting the form. We will contact you soon!"); // update the DIV
          }
      });
      return false; // cancel original event to prevent form submitting
  });

Answer 1

Your form has no id, least of all one matching #submit. Your handler isn't attaching to anything.

<form method="post" name="contactform" action="mail_form.php" id="submit">

should fix that.