多步表单-如何显示以前步骤中的数据？
多步表单-如何显示以前步骤中的数据？
提问于 2020-01-24 12:31:57
这是检查带有一个标签的多个单选按钮的好方案吗？我有一个有多个步骤的表单。最后一步是对前面步骤的总结，我需要从那里获取所有数据。还有更好的选择吗？如何从输入字段获取文本并将其插入摘要？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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-24 14:18:34
添加一个form元素来包装您的input元素。表单可以访问其中的所有输入，并查看它们的名称和值。因此，在这种情况下，在value元素上使用input属性是很重要的。从以上操作开始，并使您的代码看起来像下面的示例。
另外，小心使用id。它们必须是唯一的，因此它们只能在每个文档中出现一次。现在，label和它们的input元素具有相同的id。
<form id="step-form">
<div class="one">
...
</div>
</form>就像@Shilly建议的那样，使用FormData API。这个API旨在获取表单中的所有值，考虑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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59896468
复制相关文章
相似问题
腾讯云开发者
