title: Ajax Post Not Completing
body: <p>I am attempting to link together my index page on a website I am creating and my login php code.  However I am running into problems getting my ajax post call to complete.  Let me start off with the index html so you can see the script and the form setup:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Official Website of Logopedia STS &amp; Carr SLS&lt;/title&gt;
  &lt;link href="css/landing.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="css/uikit.gradient.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;script type="text/javascript" src="js/uikit.min.js"&gt; &lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js"&gt; &lt;/script&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function login()
  {
      alert("reached function"); //For debugging
  
      var datastring = $('#login').serialize();
      alert(datastring);
  
      var post_data = $.ajax(
      {
          type: "POST",
          url: "php/test.php",
          data: dataString
      });
  
      post_data.done(function(jsonstr)
      {
          //For Debugging
          alert("works");
          alert(jsonstr);
      });
  
      post_data.fail(function(jqXHR, text)
      {
          alert("Post failed:" + text); //In case of fail
      });
  } 
  
  function replaceAll(find, replace, str)
  {
      while( str.indexOf(find) &gt; -1)
      {
          str = str.replace(find, replace);
      }
      return str;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Background Image --&gt;
  &lt;div class="bground"&gt;&lt;/div&gt;
  
  &lt;!-- Banner --&gt;
  &lt;div class="banner"&gt;&lt;/div&gt;
  
  &lt;!-- Logo --&gt;
  &lt;div class="tempLogo"&gt;&lt;/div&gt;
  
  &lt;p class="contxt"&gt;This website is currently under construction.&lt;br/&gt;&lt;br/&gt;
  If you are an administrator of this site, please log in below.&lt;/p&gt;
  
  &lt;form class="uk-form" id="login"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Login&lt;/legend&gt;
          &lt;label for='username'&gt;Username&lt;/label&gt; 
          &lt;input name="uname" id="uname" type="text" size="40" maxlength="40" /&gt;&lt;br /&gt;&lt;br/&gt;
          &lt;label for='password'&gt;Password&lt;/label&gt; 
          &lt;input name="pword" id="pword" type="password" size="40" maxlength="40" /&gt;&lt;br/&gt;
          &lt;button class="uk-button uk-button-primary" name="btnlin" height="15" width="30" onclick="login()"&gt;Login&lt;/button&gt;
          &lt;button class="uk-button uk-button-danger" name="btnlout" height="15" width="30"&gt;Logout&lt;/button&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So I thought that maybe my php code was the problem and it was not executing properly somewhere (the webhost for this site does not allow php error output) so I decided to make a simple test php file to test with.  Here is that:</p>
  
  <pre><code>&lt;?php
  $username = $_POST['uname'];
  
  $args = array($username =&gt; 1);
  
  echo json_encode($args);
  ?&gt;
  </code></pre>
  
  <p>However then I put something in the uname field and click login, while the test alerts before the ajax call fire, nothing happens.</p>