在console.log中打印動態DOM數據

Question

我的目標是從所有textarea框（由用戶添加）中獲取數據到console.log。 用我當前的代碼，它只是從第一個盒子中獲取。

的HTML

<form class="" action="" method="post">
      <div class="form-group" id="testID">
        <div id="afield">
          <textarea rows="2" cols="160" class="form-control nField" name="nameField" placeholder="Enter address here." required ></textarea>
          <br>
        </div>

          <div class="col-sm-11">
            <p class="help-block">Hit the + to add more fields.</p>
          </div>
          <div class="col-sm-1">
            <button type="button" class="btn btn-default" id="addBtn" style="margin-top:5px!important;">
              <i class="fa fa-plus fa-lg"></i>
            </button>
          </div>
          <button type="submit" class="btn btn-primary addSubmit">
            Save
          </button>
      </div>
    </form>

JS：

$('#addBtn').click(function(){
    var addField = $('<div id="afield"><textarea rows="2" cols="160" class="form-control nField" name="nameField" placeholder="Enter address here." required ></textarea></div><br>');
    $('#afield').append(addField);
  });
  $('.addSubmit').click(function(e){
            e.preventDefault();
    var data = $('#testID').map(function() {
        return {
            Address: $(this).closest('form').find('[name="nameField"]').val()
        };
    }).get();
    var jsonString = JSON.stringify(data);
    console.log(jsonString);
  });

Answer 1

如Praveen所述 ，

$(this).closest('form').find('[name="nameField"]').val()

只能返回第一個值。

您可以改用以下方法：

var address = []
$(this).closest('form').find('[name="nameField"]').each(function(i,v){
    address.push($(v).val());
});
return {Address: address}

Answer 2

或嘗試以下方法：

  $('.addSubmit').click(function(e){
            e.preventDefault();
    var address = []
    $(this).closest('form').find('[name="nameField"]').each(function(i,v){
        address.push($(v).val());
    });
    var data = {Address: address}
    var jsonString = JSON.stringify(data);
    console.log(jsonString);
  });

Answer 3

如果您要復制id ，那么它將不起作用。

var addField = $('<div id="afield"><textarea
//-------------------------^^^^^^

同樣， $(this).closest('form').find('[name="nameField"]').val()只能獲取一個值。 您可能需要將結構更改為：

<textarea name="address[]"> <!-- note the [] -->

並使用$("#formId").serialize()獲得輸出。 我可以舉一個簡單的例子：

 $(function () { $(".add").click(function () { $(this).before('<textarea name="address[]"></textarea>'); return false; }); $(".show").click(function () { alert($("form").serialize()); return false; }); }); 

 * {font-family: Segoe UI;} textarea {display: block; resize: none; width: 200px; height: 100px; margin: 0 0 5px;} 

 <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <form> <textarea name="address[]"></textarea> <button class="add">Add</button> <button class="show">Show</button> </form> 

輸出： http : //output.jsbin.com/xakibohina