Question

我的目标是从所有textarea框（由用户添加）中获取数据到console.log。使用我当前的代码，它只能从第一个框中获取。

Page Structure

Current Output

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

As mentioned by 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()获取输出。我可以给你一个简单的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

在console.log中打印动态DOM数据

3 个答案: