JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<form id="myForm" method="POST">
<select name="Title" id="Title">
<option value="" selected="selected">Select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select><br />
<label for="First_Name">
First Name
</label>
<input id="First_Name" name="First_Name" type="text" /><br />
<label for="Last_Name">
Last Name
</label>
<input id="Last_Name" name="Last_Name" type="text" /><br />
<label for="Mobile_Phone">
Mobile Number
</label>
<input id="Mobile_Phone" name="Mobile_Phone">
<input id="saveForm" type="submit" value="Save" />
</form>
<button id="getCookie" type="button">Read Cookies</button>
JavaScript
$(document).on('submit', '#myForm', function() {
// serialize our form (get string containing field names and values)
dataString = $(this).serialize();
// set new cookie
$.cookie('formCookie', dataString);
return false;
});
$(document).on('click', '#getCookie', function() {
// get serialized string from cookie
cookieData = $.cookie('formCookie');
// if cookie exists continue
if (cookieData != null) {
// split cookieData string into an array of fields and their values
cookieArray = cookieData.split('&');
// go through each field and split it too to get field name and it's value
$.each(cookieArray, function(k, v) {
field = v.split('=');
// populate field with data
$('#myForm [name="'+field[0]+'"]').val(field[1]);
});
}
return false;
});