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

【问题标题】：How to use data-display with multiple inputs?如何使用具有多个输入的数据显示？
【发布时间】：2019-06-13 23:46:33
【问题描述】：

我有一个表单向导，在最后一步我想显示提交的表单数据的预览。我正在使用 data-display 属性来做到这一点。我有多个同名输入：

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

这就是我在最后一步中的显示方式：

<p class="form-control-static display-value" data-display="num_espece[]"></p>

这是用于此的脚本：

 f = function() {

        $(".display-value", form).each(function() {

            var a = $('[name="' + $(this).attr("data-display") + '"]', form);

            "text" == a.attr("type") || "email" == a.attr("type") || a.is("textarea") ? $(this).html(a.val()) : a.is("select") ? $(this).html(a.find("option:selected").text()) : a.is(":radio") || a.is(":checkbox") ? $(this).html(a.filter(":checked").closest("label").text()) : "card_expiry" == $(this).attr("data-display") && $(this).html($('[name="card_expiry_mm"]', form).val() + "/" + $('[name="card_expiry_yyyy"]', form).val())

        })

    },

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

【问题讨论】：

标签： javascript html

【解决方案1】：

欢迎 Youssef，如果我理解你的话，你希望 form 中的所有内容都显示在 submit 之后

假设这是你的form

<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()
}

您可以使用document.querySelector('p.display-value') 而不是document.body https://jsfiddle.net/3mc29vyj/

希望此帮助或至少为您指明正确的方向：)

【讨论】：

【解决方案2】：

如果我理解正确，您想将所有输入值添加到 one <p> 标记中，对吗？

现在您遍历所有<p class="display-value"> 标记，然后找到data-display 属性中提供的所有具有相同名称的元素。您的 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()
                );
      }
    }
  });
};

可以在此Codepen 中找到演示。

【讨论】：