I am creating a row of 3 textboxes dynamically.But i am not able to read the values of the same.

Below is the code for creation of textboxes.

$(function() {
  $('#addVNFButton').on('click', function() {
    if (vnfCounter > 10) {
      alert("only 10 vnf's are allowed");
      return false;
    }
    //e.preventDefault();
    $('<div/>').addClass('col-md-12')

      .html('<div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Vendor</label> <input type="text" class="form-control" id="vnfVendor"/></div><div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Product Name</label> <input type="text" class="form-control" id="vnfProductName"/></div><div class="col-md-3 col-sm-3 col-xs-3"><label class="control-label">Release</label> <input type="text" class="form-control" id="vnfRelease"/></div>')
      .append($('<button/>').addClass('btn btn-action remove').text('Delete'))
      .insertAfter($('#vnfSection'));
    vnfCounter++;
  });
});

above code creates 3 textboxes in a row like below.

enter image description here

Below is the code which i tried to read values.

for (var i = 1; i < vnfCounter; i++) {
  var vnfVendor = "";
  var vnfProduct = "";
  var vnfRelease = "";
  vnfVendor += $('#vnfVendor' + i).val();

  vnfProduct += $('#vnfProductName' + i).val();
  vnfRelease] += $('#vnfRelease' + i).val();
}

I am getting the result as undefined html object.Pls help

2 Answers

1
Adesh Kumar On

You are using a closing div tag <div/> instead of opening div tag <div>.

$('<div>').addClass('col-md-12')

Hope it will help you. Happy coding...!

0
Azim Kazi On

Add Name attr. to your dynamically created textbox

 var Titles = $("input[name='TitleField']").map(function () { return $(this).val().trim(); }).get();

above code will return all the textbox vlaue in array. This is working for me