Question

我的项目中有一个多步骤表单，其第一步有一个javascript扩展字段函数，用户可以在其中添加其他字段。如果用户进入下一步，则数据当然存储在会话中直到最终提交。但是，不会记住扩展表格。如果用户从下一步返回，则不会显示附加字段及其数据，更糟糕的是，如果附加字段中的数据无效，则用户不会看到它，因为消息显示在消失字段下方（我使用Cakephp默认验证）。

有没有办法，比如在会话中存储设置，让它留下来？

＆＃13;

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);
}

＆＃13;

<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" />

＆＃13;

Answer 1

您需要为您的网页实施sessionStorage或localStorage。

localStorage - 存储没有过期日期的数据

sessionStorage - 存储一个会话的数据（关闭浏览器选项卡时数据会丢失）

这里我只是发布示例代码供您帮助，您可以通过它来完成您的愿望任务。您只需要遵循以下代码中的逻辑概念并在代码中实现。

还有一个示例，其中只包含id，但您可以通过其他方式实现该示例，以完全填充您的任务。

click here

如何记住表格被延长？

1 个答案: