Sometimes you have big forms across site and almost all form share field, better approach is to create generic form and use along with minor changes and on front end u need to save form information on device until user submit form. save information as local storage as if user close form and try later then we can pre fill information already provided.
also you should show message to user when exit form to save information for later use, so user don’t get panic that site is stealing information.
/*---------@local storage for Forms-----------------
*input or select, values store in local storage
*/
$(function(){
var activate_local_storage = 0;
if(activate_local_storage) {
$("form input").focusout(function () {
var element_name = $(this).attr('name');
var value = $(this).val();
saveUserInformation(element_name, value);
})
$("form select").change(function () {
var element_name = $(this).attr('name');
var value = $(this).val();
saveUserInformation(element_name, value);
});
/*reload form data from local storage*/
showUserInformation();
}
});
/*
* @save fill form information in local storage
* */
function saveUserInformation(element_name, value){
if($.trim(value) != ''){
localStorage.setItem(element_name, value);
}
}
/*
* @load user information from local storage
* */
function showUserInformation(){
if(typeof(localStorage) !== "undefined"){
$( "form input" ).each(function() {
var this_element_name = $(this).attr('name');
var this_value = $(this).val();
if(localStorage.getItem(this_element_name) != ''){
if(this_value == ''){
$(this).val(localStorage.getItem(this_element_name));
}
}
});
$( "form select" ).each(function() {
var this_element_name = $(this).attr('name');
if(localStorage.getItem(this_element_name) != ''){
$(this).find('option[value="'+localStorage.getItem(this_element_name)+'"]').prop('selected', true);
}
});
}
}