How to remember a form is extended?

Question

I have a multistep form in my project, the first step of which has a javascript extend field function where a user can add additional fields. If the user goes to the next step, the data is of course stored in Session until final submission. However, the extended form will not be remembered. If the user goes back from next step the additional field and its data is not displayed, worse still, if the data in the additional field is invalid, the user won't see it, as the message is displayed underneath the disappeared field (I'm using Cakephp default validation).

Is there a way, like storing the setting in session, to make it stay?

var counter = 0;
function moreFields(val1, val2, val3) {
	counter++;
	var newField = document.getElementById(val1).cloneNode(true);
	newField.id = '';
	newField.style.display = 'block';
	var newFields = newField.querySelectorAll('[name], [id], [for], [data-display]');
		for (var i=0;i<newFields.length;i++) {
			var theNames = newFields[i].name
			if (theNames)
				newFields[i].name = "data[" + val3 + "][" + counter + "][" + theNames + "]";
			var theNames2 = newFields[i].id;
	        if (theNames2)
	            newFields[i].id = theNames2 + counter;
	        	console.log(newFields[i].id); 
	        var theNames3 = newFields[i].htmlFor;
	        if (theNames3)
	            newFields[i].htmlFor = theNames3 + counter;
	        	//console.log(newFields[i].htmlFor);  
    		var theNames4 = newFields[i].dataset.display;
	        if (theNames4)
	            newFields[i].dataset.display = theNames4 + counter;
	        	console.log(newFields[i].dataset.display);  	
		}			
	var insertHere = document.getElementById(val2);
	insertHere.parentNode.insertBefore(newField,insertHere);
}

<span id="readroot" style="display: none">
<div class="row">
	<div class="col-lg-6">
		<div class="form-group required">
            <label for="Student1Grade">Grade</label>
            <select name="grade" data-display="#display_student_1_grade" class="form-control" id="Student1Grade" required="required">
                <option value="">Please Select</option>
                <option value="1">Grade 1</option>
                <option value="1">Grade 2</option>
            </select>
        </div>						
	</div>
	<div class="col-lg-6">
		<div class="form-group">
            <label for="Student1Gender">Gender</label>      
            <select name="gender" data-display="#display_student_1_gender" class="form-control" id="Student1Gender">
                <option value="1">Male</option>
                <option value="2">Female</option>
            </select>
        </div>
	</div>	
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
</span>
<span id="writeroot"></span>		
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="Add Field" />

Answer 1

You need to implement either sessionStorage or localStorage for your page.

localStorage - stores data with no expiration date

sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Here I am just posting sample code for your help through which u can do your desire task. You just need to follow the logical concept from below code and implement in your code.

There is a sample also which is only containing id but you can implement it in other way which can full fill your task.

click here