javascript - Printing dynamic DOM data in console.log - Stack Overflow

admin管理员组

文章数量:1406340

My target is to fetch the data from all the textarea boxes (as added by user), to console.log. With my current code, it's only fetching from first box.

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);
  });

My target is to fetch the data from all the textarea boxes (as added by user), to console.log. With my current code, it's only fetching from first box.

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);
  });

• javascript
• jquery

Share Improve this question Follow edited Jan 3, 2016 at 21:05 Praveen Kumar Purushothaman 167k2727 gold badges213213 silver badges260260 bronze badges asked Jan 3, 2016 at 21:05 Sujay KirtiSujay Kirti 1311 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

As mentioned by Praveen,

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

Can return only the first value.

You can use this instead:

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

Or maybe try this:

  $('.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);
  });

If you are duplicating id, then it will not work.

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

Also, $(this).closest('form').find('[name="nameField"]').val() could fetch the value of only one. You may need to change your structure to:

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

And get the output using $("#formId").serialize(). I can show you a simple example:

$(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./jquery-1.11.3.js"></script>
<form>
  <textarea name="address[]"></textarea>
  <button class="add">Add</button>
  <button class="show">Show</button>
</form>

Output: http://output.jsbin./xakibohina

本文标签： javascriptPrinting dynamic DOM data in consolelogStack Overflow