javascript - javascript中如何判断输入是否是数组类型？

Question

<input type="text" name="members[0].name"> <input type="text" name="members[0].address">

Javascript code :

              var input_text;
              var inputs=document.querySelectorAll("input[type=text],textarea, select");
                _.each(inputs, function(e, i) {
                    var keyName = $(e).attr("name");
                    if (typeof keyName != "undefined") {
                        var text = $(e).parent().find('label').text();

                        if ($(e).is('select')) {
                            input_text = input_text + "<tr><td>" + text + "</td><td>  " + $(e).find(':selected').text() + "</td></tr>";
                        }
                        else {
                             input_text = input_text + "<tr><td>" + text + "</td><td>  " + $(e).val() + "</td></tr>";
                        }
                    }

                });
                console.log(input_text);

正如您所看到的，除了上述输入之外，我正在获取 $(e).val() 中所有输入的值。

Answer 1

这些输入不是浏览器中的“数组”。他们只是在其名称中使用命名约定，某些服务器端处理(例如，在 PHP 中)使用该命名约定在提交表单数据时为您组织表单数据。

我不知道“预览”是什么意思，但您可以通过简单地循环浏览表单的元素 (yourForm.elements) 或使用yourForm.querySelectorAll("input[type=text]") (或 $(yourForm).find("input[type=text]") 使用 jQuery - 我错过了首先是您问题上的 jquery 标记)。

theForm.elements 示例:

document.querySelector("form input[type=button]").addEventListener("click", function() {
  var form = document.getElementById("the-form");
  Array.prototype.forEach.call(form.elements, function(element) {
    if (element.type === "text") {
      console.log(element.name + " = " + element.value);
    }
  });
});

<form id="the-form">
  <input type="text" name="members[0].name" value="name 0">
  <input type="text" name="members[0].address" value="address 0">
  <input type="text" name="members[1].name" value="name 1">
  <input type="text" name="members[1].address" value="address 1">
  <input type="text" name="members[2].name" value="name 2">
  <input type="text" name="members[2].address" value="address 2">
  <div>
    <input type="button" value="Show">
  </div>
</form>

theForm.querySelectorAll 示例:

document.querySelector("form input[type=button]").addEventListener("click", function() {
  var form = document.getElementById("the-form");
  Array.prototype.forEach.call(form.querySelectorAll("input[type=text]"), function(element) {
    console.log(element.name + " = " + element.value);
  });
});

<form id="the-form">
  <input type="text" name="members[0].name" value="name 0">
  <input type="text" name="members[0].address" value="address 0">
  <input type="text" name="members[1].name" value="name 1">
  <input type="text" name="members[1].address" value="address 1">
  <input type="text" name="members[2].name" value="name 2">
  <input type="text" name="members[2].address" value="address 2">
  <div>
    <input type="button" value="Show">
  </div>
</form>

$(theForm).find 示例:

$("form input[type=button]").on("click", function() {
  var form = document.getElementById("the-form");
  $(form).find("input[type=text]").each(function() {
    console.log(this.name + " = " + this.value);
  });
  // Of course, we could have just used `$("#the-form input[type=text]").each`...
  // but I was assuming you'd already have `form`
});

<form id="the-form">
  <input type="text" name="members[0].name" value="name 0">
  <input type="text" name="members[0].address" value="address 0">
  <input type="text" name="members[1].name" value="name 1">
  <input type="text" name="members[1].address" value="address 1">
  <input type="text" name="members[2].name" value="name 2">
  <input type="text" name="members[2].address" value="address 2">
  <div>
    <input type="button" value="Show">
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>