Question

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

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

        })

    },

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

Answer 1

如果我对您的理解正确，那么您想将所有输入值添加到一个 <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中找到一个演示。

Answer 2

欢迎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.body代替document.querySelector('p.display-value') https://jsfiddle.net/3mc29vyj/

希望获得帮助，或者至少将您指向正确的方向：）

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

2 个答案: