title: post data in server api using javascript
body: <p>Hi I am very new to javascript and would like to ask how to post data in server api using javascript because when I click the button it won't save and does not return any error I am folowing this code here <a href="https://github.com/devamaz/fetchAPI/blob/master/index.html" rel="nofollow noreferrer">https://github.com/devamaz/fetchAPI/blob/master/index.html</a> here is my js code:</p>
  
  <pre><code>function postData(event){
      event.preventDefault();
  
      let bookedUser = document.getElementById('bookedUser').value;
      let bookedUserName = document.getElementById('bookedUserName').value;
      let bookedEmail = document.getElementById('bookedEmail').value;
      let dateBooked = document.getElementById('dateBooked').value;
      let startTime = document.getElementById('startTime').value;
      let endTime = document.getElementById('endTime').value;
      let attendeesEmail = document.getElementById('attendeesEmail[]').value;
      let bookingDesc = document.getElementById('bookingDesc').value;
  
      fetch('http://localhost:8080/api/createBooking', {
          method: 'POST',
          headers : new Headers(),
          body: JSON.stringify({ 
              "bookedUser": bookedUser, 
              "bookedUserName": bookedUserName, 
              "bookedEmail":bookedEmail, 
              "dateBooked":dateBooked, 
              "startTime":startTime, 
              "endTime":endTime, 
              "attendeesEmail":attendeesEmail, 
              "bookingDesc":bookingDesc})
      }).then((res) =&gt; res.json())
          .then((booking) =&gt; alert('Data Sent'))
          .catch((err)=&gt;console.log(err))
  }
  </code></pre>
  
  <p>and here is the html:</p>
  
  <pre><code>    &lt;form  id="postData"&gt;
          &lt;div&gt;
              &lt;input type="text" placeholder="Booked User" id="bookedUser"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="text" placeholder="Username" id="bookedUserName"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="text" placeholder="Email" id="bookedEmail"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="date" placeholder="Date Booked" id="dateBooked"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="time" placeholder="Start time" id="startTime"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="time" placeholder="End time" id="endTime"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="text" placeholder="Attendees Email" id="attendeesEmail[]"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;textarea id="bookingDesc" cols="20" rows="5"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;input type="submit" value="SEND POST" onclick="postData();"&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>I have tested the code in the backend using postman and it works fine, Thank you in advance</p>