来自javascript的数组文本框并发送到另一个文本框

debugcn 发表于 Dev

当归

我想将输入的值从文本框发送到另一个文本框。这是我的代码

$('.col_bot').on('click', function(e) {

      // alert('hoi');
      var a = parseInt(document.getElementById("nochapter").value);
      var ch = document.getElementById("ch");

      var HTML = '<table width=50% class="eg_form">';

      for (i = 0; i < a; i++) {
        HTML += '<tr><td align="center">';
        HTML += '<input type="text" id="aaa" name="aaa[]"></td>';
        HTML += '<td align="center">';
        HTML += '<input type="text" id="bbb" name="bbb[]"></td></td></tr>';

        document.getElementById("ch").innerHTML = HTML;
      }

      var arrr = document.getElementsByName("bbb[]");
      var arr = $(arr);
      var ar = arr.val();

      
            $("#bbb").keyup(function() {

              var edValue = document.getElementsByName("bbb[]");
              var s = $(edValue);
              var edValue2 = document.getElementsByName("aaa[]");
              var s2 = $(edValue2);

              for (var i = 0, iLen = arrr.length; i < iLen; i++) {
                alert(arrr[i].value);
                document.getElementById("eg_hidden").value = '{' + s2.val() + ':' + s.val() + '}';
              }
            });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abab" id="abab">
  <input type="text" id="nochapter" />
  <input type="button" value="Number of rows" class="col_bot" />
  <div id="ch" class="abab"></div>
  <br>
  <input type="text" id="eg_hidden" name="eg_hidden" /> Summary
</div>

首先，您将输入所需的行数：

其次，您将输入详细信息，在输入时，摘要文本框也会更新如下：

问题是摘要只会得到第一行。

毛茸茸的小猫

您对这段代码有很多问题，我认为这是家庭作业，所以我只会帮助解决您遇到问题的部分，我不会重写您的代码，因为这与您自己的代码背道而驰在家工作！

这是您遇到问题的功能：

$("#bbb").keyup(function() {

  var edValue = document.getElementsByName("bbb[]");
  var s = $(edValue);
  var edValue2 = document.getElementsByName("aaa[]");
  var s2 = $(edValue2);

  for (var i = 0, iLen = arrr.length; i < iLen; i++) {
    alert(arrr[i].value);
    document.getElementById("eg_hidden").value = '{' + s2.val() + ':' + s.val() + '}';
  }
});

这里有几件事：

$("#bbb")- 有很多元素带有 id bbb，但一个 id 应该是唯一的。
您要添加的值s.val()，并s2.val()以“eg_hidden”，但每次要添加相同的值
您每次在循环中都会覆盖“eg_hidden”中的值。

要解决这些具体问题：

将bbbid更改为类 - 在任何地方都这样做！
获取循环中aaa[]和的每个值bbb[]。您已经arrr[i]在循环中获得了的值，因此您可以使用 edValue/edValue2 以相同的方式执行此操作，即bbb在第一次循环时获得第一个元素的值，bbb第二次使用第二次获得第二个元素的值等edValue[i]
将值添加到“eg_hidden”而不是替换它们。您可以使用+=代替来执行此操作=。不要忘记在循环之前重置该值，以免继续添加。

新代码将类似于：

$(".bbb").keyup(function() {

  var edValue = document.getElementsByName("bbb[]");
  var s = $(edValue); // <- you don't need this
  var edValue2 = document.getElementsByName("aaa[]");
  var s2 = $(edValue2); // <- you don't need this

  document.getElementById("eg_hidden").value = "";  // empty this so we can add the new values

  for (var i = 0, iLen = edValue.length; i < iLen; i++) {
    document.getElementById("eg_hidden").value += '{' + edValue2[i].value + ':' + edValue[i].value + '}';
  }
});

工作示例：

$(document).ready(function() {

  $('.col_bot').on('click', function(e) {

    // alert('hoi');
    var a = parseInt(document.getElementById("nochapter").value);
    var ch = document.getElementById("ch");

    var HTML = '<table width=50% class="eg_form">';

    for (i = 0; i < a; i++) {
      HTML += '<tr><td align="center">';
      HTML += '<input type="text" class="aaa" name="aaa[]"></td>';
      HTML += '<td align="center">';
      HTML += '<input type="text" class="bbb" name="bbb[]"></td></td></tr>';

      document.getElementById("ch").innerHTML = HTML;
    }

    var arrr = document.getElementsByName("bbb[]");
    var arr = $(arr);
    var ar = arr.val();

    $(".bbb").keyup(function() {

      var edValue = document.getElementsByName("bbb[]");
      var s = $(edValue); // <- you don't need this
      var edValue2 = document.getElementsByName("aaa[]");
      var s2 = $(edValue2); // <- you don't need this

      document.getElementById("eg_hidden").value = "";  // empty this so we can add the new values

      for (var i = 0, iLen = edValue.length; i < iLen; i++) {
        document.getElementById("eg_hidden").value += '{' + edValue2[i].value + ':' + edValue[i].value + '}';
      }
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abab" id="abab">
  <input type="text" id="nochapter" />
  <input type="button" value="test" class="col_bot" />
  <div id="ch" class="abab"></div>
  <br>
  <input type="text" id="eg_hidden" name="eg_hidden" />
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。