title: Why isn't my form working correctly when trying to post something using Ajax and an external PHP file, which is receiving two strings?
body: <p>So basically I'm trying to use Ajax to work with a PHP file and post both inputs (fullname and phonenumber), but it doesn't seem to be working when I try and click the submit button it only refreshes.</p>
  
  <p>Here's my code, it's all on the HTML file:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-us"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="stylesheet" href="style2.css" type="text/css"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function validateForm () {
  var x=document.forms["myForm"] ["fullname"].value;
  if (x==null || x=="")
  {
  alert ("First name must be filled out");
  return false;
  }
  var x=document.forms["myForm"] ["phonenumber"].value;
  if (x=null || x=="")
  {
  alert ("Please enter a phone number");
  return false;
  }
  function isNumberKey(evt) {
  var e = evt || window.event; //window.event is safer,
  var charCode = e.which || e.keyCode;
  if (charCode &gt; 31 &amp;&amp; (charCode &lt; 47 || charCode &gt; 57))
  return false;
  if (e.shiftKey) return false;
  return true;
  }
  &lt;/script&gt;
  &lt;script&gt;
  $.ajax({
  type: "POST",
  url: "http://www.bmoseley.com/ajax/addrecord.php",
  data: "fullname=" + fullname + "&amp;phonenumber=" + phonenumber,
  success: function(){
  alert("Name and phone number added successfully!");
  }
  });
  $("#displayInfo").load("http://www.bmoseley.com/ajax/listrecords.php");  
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrap"&gt;
  &lt;div id="wrapper"&gt;
  &lt;div id="info"&gt;
  &lt;form name="myForm" action="#" onSubmit="return validateForm ()"&gt;
  &lt;table border="0"&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input id="fullname" name="fullname" maxlength="50" type="text" name="fullname" placeholder="Name" action="#"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input id="phonenumber" name="phonenumber" maxlength="10" onkeypress="return isNumberKey(event)" placeholder="Phone Number"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input class="button" type="submit" value="Submit"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;div id="displayInfo"&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $("#displayInfo").load("http://www.bmoseley.com/ajax/listrecords.php");
  });
  &lt;/script&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Sorry for the messy code. Hope someone can help!</p>