title: jQuery $.post turning into GET request
body: <p>I have this bit of HTML:</p>
  
  <pre><code>&lt;form action="http://shoutzor.nl/login" method="POST" id="loginform" class="form-horizontal"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Have an account? Login!&lt;/legend&gt;
          &lt;div class="control-group"&gt;
              &lt;label class="control-label" for="username"&gt;Username&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" id="username" name="username" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
              &lt;label class="control-label" for="password"&gt;Password&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" id="password" name="password" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="submit" class="btn" value="Login" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;form action="http://shoutzor.nl/login" method="POST" id="registerform"
  class="form-horizontal"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Create an account&lt;/legend&gt;
          &lt;div class="control-group"&gt;
              &lt;label class="control-label" for="username"&gt;Username&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" id="username" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
              &lt;label class="control-label" for="email"&gt;Email&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" id="email" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="submit" class="btn" value="Register" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and I've got this bit of JavaScript:</p>
  
  <pre><code>$("form").submit(function (e) {
      e.preventDefault();
  
      $("body").toggleLoadMaskOverlay();
  
      if ($(this).is("#registerform")) {
          //Registreren
          $.post("http://shoutzor.nl/register ", {
              username: $("#registerform input[name=username]").val(),
              email: $("#registerform input[name=email]").val()
          }, function (result) {
              $("body").toggleLoadMaskOverlay();
          }, "json");
      } else {
          $.post("http://shoutzor.nl/login", {
              test: "test",
              username: $("#loginform input[name=username]").val(),
              password: $("#loginform input[name=password]").val()
          }, function (result) {
              $("body").toggleLoadMaskOverlay();
          }, "html");
      }
  });
  </code></pre>
  
  <p>On the server-side I have my own PHP API but this doesn't matter because strangely enough even at the top of the index.php file <code>$_SERVER['REQUEST_METHOD']</code> returns "GET" and <code>var_dump($_REQUEST)</code> returns no data at all.</p>
  
  <p>I haven't encountered this problem on any of my other websites (which are using the same PHP CMS I've developed) before so I assume for now I'm doing something wrong in my JavaScript code, but I can't discover the problem.</p>