title: How to avoid form data from being posted when jquery post method is used
body: <p>I'm using jquery post method to post a data that I get from the server. </p>
  
  <p>I create an object with the data that I got from the server and sent this object inside the jquery post method,</p>
  
  <p>Now I'm getting an error message saying unsupported media type, </p>
  
  <p>The object that I created is not being sent, but the data is being sent as form data</p>
  
  <p>How should I avoid this formdata being sent and send the object that I have created </p>
  
  <p>Take a look at the code that I have written so far : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var submitLeadDetails = function(){
      console.log('Post function executed');
      var LeadDetailsObject = {};
      LeadDetailsObject.schoolName = document.getElementById('name').value;
      LeadDetailsObject.contactPerson = document.getElementById('contact').value;
      LeadDetailsObject.contactPersonPhoneNumber =document.getElementById('phone').value;
      LeadDetailsObject.date = document.getElementById('date').value;
      LeadDetailsObject.time = document.getElementById('time').value;
      console.log(LeadDetailsObject);
   
       $.post('http://localhost:8000/webapi/leads',  LeadDetailsObject, 'json')
           .done(function(data){
           console.log('Success');
          console.log(data);
           $('#leadDetailsForm')[0].reset();
           })
           .fail(function(xhr,status,error){
               console.log(LeadDetailsObject);
               console.log(error);
           })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="leadDetailsForm" onsubmit="event.preventDefault();submitLeadDetails();"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="name"&gt;School Name:&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="name" placeholder="Enter School Name" name="name" required&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label for="contact"&gt;Contact Person:&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="contact" placeholder="Enter Contact Person Name" name="Contact" required&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="phone"&gt;Phone Number:&lt;/label&gt;
                      &lt;input type="number" class="form-control" id="phone" placeholder="Enter Contact Person's Phone Number" name="phone" required&gt;
                  &lt;/div&gt;
                  &lt;!--&lt;div class="form-group"&gt;--&gt;
                      &lt;!--&lt;label for="address"&gt;Address:&lt;/label&gt;--&gt;
                      &lt;!--&lt;textarea class="form-control" rows="5" placeholder="Enter School Address" id="address" required&gt;&lt;/textarea&gt;--&gt;
                  &lt;!--&lt;/div&gt;--&gt;
                  &lt;div class="form-group col-sm-6" style="padding-left: 0;"&gt;
                      &lt;label for="date"&gt;Date:&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="date" placeholder="Enter Date" name="date" required&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group col-sm-6"&gt;
                      &lt;label for="time"&gt;Time:&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="time" placeholder="Enter Time" name="Time" required&gt;
                  &lt;/div&gt;
                  &lt;button type="submit"  class="btn  btn-lg pull-right" style="margin-top: 3%; background-color: #2a2c30; color:#fff;" &gt;
                      Submit
                  &lt;/button&gt;
              &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As shown in the image the form data shouldn't be sent with the post method</p>
  
  <p>the object that I have createed should only be sent</p>
  
  <p>By returning false and by using event.preventDefault() it is just stopping the form to be refreshed.</p>
  
  <p><a href="https://i.stack.imgur.com/QVyAp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QVyAp.png" alt="enter image description here"></a></p>