如何获取输入字段的值并将其存储在数组中答案

【问题标题】：How to get the value of the input fields and store it in an array如何获取输入字段的值并将其存储在数组中
【发布时间】：2019-04-29 06:43:15
【问题描述】：

代码正在运行，但我一次获取所有值，我想要的是在单击删除按钮时获取值，然后将这些值存储在数组中。请帮助我，我有点陷入困境。对 JavaScript 来说是全新的。尝试在谷歌上搜索，但没有运气。

<html lang="en">

<head>
  <title>Sample</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
  </script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-body">
        <form action="">
          <div class="input-group control-group after-add-more">
            <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
            <div class="input-group-btn">
              <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
            </div>
          </div>
        </form>

        <!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
        <div class="copy-fields hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
            <div class="input-group-btn">
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {

      /* here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class. */
      $(".add-more").click(function() {
        var html = $(".copy-fields").html();
        $(".after-add-more").after(html);
      });

      /* here it will remove the current value of the remove button which has been pressed */
      $("body").on("click", ".remove", function() {
        var values = $(this).val();
        alert(values);
        $(this).parents(".control-group").remove();
      });
    });
  </script>
</body>

</html>

【问题讨论】：

您想要获取活动值。这是你的问题吗？
无法理解你在问什么
是的，通过输入字段旁边的删除按钮。但是，当我尝试这样做时，我会在动态添加的输入字段中获取所有值

标签： javascript jquery html arrays

【解决方案1】：

$(document).ready(function() {

var arrays = [];

$(".add-more").click(function(){ 
   var html = $(".copy-fields").html();
   $(".after-add-more").after(html);
});

$("body").on("click",".remove",function(){
    var value = $(this).closest('.input-group').find('input').val();   
    arrays.push(value);
    console.log($(this).closest('.input-group').find('input').val());
    console.log("arrays: ", arrays)
    $(this).parents(".control-group").remove();
  });
});

<html lang="en">
<head>
<title>Sample</title>
<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> 
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<div class="container">
<div class="panel panel-default">
<div class="panel-body">
    <form action="" >

    <div class="input-group control-group after-add-more">


           <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
                  <div class="input-group-btn"> 
                    <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
                  </div>
          </div>

    </form>


    <!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
    <div class="copy-fields hide">
      <div class="control-group input-group" style="margin-top:10px">
        <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
        <div class="input-group-btn"> 
          <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
        </div>
      </div>
    </div>
   </div>
  </div>
</div>

【讨论】：

这似乎有效，但是我想将这些值存储在一个数组中，我该如何实现呢？
编辑的代码（存储在脚本中的数组中）@BLuu-II 希望有用❤️?

【解决方案2】：

基本上将onclick 事件分配给重置按钮，该按钮从文本字段中获取值，例如array_name.push(document.getElementByName('addmore[]').value); 然后做你需要的。

【讨论】：