这是第一页。
<form id="myform">
<label for="fname" class="fname_label">Name</label>
<input type="text" id="fname" class="input1" placeholder="Full Name" name="fname">
<label for="phone">Phone</label>
<input type="number" name="phone" id="phone" placeholder="Phone Number">
<label for="textarea" class="textarea_label">Address:</label>
<textarea name="address" id="textarea" type="text"></textarea>
<label for="select">Gender:</label>
<select name="select" id="select">
<option value = "0">Select</option>
<option value = "1">Male</option>
<option value = "2">Female</option>
<option value = "3">Other</option>
</select>
<label for="select1">Category:</label>
<select name="select1" id="select1">
<option value = "0">Select</option>
<option value = "1">Open</option>
<option value = "2">OBC</option>
<option value = "3">SC/ST</option>
<option value = "4">Other</option>
</select>
<label for="select2">State:</label>
<select name="select2" id="select2">
<option value = "0">Select</option>
<option value = "1">Maharashtra</option>
<option value = "2">Gujarat</option>
<option value = "3">Rajasthan</option>
</select>
<label for="select3">District:</label>
<select name="select3" id="select3">
<option value = "0">Select State</option>
<option value = "1">Select</option>
<option value = "1">Pune</option>
<option value = "1">Vidarbha</option>
<option value = "1">Thane</option>
<option value = "2">Select</option>
<option value = "2">Bharuch</option>
<option value = "2">Ahmedabad</option>
<option value = "2">Jamnagar</option>
<option value = "3">Select</option>
<option value = "3">Jaipur</option>
<option value = "3">Jodhpur</option>
<option value = "3">Bikaner</option>
</select>
<h id="qualifications">Qualifications:</h>
<label for="checkbox1">BE</label>
<input name="education[]" type="checkbox" value="BE" id="checkbox1">
<label for="checkbox2">MCA</label>
<input name="education[]" type="checkbox" value="MCA" id="checkbox2">
<div data-role="fieldcontain">
<label for="select-based-flipswitch">Subscription:</label>
<select id="select-based-flipswitch" data-role="flipswitch">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
</select>
</div>
<button id="myButton" type="submit" value="Submit" class="ui-btn ui-btn-b">Submit</button>
</form>
这是我尝试将用户输入的值存储在本地存储中。
$(document).ready(function() {
$('#select').change(function() {
localStorage.setItem('select', $('#select option:selected').text());
});
$('#select1').change(function() {
localStorage.setItem('select1', $('#select1 option:selected').text());
});
$('#select2').change(function() {
localStorage.setItem('select2', $('#select2 option:selected').text());
});
$('#select3').change(function() {
localStorage.setItem('select3', $('#select3 option:selected').text());
});
$("button").click(function() {
var name = $("#fname").val();
var phonenum = $("#phone").val();
var address = $("#textarea").val();
var subscribe = $("#select-based-flipswitch").val();
var qualification = '';
var qualification1 = '';
if ($("#checkbox1").is(":checked")) {
qualification = $("#checkbox1").val();
}
if ($("#checkbox2").is(":checked")) {
qualification1 = $("#checkbox2").val();
}
var input = [name, phonenum, address, select, select1, select2, select3, qualification, qualification1, subscribe];
localStorage.setItem("input", JSON.stringify(input));
});
});
这是我想要显示所有数据的第二页。
<body>
<div data-role="page" id="page2" data-dismissible="false">
<div data-role="header">
<h2 class="ui-title">Confirmation</h2>
</div>
<div data-role="main" class="ui-content">
<div id="content">
<p> Name: <span id="display_fname" class="one"></span></p>
</div>
<p> Phone No.: <span id="display_phone" class="one"></span></p>
<div id="content">
<p> Address: <span id="display_textarea"></span></p>
</div>
<p> Gender: <span id="display_select" class="one"></span></p>
<p> Category: <span id="display_select1" class="one"></span> </p>
<p> State: <span id="display_select2 " class="one"></span></p>
<p> District: <span id="display_select3" class="one"></span> </p>
<p> Qualification: <span id="display_qualifications" class="one"></span> </p>
<p> Subscription: <span id="display_select-based-flipswitch" class="one"></span> </p>
<a href="" class="ui-btn ui-btn-inline ui-btn-b btn-1" onClick="window.location.replace('form1.html');">OK</a>
<a href="" class="ui-btn ui-btn-inline ui-btn-b btn-2" onClick="window.location.replace('form1.html');"> Back</a>
</div>
</div>
</body>
这是我从本地存储中获取值的尝试。仅显示姓名、电话地址,其余未显示任何内容。
$(document).ready(function() {
for (let i = 0; i < localStorage.length; i++) {
var storedInput = JSON.parse(localStorage.getItem("input"));
$("#display_fname").html(storedInput[0]);
$("#display_phone").html(storedInput[1]);
$("#display_textarea").html(storedInput[2]);
$("#display_select").html(storedInput[3]);
$("#display_select1").html(storedInput[4]);
$("#display_select2").html(storedInput[5]);
$("#display_select3").html(storedInput[6]);
$("#display_qualifications").html(storedInput[7] + " " + storedInput[8]);
$("#display_select-based-flipswitch").html(storedInput[9]);
localStorage.clear();
}
});
我只能显示姓名、电话和地址作为输出。其余其他字段没有显示任何内容。
最佳答案
假设输入元素的 name
存在一对一映射属性为 span 元素的 id
属性(即 <input name="fname" />
映射到 <span id="display_fname">
,您可以轻松使用逻辑来执行以下操作:
- 提交表单后,您将创建一个包含
name
的对象数组。输入字段及其值。将此数组转换为 JSON 并将其存储在 localStorage 中。 - 当您选择使用存储的数据填充 DOM 时,只需解析 localStorage 中存储的 JSON,遍历数组中的每个元素即可。每个元素将包含一个指针,存储在
name
中键,到显示元素。
A proof-of-concept is published on JsFiddle因为 StackOverflow 的代码片段无法在浏览器不提示 CORS 的情况下处理 localStorage。不过,下面的代码非常简单:
在表单页面上:
$(document).ready(function() {
// Instead of listening to button click, always listen to form submit event
$('#myform').submit(function(e) {
e.preventDefault();
// Create an array of objects called `formData`
var formData = $(this).find(':input').map(function() {
return {
name: $(this).attr('name'),
value: $(this).val()
};
}).get();
// Store it in localStorage
localStorage.setItem('formData', JSON.stringify(formData));
});
});
在您的显示/确认页面:
$(document).ready(function() {
// Read and parse from localStorage
var formData = JSON.parse(localStorage.getItem('formData'));
// Iterate through array, and set HTML of matching <span> element
$.each(formData, function(i, datum) {
$('#display_' + datum.name).html(datum.value);
});
});
关于javascript - 使用数组将表单数据存储在本地存储中并在新页面上检索它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49609153/