snippets/form.html

<!DOCTYPE html>
<html>
	<h1> Submitting a form's data in JSON format using JS </h1>

	<p>
		Code: 
		<pre>
			  var form = document.getElementById('myform');

			  form.onsubmit = function (e) {
			    // stop the regular form submission
			    e.preventDefault();

			    // collect the form data while iterating over the inputs
			    var data = {};
			    for (var i = 0, ii = form.length; i < ii; ++i) {
			      var input = form[i];
			      if (input.name) {
			        data[input.name] = input.value;
			      }
			    }

			    // construct an HTTP request
			    var xhr = new XMLHttpRequest();
			    xhr.open(form.method, form.action, true);
			    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

			    // send the collected data as JSON
			    xhr.send(JSON.stringify(data));

			    xhr.onloadend = function (response) {
			      console.log('response from server',response);
			      var responseHtml = document.getElementById('response');
			      responseHtml.innerHTML = response.target.response;
			    };
			  };
		</pre>
	</p>
	<p>
		<form action="https://jsonplaceholder.typicode.com/posts" method="post" id="myform">
		    Title: <input name="title" type="text" value="my title">
		    Body: <textarea name="body" value="my body"></textarea>
		    <input type="submit">
		</form>

		<pre id="response"></pre>
	</p>
	<footer>
		<script>
		  var form = document.getElementById('myform');

		  form.onsubmit = function (e) {
		    // stop the regular form submission
		    e.preventDefault();

		    // collect the form data while iterating over the inputs
		    var data = {};
		    for (var i = 0, ii = form.length; i < ii; ++i) {
		      var input = form[i];
		      if (input.name) {
		        data[input.name] = input.value;
		      }
		    }

		    // construct an HTTP request
		    var xhr = new XMLHttpRequest();
		    xhr.open(form.method, form.action, true);
		    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

		    // send the collected data as JSON
		    xhr.send(JSON.stringify(data));

		    xhr.onloadend = function (response) {
		      console.log('response from server',response);
		      var responseHtml = document.getElementById('response');
		      responseHtml.innerHTML = response.target.response;
		    };
		  };
		</script>
	</footer>
</html>