入力フィールドの値を取得して配列に格納する方法

debugcn 投稿 Dev

BLuu-II

コードは機能していますが、一度にすべての値を取得しています。必要なのは、削除ボタンをクリックしたときに値を取得し、それらの値を配列に格納することです。私がこれでちょっと立ち往生しているのを助けてください。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>

mojtaba ramezani

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]