Javascript 如何使用具有多个输入的数据显示？

我有一个表单向导，在最后一步中，我希望显示提交的表单数据的预览。我使用数据显示属性来实现这一点。我有多个同名输入：

<input type="text" class="form-control input_nb" name="num_espece[]" placeholder="Indiquer le nombre">

---

在预览步骤中，只显示第一个输入的值。我应该怎么做才能显示所有输入的值？

如果我理解正确，您希望将所有输入值添加到一个

标记中，对吗

现在，您可以迭代所有
标记，然后查找具有
数据显示
属性中提供的相同名称的所有元素。您的
var a
现在包含元素列表，但在您的代码中，您将其视为单个元素。您需要遍历所有字段并将值追加到显示元素，
$（this）.html（…）
将覆盖它，因此您希望通过
$（this.append（…）
追加文本

代码示例

f = function() {
  var form = $("form");

  $(".display-value").each(function() {
    $(this).html('');
    var as = $('[name="' + $(this).data("display") + '"]');
    if (as && as.length) {
      for (var i = 0; i < as.length; i++) {
        var a = $(as[i]);
        "text" == a.attr("type") ||
        "email" == a.attr("type") ||
        a.is("textarea")
          ? $(this).append(a.val())
          : a.is("select")
            ? $(this).append(a.find("option:selected").text())
            : a.is(":radio") || a.is(":checkbox")
              ? $(this).append(
                  a
                    .filter(":checked")
                    .closest("label")
                    .text()
                )
              : "card_expiry" == $(this).attr("data-display") &&
                $(this).append(
                  $('[name="card_expiry_mm"]', form).val() +
                    "/" +
                    $('[name="card_expiry_yyyy"]', form).val()
                );
      }
    }
  });
};

f=函数（）{
变量形式=$（“形式”）；
$（“.display value”）。每个（函数（）{
$（this.html（“”）；
var as=$（'[name=“'+$（this）.data（“display”）+'“]'）；
if（as&&as.length）{
对于（变量i=0；i

在这里可以找到一个演示。
欢迎您，如果我很了解您，您希望在
提交后显示
表单中的所有内容

假设这是您的
表单

<form>
  <input placeholder="Your name" required>
  <input type="email" placeholder="Your email" required>
  <textarea placeholder="Your comment"></textarea>
  <button>Check</button>
</form>


检查

您只需要获取所有项目并显示它们的值

// Avoid submit button
const $items = document.querySelectorAll('form > *:not(button)')

// On submit
document.querySelector('form').onsubmit = e => {
  // Show all data
  document.body.innerHTML = [...$items].reduce((acc, e) => 
  acc += `${e.placeholder} = ${e.value}<br>`, '')
  // Aborting real submit, this is just an example
  e.preventDefault()
}

//避免提交按钮
const$items=document.querySelectorAll（'form>*：not（button）'））
//提交
document.querySelector（'form'）。onsubmit=e=>{
//显示所有数据
document.body.innerHTML=[…$items].reduce（（acc，e）=>
acc+=`${e.placeholder}=${e.value}
`，'）
//中止real submit，这只是一个示例
e、 预防默认值（）
}

您可以使用
document.querySelector（'p.display-value'）代替
document.body

希望这有助于或至少为您指明正确的方向：）

<form>
  <input placeholder="Your name" required>
  <input type="email" placeholder="Your email" required>
  <textarea placeholder="Your comment"></textarea>
  <button>Check</button>
</form>

// Avoid submit button
const $items = document.querySelectorAll('form > *:not(button)')

// On submit
document.querySelector('form').onsubmit = e => {
  // Show all data
  document.body.innerHTML = [...$items].reduce((acc, e) => 
  acc += `${e.placeholder} = ${e.value}<br>`, '')
  // Aborting real submit, this is just an example
  e.preventDefault()
}