CODEWITHSUNDEEP
javascriptjquery
Sujay Kirti
Sujay Kirti

Reputation: 13

Printing dynamic DOM data in console.log

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.

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

Upvotes: 0

Views: 2305

Answers (3)

Sachin
Sachin

Reputation: 1218

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}

Upvotes: 6

Sachin
Sachin

Reputation: 1218

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

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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.com/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.com/xakibohina

Upvotes: 1

Related Questions