从动态输入字段读取文本 JavaScript

Question

我有一个网站，您可以在其中的输入字段中输入文本，然后按 "Add new row" 添加另一个输入字段。

当用户按下提交按钮时，我希望能够阅读文本字段中的所有文本，但我似乎无法弄清楚如何访问文本字段中的文本。

这是我的代码：

    <head>
        <script src = "https://code.jquery.com/jquery-3.3.1.min.js"
        crossorigin="anonymous"> </script>
    </head>

    <script type ="text/javascript">

    var array = []
    var track = 0;

        $(document).on("click", ".btn-add-row", function(){
            var row = $(".row").eq(0).clone().show();
            $(".element-wrapper").append(row);
            var ye = $(".element-wrapper")
        })

        $(document).on("click", ".btn-remove-row", function(){
            var index = $(".btn-remove-row").index(this);
            $(".row").eq(index).remove();
        })
    </script>

    <body>
    <h1>upload file</h1>

    <form method = "post" enctype="multipart/form-data" action = "/">
        <input type = "file" name = "filename">
        <input type = "submit" value = "upload">
    </form>


    <div class = "element-wrapper">
        <div class = "row" style = "display: none;">
            <input type = "text" placeholder = "Attribute" id = "ye">
            <button class = "btn-remove-row">
                Remove Row
            </button>
    </div>
    </div>

    <button class = "btn-add-row"> Add New Row </button>


    </body>
</html>

这是一个与之配套的 CodePen： https://codepen.io/etills/pen/qBdEKPV

如果有人能告诉我如何在用户按下提交时从输入行中读取所有文本，我将不胜感激。我最终想将文本放入一个数组中，并用输入的文本制作一个 .txt 文件。

谢谢

Answer 1

提交时检查您想要的所有输入并收集它们的值。

$(document).on("click", "input[type=submit]", function(e){ 
  e.preventDefault()
  $('input[type=text]').each((i, input) => {
    console.log(input.value)
  })
})

示例：https://codepen.io/jzabala/pen/vYOErpa?editors=1111

Answer 2

您需要此选择器来仅捕获可见的文本框：

div.row:not([style='display: none;']) input[type=\"text\"]"

像这样：

$("form").on("submit", function(e) {
  e.preventDefault();

  var inputs = document.querySelectorAll("div.row:not([style='display: none;']) input[type=\"text\"]");

  var len = inputs.length;
  for (var i = 0; i < len; i++) {
    array.push({
      input: i,
      value: inputs[i].value
    });
  }
  console.log(array);
});

你会得到这样的结果：

见本例：

$(function() {
  var array = [];
  var track = 0;

  $(document).on("click", ".btn-add-row", function() {
    var row = $(".row").eq(0).clone().show();
    $(".element-wrapper").append(row);
    var ye = $(".element-wrapper")
  });

  $(document).on("click", ".btn-remove-row", function() {
    var index = $(".btn-remove-row").index(this);
    $(".row").eq(index).remove();
  });

  $("form").on("submit", function(e) {
    e.preventDefault();

    var inputs = document.querySelectorAll("div.row:not([style='display: none;']) input[type=\"text\"]");

    var len = inputs.length;
    for (var i = 0; i < len; i++) {
      array.push({
        input: i,
        value: inputs[i].value
      });
    }
    console.log(array);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>upload file</h1>
<form method="post" enctype="multipart/form-data" action="/">
  <input type="file" name="filename">
  <input type="submit" value="upload">
</form>
<div class="element-wrapper">
  <div class="row" style="display: none;">
    <input type="text" placeholder="Attribute">
    <button class="btn-remove-row">
                Remove Row
            </button>
  </div>
</div>
<button class="btn-add-row"> Add New Row </button>

切记：元素 ID 在页面中必须是唯一的。避免在 <input type="text" placeholder="Attribute" id="ye">.

中使用相同的 id="ye"

从动态输入字段读取文本 JavaScript

Reading Text From Dynamic Input Field JavaScript

html

javascript

css

input

textinput