当表单中没有任何内容但无法运行Ajax时，AJAX / PHP / JQUERY邮件联系表单会给出正确的错误消息

Question

I'm following the following tutorial to place a form on my website using PHP, AJAX, and JQUERY that will send the form information to my email:

http://www.spruce.it/noise/simple-ajax-contact-form/

The problem is, when I have the jquery outside the document ready I get no message at all, and when I place it in the document ready i get the error text, but when there is information in the fields nothing happens at all. Please, can someone look and see what might be the problem with my html, jquery, php, or AJAX? I'm about to pull out all of my hair. I'm testing it in Wampserver.

The HTML file is in the root directory with the PHP file. In the root directory there is a folder called "includes" that the Javascript is in. Here is the relevant code for each:

HTML:

<form id="repairform" method="post"> 
   <p id="p1">Name:</p> 
   <input id="one" type="text" name="name" /> 

   <p id="p2">How would you prefer to be reached?: </p> 
   <select id="two" name="Contact methods">
      <option value="Phone">Email</option>
      <option value="Email">Phone</option>
   </select> 

   <p id="p3">What kind of computer are you having trouble with?</p>
   <p id="p3-2">Give as much or as little info. as you'd like.</p>
   <p id="p3-3">(Laptop PC, desktop Macintosh, etc)</p>
   <textarea id="four" name="pc type" rows="3" cols="30"></textarea>

   <p id="p4">What problems are you having with your computer/ what needs to be fixed?</p>
   <textarea id="five" name="problem" rows="5" cols="30"></textarea>
   <input id="three" type="submit" value="Submit Request" />

   <p id="p5">What is your Email?</p> 
   <input id="six" type="text" name="Email/Phone" /> 

   <p id="p7">What is your Phone Number?</p>
   <input id="eight" type="text" name="Email/Phone2" /> 

   <p id="p6">What time of day would you prefer to be reached?</p>
   <input id="seven" type="text" name="Preferred Contact Time" /> 
</form>

JQuery:

$(document).ready(function () {

   $("#repairform").submit(function (e) {
      e.preventDefault();

      if (!$("#six").val()) {
         $("#six").val("shanew@ufl.edu");
      }

      var name = $("#one").val();
      var email = $("#six").val();
      var text = $("#five").val();
      var reachpreference = $("#two").val();
      var computertype = $("#four").val();
      var phonenumber = $("#eight").val();
      var timeofday = $("#seven").val();

      var dataString = 'name=' + name + '&email=' + email + '&text=' + text
      + '&reachpreference=' + reachpreference + '&computertype=' + computertype
      + '&phonenumber=' + phonenumber + '&timeofday=' + timeofday;

      function isValidEmail(emailAddress) {
         var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
         return pattern.test(emailAddress);
      };

      if (isValidEmail(email) && (text.length > 2) && (name.length > 1)) {
         $.ajax({
            type: "POST",
            url: "../functions.php",
            data: dataString,
            success: function () {
               alert("Thank you! Your message has been delivered. I will be back with you shortly");
            }
         });
      } else {
         alert("Some of the form information was not filled out correctly. Ensure all of the correct fields are filled out.");
      }

      return false;
   });

PHP:

 <?php
 // Email Submit
 if (isset($_POST['email']) && isset($_POST['name']) && isset($_POST['text'])){

    //send email
    mail("shanew@ufl.edu", "Contact Form: ".$_POST['name'],
    $_POST['text'], $_POST['reachpreference'], $_POST['computertype'] 
    $_POST['phonenumber'], $_POST['timeofday'], "From:" . $_POST['email']);

 }
 ?>

Answer 1

Use

data: $('#repairform').serializeArray()

instead of the datastring object you're creating.

The datastring will be treated as a String, and you'll never be able to access it using $_POST['text'] and all. You may try using using $_GET instead. The datastring will be accessible that way only.

Answer 2

I think you miss some of closing branch }) ;

And I think you should use name attribute for variable name that will be used in php..

<form id="theForm">
    <input type="text" name="email" />
</form>

and in javascript you can use serialize so less line and easier to read.

$.ajax({
    type:'POST'
    url:'../functions.php'
    data:$('#theForm').serialize();
})

and in php

echo $_POST['email']