Set Values for dynamically generated input text in jquery

Question

I have a json values in Table2. Which brings values based on data entered. The data is in below format.

"Table2":[{"SP_VENDOR_ID":94.0,"VENDORCODE":"V001","VENDORNAME":"Vendor 1","SP_VENDOR_START_DATE":"2017-12-04T00:00:00","SP_VENDOR_END_DATE":"2017-12-05T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 2","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"}],

Now I want to fill the above values in the below HTML which Is below

<div class="vendorDaterow">
    <div class="vendorName" id="dvVendorNameData1">
        <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" value="" name="nmVendorData" id="txtVendorName1" /></span>
    </div>
    <div class="vendorFromDate">
        <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate1"/><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
    <div class="vendorToDate">
        <label>To Date</label><span class="datepicker"><input type="text" value="" name="spToDate" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
</div>

So I tried with below code but not getting it done rightly.

var data = dataResponse;
var divData = $('.vendorDaterow');
$.each(data.Table2, function (i) {
    $.each(data.Table2[i], function (item, index) {
        if (item) {
            $(".vendorDaterow").append(divData);
            $(divData).addClass("vendorDaterow" + index);
            $(".vendorDaterow .vendorName:last").val(item.VENDORNAME);
            $(".vendorDaterow vendorFromDate:last").val(item.SP_VENDOR_START_DATE);
            $(".vendorDaterow .vendorToDate:last").val(item.SP_VENDOR_END_DATE);
        }

    });
});

Please suggest what is wrong here and how should I set it dynamically

mike_t · Accepted Answer · 2017-12-12 13:02:42Z

1

The way your code is written you will be repeatedly writing to all your elements with class .vendorDaterow

Below is an example of one possible solution . Avoid setting ID attributes in your repeated template, as the ID should be unique.

var data = {"Table2":[{"SP_VENDOR_ID":94.0,"VENDORCODE":"V001","VENDORNAME":"Vendor 1","SP_VENDOR_START_DATE":"2017-12-04T00:00:00","SP_VENDOR_END_DATE":"2017-12-05T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 2","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 3","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"}]}

$(document).ready(function() {
  
  
  for(var i=1;i< data.Table2.length;i++){
    var newId = $(".vendorDaterow").length + 1
    var clonedHtml = $(".vendorDaterow:first").clone(true).addClass("vendorDaterow"+newId)
    clonedHtml.find(".vendorName input").prop("id","txtVendorName"+newId)
    clonedHtml.find(".vendorFromDate input").prop("id","spFromDate"+newId)
    clonedHtml.find(".vendorToDate input").prop("id","spToDate"+newId)
    $(".vendorDaterow:last").after(clonedHtml)
  }
   
  
  $.each(data.Table2, function(index, item) {
    $("#txtVendorName"+(index+1)).val(item.VENDORNAME);
    $("#spFromDate"+(index+1)).val(item.SP_VENDOR_START_DATE);
    $("#spToDate"+(index+1)).val(item.SP_VENDOR_END_DATE);
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <div class="vendorDaterow">
    <div class="vendorName" id="dvVendorNameData1">
      <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" value="" name="nmVendorData" id="txtVendorName1"  /></span>
    </div>
    <div class="vendorFromDate">
      <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
    <div class="vendorToDate">
      <label>To Date</label><span class="datepicker"><input type="text" value=""  id="spToDate1" name="spToDate1"    /><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
  </div>

edited Dec 12, 2017 at 13:02

answered Dec 12, 2017 at 9:24

mike_t

2,7312 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

HEEN Over a year ago

where is #vendorData coming from ?

mike_t Over a year ago

it's the wrapping div <div id="vendorData"></div> that i added to HTML - it serves as a container for the dynamicaly generated rows.

HEEN Over a year ago

also, index i always get it as undefined..why

mike_t Over a year ago

You don't need to use two each loops - your example was wrong. Also , the parameters in my $.each loop are in order index, item, in your code you have them reversed

HEEN Over a year ago

its setting the data somewhere else but not where I wanted.

|

Suresh Ponnukalai · Accepted Answer · 2017-12-12 09:01:29Z

0

If you are sure that you will have only one text box inside each div then directly target the input element.

   $(".vendorDaterow .vendorName input").val(item.VENDORNAME);
   $(".vendorDaterow .vendorFromDate input").val(item.SP_VENDOR_START_DATE);
   $(".vendorDaterow .vendorToDate input").val(item.SP_VENDOR_END_DATE);

answered Dec 12, 2017 at 9:01

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

4 Comments

HEEN Over a year ago

no, it wont be one. it will dynamically added. that is why I added in each loop

Suresh Ponnukalai Over a year ago

so you want to apply the last input element in each div. Or vendorDaterow will have many vendorName??

HEEN Over a year ago

it can have many vendorName, depending upon the data which is coming fromm Table2

HEEN Over a year ago

no its not working :(. $(".vendorDaterow .vendorName input").val(item.VENDORNAME); coming as undefined

Collectives™ on Stack Overflow

Set Values for dynamically generated input text in jquery

2 Answers 2

10 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related