title: Jquery Ajax Post with body value from a form and print responses
body: <p>i have a ajax request to post data to api and get response. What i want to do is, how to pass a value from input field to the body data on ajax.</p>
  
  <p><strong>here my form</strong></p>
  
  <pre><code>&lt;input type="text" name="serial" /&gt;
  &lt;input type="submit" /&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>here my ajax request</strong></p>
  
  <pre><code>$.ajax({ url: "http://www.example.com/api",
   beforeSend: function(xhr)
   { xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password")); }, 
  type: 'POST', 
  dataType: 'json', 
  contentType: 'application/json', 
  processData: false, 
  data: '{"serial":"252625"}', 
  success: function (data) { alert(JSON.stringify(data)); }, 
  error: function(){ 
  alert("Cannot get data"); } 
  });
  </code></pre>
  
  <p>I want to make the this part <code>data: '{"serial":"252625"}'</code> from a serial input filed programatically.</p>
  
  <p>Thanks any suggestions,</p>