title: Simple AJAX POST Request Submit Form with jQuery (or not)
body: <p>I'm attempting to issue the following <code>POST</code> request to an API via a form and a submit button.</p>
  
  <p><strong>EDIT:</strong> I'm sorry folks, this isn't my morning.  This is what the POST request should look like:</p>
  
  <pre><code>$.ajax({
    type: "POST",
    url: "/api/v1/users/",
    data:{
      user: {
        fname: "Test",
        lname: "Johnson",
        password: "passw0rd",
        email: "test2@johnson.com"
      }
    }
  })
  </code></pre>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="three columns"&gt;
            &lt;label for="emailInput"&gt;email&lt;/label&gt;
            &lt;input type="text" id="emailInput"&gt;
          &lt;/div&gt;
            &lt;div class="three columns"&gt;
            &lt;label for="passwordInput"&gt;password&lt;/label&gt;
            &lt;input type="text" id="passwordInput"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="four columns"&gt;
             &lt;input class="button-primary" type="submit" value="Submit"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here is my JavaScript:</p>
  
  <pre><code>email = '';
    password = '';
    firstName = '';
    lastName = '';
  $(function() {
    $('.button-primary').click(function(event) {
      var email = $('#emailInput').val();
      var password = $('#passwordInput').val();
      var firstName = $('#fnameInput').val();
      var lastName = $('#lnameInput').val();
      $.post( 'http://&lt;MY-DYNO&gt;.herokuapp.com/api/v1/users/', { fname: firstName,
        lname: lastName,
        password: password,
        email: email,
        success: function(response) {
          $('#registerStatus').text('Successfully registered');
          console.log(response);
        }
      });
    });
  </code></pre>
  
  <p>This is obviously not the best way to go about this, but I'm in the process of learning AJAX.  If anyone can provide some guidance that would be great, I've been struggling with this for many hours.</p>
  
  <p><strong>EDIT:</strong> I apologize, I did not describe the exact issue I was having.  After I hit submit, the div is populated with <strong>Successfully Registered</strong>, but the data is not being properly submitted to the server, it is passing <code>undefined</code>.</p>