时间戳

首页 > 解决方案 > 如何获取输入字段的值并将其存储在数组中

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

问题描述

代码正在运行，但我一次获得了所有值，我想要的是在单击删除按钮时获取值，然后将这些值存储在数组中。请帮助我，我有点陷入困境。对 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>

标签： javascriptjqueryhtmlarrays

解决方案

$(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>

推荐阅读