A Pen by Sean Mateer

Thumbnail
This awesome code was written by seanmateer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright seanmateer ©
  • HTML
  • CSS
  • JavaScript
    <form name="local_storage_form" method="post" action="">

<input type="text" name="your_name" id="your_name" class="localStore column" value="" />
<input type="text" name="your_surname" id="your_surname" class="localStore column" value="" />
 <input type="text" name="bongo" id="bongo" class="localStore column" value="" /> 

<input id="add_column" type="button" value="add column" />
</form>

/*Downloaded from https://www.codeseek.co/seanmateer/a-pen-by-sean-mateer-PqoydX */
    


/*Downloaded from https://www.codeseek.co/seanmateer/a-pen-by-sean-mateer-PqoydX */
    $(document).ready(function() {
  
  function init() {
    if (localStorage) {
      $('#your_name').val(localStorage["your_name"]);
      $('#your_surname').val(localStorage["your_surname"]);
      $('#bongo').val(localStorage["bongo"]);
      $('#input-4').val(localStorage["input-4"]);
    }
  }

  $('#add_column').on('click', function() {
    function makeColumn() {
      var countColumns = $('input[type=text]').length;
      var next = countColumns + 1;
      $('body').append('<input type="text" name="input-' + next + '" id="input-' + next + '" class="localStore column" value="">');
      console.log('the next input is number ' + next);
    }
    makeColumn();
		$('.localStore').keyup(function() {
    	localStorage[$(this).attr('id')] = $(this).val();
  	});
  });
  
  
 	 init();
	
  	// JSON.stringify --> JSON.parse
  

});

Comments