title: javascript - ajax request null data
body: <p>I am trying to make an ajax request to the server. The request is send successfully, but the parameters are not appropriate in the request body.</p>
  
  <p><strong>Parameters shown in the body</strong> with browser's network tool:</p>
  
  <p><code>{"name":"","message":"","time":1464807897670}</code></p>
  
  <p>The <strong>name</strong> <code>&lt;input&gt;</code> and the <strong>message</strong> <code>&lt;textarea&gt;</code> <strong>fields are empty, although they should not be.</strong></p>
  
  <p><strong>Here's my HTML input fields:</strong></p>
  
  <pre><code>&lt;div id="writePanel"&gt;
      &lt;p&gt;Your Name&lt;/p&gt;
      &lt;input id="writeName" type="text"&gt;
      &lt;p&gt;Message&lt;/p&gt;
      &lt;textarea id="writeArea"&gt;&lt;/textarea&gt;
      &lt;div id="sendButton"&gt;Send&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here's the JS code:</strong></p>
  
  <pre><code>$(document).ready(function() {
  
      var data = {
  
          name: document.getElementById("writeName").value,
          message: document.getElementById("writeArea").value,
          time: new Date().getTime()
      };
  
      $("#sendButton").click(function () {
          $.ajax({
              type: "POST",
              url: "message.receive",
              contentType: "application/json",
              data: JSON.stringify(data),
              success: function (response) {
                  // ...
              }
          })
  
  
          })
  })
  </code></pre>
  
  <p><strong>What am i missing?</strong></p>