JSFiddle - React, Tailwind, and code Playground

by nchaud

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/AutoSave.min.js"></script>
<body style="padding:30px">

	<div class = 'panel panel-info'>
		<div class = 'panel-heading'><b>Your Marketing Preferences</b></div>
	
		<div class = 'panel-body'>
	
		<div class="alert alert-success" style='text-align:center' id='autosave_enabled'>
		  This form will autosave - try hitting F5 at any time!
		</div>
    
		  <button id='disable_autosave' onclick='disableAutoSave(this)' style='margin-left:20px'>
			Disable AutoSave
		  </button>
		
		<div class="input-group">
			<label>Please enter your name :-</label>
		  <input type="text" name='name' class="form-control" placeholder="asdf is fine too">
		</div>

		<br />
		
		<label>Please select your status :-</label>
		<div class="input-group">
		  
		  <div>
			<input type='radio' name='status' value='single'>Single
		  </div>
		  
		  <div>
		  <input type='radio' name='status' value='married'>Married
		  </div>
		  
		  <div>
		  <input type='radio' name='status' value='divorced'>Divorced
		  </div>

		  <div>
		  <input type='radio' name='status' value='divorced & remarried'>Divorced &amp; Remarried
		  </div>

		  <div>
		  <input type='radio' name='status' value='divorced,remarried & divorced'>Divorced, Remarried &amp; Divorced
		  </div>

		  <div>
		  <input type='radio' name='status' value='divorced,remarried,divorced&remarried'>Divorced, Remarried, Divorced &amp; Remarried
		  </div>

		  <div>
		  <input type='radio' name='status' value='other'>Don't...

JavaScript

//No overrides required here
	var autoSave = new AutoSave();
	
	var disableAutoSave = function(sender){
	
		autoSave.dispose();
		sender.disabled = true;
		sender.style.color = 'lightgray';
		$('#autosave_enabled').hide();
	};
	
	var submitFeedback = function(sender){
	
		//Get the string representing the current value across all the controls
		var data = autoSave.getCurrentValue();
		
		//You could send it off to your server here
		//var oReq = new XMLHttpRequest()
		//oReq.open("POST", "www.example.com/api/feedback");
		//oReq.send(data);
		
		//Clear all local data for next user for when they refresh
		autoSave.resetStore();
				
		sender.disabled = true;
		var confirmation = "<h3>Thank you. (Now when you refresh, the data is cleared locally)</h3>";
		
		var div = document.createElement("div");
		div.innerHTML = confirmation;
		
		document.querySelector(".panel-body").appendChild(div);
}