jQuery addClass example

Change class name on click in jQuery

HTML

<div id="result"></div>
<form method = "POST" action = "" name="storage_form" id="storageForm">
  <input type="text" name="number" size="10" value="">
  <p><input type="submit" value="Save"></p>
</form>

JavaScript

$(function(){

	// set the inputs if they have been previously stored and not successfully submitted
	$("#storageForm input[type=text]").each(function(i,e) {
  	var _n = localStorage.getItem(e.name);
  	if (_n !== "") {
    	e.value = _n;
    }
  });

	// automatically save the entered information as the user leaves the input
	$("#storageForm input[type=text]").on('blur', function(e) {
  	localStorage.setItem(e.target.name, e.target.value);
  })

  $("#storageForm input[type=submit]").click(function(e){
    e.preventDefault(); // prevent the form from submitting and refreshing the page
    submitData(); // instead call our function
  });
});

function submitData(num) {
  $.post({
    url: '/echo/json/',
    data: {
    	json: JSON.stringify($("#storageForm input[type=text]").serializeArray())
    }}).done(function (result) 
    {
      console.log('success');
      console.log(result);
      // clear the localStorage
      $("#storageForm input[type=text]").each(function(i,e) {
      	localStorage.removeItem(e.name);
      });
      // redirect to the success page
      window.location.reload();
    }).fail(function (result)
    {
      console.log("error");
      console.log(result);
      setTimeout(function() {submitData(num);}, 5000); // try again in 5 sec
    });
}