javascript - 多步骤表单 - 如何显示之前步骤的数据?
问题描述
这是检查带有 1 个标签的多个单选按钮的好解决方案吗?我有一个包含多个步骤的表格。最后一步显示了关于前面步骤的摘要,我需要从那里获取所有数据。有更好的选择吗?如何从输入字段中获取文本并将其插入摘要?JavaScript?
$('label').click(function() {
id = this.id.split('-');
if (id[0] === '1') {
id[0] = '2';
} else {
id[0] = '1';
}
$('#' + id[0] + '-' + id[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<input type="radio" id="1-1" name="1-level">
<label for="1-1" id="1-1">1</label>
<input type="radio" id="1-2" name="1-level">
<label for="1-2" id="1-2">2</label>
</div>
<div class="two">
<input type="radio" id="2-1" name="2-level">
<label for="2-1" id="2-1">1</label>
<input type="radio" id="2-2" name="2-level">
<label for="2-2" id="2-2">2</label>
</div>
解决方案
添加一个form
元素来包装您的input
元素。表单可以访问其中的所有输入并查看它们的名称和值。所以在这种情况下,在元素上使用value
属性很重要。input
从执行上述操作开始,使您的代码看起来像下面的示例。
另外,要小心id
's. 它们必须是唯一的,因此它们只能在每个文档中出现一次。现在label
和它们的input
元素具有相同的id
.
<form id="step-form">
<div class="one">
...
</div>
</form>
像@Shilly 建议的那样,使用FormData API。此 API 旨在从表单、think和元素中获取所有值input
,并将所有这些数据放入单个对象中。通过这种方式,您可以创建任意数量的表单元素,将它们添加到表单中并将它们的值存储在单个对象中。textarea
select
该对象中的数据将被读取为键值对,在本例中为name
和value
属性值。例如:['1-level', '2']
,这里我们看到带有名称 '1-level'
和值 '2'
的输入。
我不建议使用其他输入元素来显示您的结果或摘要。这可能会让用户感到困惑,因为它建议输入。而是以纯文本形式打印您的结果或创建一个列表。
我不知道许多这些 API 或方法的 jQuery 等价物,所以我使用 Vanilla JavaScript 创建了一个演示,希望能展示您尝试完成的工作。
如果您有任何问题,我一直不清楚,或者没有以任何方式帮助您。请告诉我。
const form = document.getElementById('step-form');
const summary = document.getElementById('step-summary');
const clear = document.getElementById('step-clear');
// Remove all children of the summary list.
function clearSummary() {
while(summary.firstElementChild) {
summary.firstElementChild.remove();
}
}
// Clear list on click.
clear.addEventListener('click', event => {
clearSummary();
});
form.addEventListener('submit', event => {
// Clear list first.
clearSummary();
// Create a fragment to store the list items in.
// Get the data from the form.
const fragment = new DocumentFragment();
const formData = new FormData(event.target);
// Turn each entry into a list item which display
// the name of the input and its value.
// Add each list item to the fragment.
for (const [ name, value ] of formData) {
const listItem = document.createElement('li');
listItem.textContent = `${name}: ${value}`;
fragment.appendChild(listItem);
}
// Add all list items to the summary.
summary.appendChild(fragment);
event.preventDefault();
});
<form id="step-form">
<div class="one">
<input type="radio" id="1-1" name="1-level" value="1">
<label for="1-1">1</label>
<input type="radio" id="1-2" name="1-level" value="2">
<label for="1-2">2</label>
</div>
<div class="two">
<input type="radio" id="2-1" name="2-level" value="1">
<label for="2-1">1</label>
<input type="radio" id="2-2" name="2-level" value="2">
<label for="2-2">2</label>
</div>
<div class="three">
<input type="radio" id="3-1" name="3-level" value="1">
<label for="3-1">1</label>
<input type="radio" id="3-2" name="3-level" value="2">
<label for="3-2">2</label>
</div>
<ul id="step-summary"></ul>
<button type="submit">Review form</button>
<button type="button" id="step-clear">Clear summary</button>
</form>
推荐阅读
- python - 根据顶点位置创建 NetworkX 加权图
- tensorflow - keras 模型子类化示例
- excel - 获取传递给网站表单的数据
- javascript - 创建所有正则表达式匹配的数组?
- javascript - Ember 简单身份验证登录错误未显示在页面上
- javascript - 自定义指令输入返回错误 Angular 5
- javascript - 在 Chrome 扩展 Inject.js 中包含 jQuery
- ios - 没有收到 NSMetaDataQuery 更新通知
- django-rest-framework - 如何检查 Django REST 框架中哪个字段引发了 ValidationError
- grails - 如何在 netbeans 9 中打开 grails 3.3 应用程序?