For Advanced Users

HTML Page named – myform.html

<div id='ContentOutput'></div>
<div class='container'>
  <form id='ajaxHtmlFormID' name='ajaxHtmlFormID' action='./ajaxHtmlFormIDexample' method='post'> 
	First Name: <input type='text' id='firstname' name='firstname' size='30' required />
    <br />Last Name: <input type='text' id='lastname' name='lastname' size='30' required />
    <br />Email: <input type='email' id='emailid' name='emailid' size='30' required />
    <br />Password: <input type='password' id='pwd' name='pwd' size='30' required />
    <br />checkbox: <input type='checkbox' id='cb' name='cb' value='1' />
    <br />checkbox2: <input type='checkbox' id='cb1' name='cb1' />
    <br />
    <label class="checkbox">
      <input type="checkbox" value="50-200" name="price">50-200 </label>
    <label class="checkbox">
      <input type="checkbox" value="200-500" name="price">200-500 </label>
    <label class="checkbox">
      <input type="checkbox" value="500-1000" name="price">500-1000 </label>
    <label class="checkbox">
      <input type="checkbox" value="1000-1500" name="price">1000-1500 </label>
    <label class="checkbox">
      <input type="checkbox" value="1500-3000" name="price">1500-3000 </label>
    <label class="checkbox">
      <input type="checkbox" value="3000-5000" name="price">3000-5000 </label>
    <label class="checkbox">
      <input type="checkbox" value="5000-10000" name="price">5000-10000 </label>
    <label class="checkbox">
      <input type="checkbox" value="10000-50000" name="price">10000-50000 </label>
  </form>
</div>
<div id="SerializeContent"> empty </div>

Ajax jQuery script named – ajaxsubmit.js

$(document).ready(function () {
	console.clear();
	$("#ajaxHtmlFormID").on('change', 'input[type="checkbox"]', function() {
	  var form = $('#ajaxHtmlFormID');
	  var mydata = $("#ajaxHtmlFormID").serialize();
	  $('#SerializeContent').html($("#ajaxHtmlFormID").serialize());
	  console.dir($("#ajaxHtmlFormID").serialize());
	  $.ajax({
		type: form.attr('method'),
		url: form.attr('action'),
		dataType: "json",
		data: mydata,
		success: function(data) {
		  var result = data;
		  $('#ContentOutput').html(result);
		}
	  });

	  return false;
	});
});