多步骤表单 - 如何显示之前步骤的数据？

Question

这是检查带有 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>

Answer 1

添加一个form 元素来包装您的input 元素。表单可以访问其中的所有输入并查看它们的名称和值。因此，在这种情况下，在 input 元素上使用 value 属性很重要。从上面的操作开始，让你的代码看起来像下面的例子。

另外，请注意id。它们必须是唯一的，因此它们只能在每个文档中出现一次。现在label 和它们的input 元素具有相同的id。

<form id="step-form">

  <div class="one">
    ...
  </div>

</form>

像@Shilly 建议的那样，使用FormData API。此 API 旨在从表单中获取所有值，例如 input、textarea 和 select 元素，并将所有这些数据放入单个对象中。这样，您可以根据需要创建任意数量的 form-elements，将它们添加到表单中并将它们的值存储在单个对象中。

该对象中的数据将被读取为 key-value 对，在本例中为 name 和 value 属性值。例如：['1-level', '2']，这里我们看到带有 name '1-level' 和 value '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>