个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 21:50:58 26 4
gpt4 key购买 nike

我有一个网站，您可以在输入字段中输入文本，然后按“添加新行”添加另一个输入字段。

当用户按下提交按钮时，我希望能够读取文本字段内的所有文本，但我似乎不知道如何访问文本字段内的文本。

这是我的代码:

    <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 文件。

谢谢

最佳答案

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

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

您将得到以下结果:

enter image description here enter image description here

请参阅此示例:

$(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 在页面中必须是唯一的。避免使用相同的 id="ye"在<input type="text" placeholder="Attribute" id="ye"> .

关于javascript - 从动态输入字段 JavaScript 中读取文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60132639/

26 4 0
文章推荐： javascript - 使用 next.js 进行服务器端渲染与传统 SSR
文章推荐： angularjs - Angularjs 和单选按钮
文章推荐： rubygems - 如何撤消捆绑安装？
文章推荐： javascript - 处理 Mongoose async/await 调用中的错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com