title: How to set content type as application/json using Ajax call?
body: <p>Have a <code>smartcontract</code> <code>GovtContract</code>, that works fine when used <code>curl</code> commands,</p>
  
  <pre><code>$curl -X POST -H "Content-Type: application/json" localhost:3000/govtcontract/set -d '{"value":"5"}' | jq
  
  $curl -X GET -H "Content-Type: application/json" localhost:3000/govtcontract/get | jq
  </code></pre>
  
  <p>However when used a form, not able to set the content type as JSON in the request header.</p>
  
  <p>HTML and JS:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  function validateForm() {
      console.log("in validateForm");
      //var amt = document.forms["txForm"]["amtvalue"].value;
          var amt = document.getElementById("amtvalue").value;
          console.log(amt);
          if (isNaN(amt) || amt &lt; 0) {
              alert("Amount is not valid");
              return false;
          }
          console.log("before ajax call");
          var sendValues = {
              value: amt
          }
           $.ajax({
               url: "/govtcontract/set",
               type: "POST",
               dataType:"json",
               data: JSON.stringify({
               value: amt
                 }),
               contentType: "application/json",
               success: function(got) {
                    return console.log("shortened url: " + got);
                  }
            });
  
  
  
      return true;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Enter the transaction details below:&lt;/h1&gt;
  &lt;form name="txForm" action="http://127.0.0.1:3000/govtcontract/set" onsubmit="return validateForm()" method="post"&gt;
  Enter the amount:&lt;br&gt;
  &lt;input type="number" name="amtvalue" id="amtvalue" value="0"/&gt;&lt;br&gt;
  
  &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Server <code>app.js</code>:</p>
  
  <pre><code>const bodyParser = require('body-parser');
  const express = require('express');
  const GovtContractInstance = new (require('./GovtContract.js'))();
  const app = express();
  
  // Uses json as the format for reading request bodies
  app.use(bodyParser.json());
  
  // Allow CORS policy to allow anyone to call these endpoints
  app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      next();
  });
  
  // POST testing endpoint for echoing the body of post calls
  // You can use this endpoint to ensure the format of your curl requests are correct
  // ex: curl -X POST -H "Content-Type: application/json" localhost:3000/echo -d '{"copy": "cat"}'
  app.post('/echo', (request, response) =&gt; {
      // Same as post call except used for /app endpoint for getting/initializing the backend data
      response.status(200).send(request.body);
  });
  
  // POST deploys the SimpleStorage.sol smart contract onto your network.
  // ex: curl -X POST -H "Content-Type: application/json" localhost:3000/simplestorage/deploy
  // Optionally, you can use a SimpleStorage contract that it already deployed by
  // adding the deployed address to the end of the url
  // ex. curl -X POST -H "Content-Type: application/json" localhost:3000/simplestorage/deploy/0xafcAfc6F48E23cEF78355A2f6D013310B84c6272
  app.post('/govtcontract/deploy/:address?', (request, response) =&gt; {
      let address = request.params.address ? request.params.address : null;
      GovtContractInstance.deploy(address).then((deployedAddress) =&gt; {
          return response.status(200).send({contractAddress: deployedAddress});
      }).catch((error) =&gt; {
          console.log("Error in deploy: ", error);
          return response.status(400).send({errorMessage: JSON.stringify(error)});
      })
  });
  
  // POST Sets the value stored in the contact to the value set in the request body
  // ex: curl -X POST -H "Content-Type: application/json"     localhost:3000/simplestorage/set -d '{"value": "5"}'
  app.post('/govtcontract/set', (request, response) =&gt; {
      if (!request.body.value) {
          return response.status(400).send({errorMessage: "No value set in request body"});
      }
      GovtContractInstance.set(request.body.value).then((txReceipt) =&gt; {
          return response.status(200).send({receipt: txReceipt});
      }).catch((error) =&gt; {
          console.log(error);
          return response.status(400).send({errorMessage: JSON.stringify(error)});
      })
  });
  
  // GET Returns the value stored in the contract
  // ex: curl -X GET -H "Content-Type: application/json" localhost:3000/simplestorage/get
  app.get('/govtcontract/get', (request, response) =&gt; {
      GovtContractInstance.get().then((value) =&gt; {
      return response.status(200).send({storedValue: value});
      }).catch((error) =&gt; {
          console.log(error);
          return response.status(400).send({errorMessage: JSON.stringify(error)});
      })
  });
  
  // Listen on port 3000
  app.listen(3000, () =&gt; {
      console.log('listening on port 3000');
  });
  </code></pre>
  
  <p>The form is being sent as <code>application/x-www-form-urlencoded</code> as seen in the request header. Unable to figure this out. TIA!</p>