Как получить значения динамически создаваемых полей ввода (JSON)

Question

поля ввода создаются с помощью JQuery зависят от пользовательского ввода Если тип пользователя Количество: 5, то Im создано 5 полей ввода

, например, если пользователь даст Количество = 3 то это как HTML создается динамически с помощью Jquery

<tr id = "tr_1"> 
    <td><input type="text" name="cont_no1" id="cont_no1" /><td> 
    <td><input type="text" name="cont_size1" id="cont_size1" /><td> 
    <td><input type="text" name="cont_type1" id="cont_type1" /><td> 
</tr> 
<tr id = "tr_2"> 
    <td><input type="text" name="cont_no2" id="cont_no1" /><td> 
    <td><input type="text" name="cont_size2" id="cont_size2" /><td> 
    <td><input type="text" name="cont_type2" id="cont_type2" /><td> 
</tr> 
<tr id = "tr_3"> 
    <td><input type="text" name="cont_no3" id="cont_no3" /><td> 
    <td><input type="text" name="cont_size3" id="cont_size3" /><td> 
    <td><input type="text" name="cont_type3" id="cont_type3" /><td> 
</tr> 

Теперь мне нужно хранить все это поля ввода значений в формате JSON.

  var jsonObj= jsonObj || []; 
      for(var i=1; i<cont_qty; i++) 
      { 
       item = {}; 
       item ["cont_no"] = $('#cont_no'+i).val(); 
       item ["cont_size"] = $('#cont_size'+i).val(); 
       item ["cont_type"] = $('#cont_type'+i).val(); 
       jsonObj.push(item); 
      } 

Я пробовал, как это, но его не работает, пожалуйста, помогите мне. ThankYou

для вашего refrence здесь полный код, значение var auto_tr выровнено здесь (с enter) для вашей цели.

$(document).ready(function(){ 


$("#cont_qty").change(function() 
{  
    var itemCount = 0; 
    $("#munna").empty(); 

    var cont_qty = this.value; 
    for(var i=0 ; cont_qty>i; i++) 
    { 
    itemCount++; 
    // dynamically create rows in the table 
    var auto_tr = '<tr id="tr'+itemCount+'"> 
         <td> 
          <input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value=""> 
         </td> 
         <td> 
          <select class="input-mini" name="cont_size'+itemCount+'" id="cont_size'+itemCount+'"> 
           <option>20</option> 
           <option>40</option> 
           <option>45</option> 
          </select> 
         </td> 
         <td> 
          <select class="input-mini" name="cont_type'+itemCount+'" id="cont_type'+itemCount+'"> 
           <option>DV</option> 
           <option>HD</option> 
           <option>HC</option> 
           <option>OT</option> 
           <option>FR</option> 
           <option>HT</option> 
           <option>RF</option> 
          </select> 
         </td> 
         <td> 
          <select class="input-medium" name="cont_tonnage'+itemCount+'" id="cont_tonnage'+itemCount+'"> 
           <option>24000 Kgs</option> 
           <option>27000 Kgs</option> 
           <option>30480 Kgs</option> 
           <option>Super Heavy Duty</option> 
          </select> 
         </td> 
         <td> 
          <input class="input-medium" type="text" id="cont_tare'+itemCount+'" name="cont_tare'+itemCount+'" value=""> 
         </td> 
         <td> 
          <input class="input-medium" name="cont_netweight'+itemCount+'" id="cont_netweight'+itemCount+'" type="text" value=""> 
         </td> 
         <td> 
          <input class="input-mini" name="yom'+itemCount+'" id="yom'+itemCount+'" type="text" value=""></td> 
         <td> 
          <select class="input-medium" name="cont_condition'+itemCount+'" id="cont_condition'+itemCount+'"> 
           <option>IICL</option> 
           <option>ASIS</option> 
           <option>CARGO WORTHY</option> 
          </select> 
         </td> 
       </tr>';  

     $("#munna").append(auto_tr); 
    } 
}); 


     $("#getButtonValue").click(function() 
     { 
      var jsonObj= jsonObj || []; 
      for(var i=1; i<cont_qty.value; i++) 
      { 
       item = {}; 
       item ["cont_no"] = $('#cont_no'+i).val(); 
       item ["cont_size"] = $('#cont_size'+i).val(); 
       item ["cont_type"] = $('#cont_type'+i).val(); 
       jsonObj.push(item); 
      } 
      alert(jsonObj[0].cont_no[1]); 
     }); 
}); 

Answer 1

сделал небольшую петлю ошибку :)

  for(var i=1; i<=cont_qty.value; i++) 
       { 
        alert(cont_qty.value); 
        item = {}; 
        item ["cont_no"] = $('#cont_no'+i).val(); 
        item ["cont_size"] = $('#cont_size'+i).val(); 
        item ["cont_type"] = $('#cont_type'+i).val(); 
        jsonObj.push(item); 
       } 

в предыдущем один i<cont_qty.value это один используется теперь только изменилось i<=cont_qty.value

поэтому цикл побежал в 3 раза, когда кол-во равно 4. Теперь просто добавил < =

ThankYou за ответы друзей

Answer 2

Убедитесь, что вы вызываете свою функцию после создания html через jquery.

createHtml(); // function to create the html 
storeValuesToArray(); // Your function to store data to array 

Также убедитесь, что вы правильно закрыли теги <tr></tr>. И положите <tr> в тег <table>.

И убедитесь, что ваш cont_qty установлен на значение

Answer 3

После создания HTML-и добавлены все поля необходимо, вы можете поймать все элементы, используя селектор, как:

var jsonObj= jsonObj || []; 
 
$('[name^="cont_no"]').each(function(){ 
 
    var i = this.name.split('cont_no')[1]; 
 
    var item = {}; 
 
    item['cont_no'] = $(this).val(); 
 
    item['cont_size'] = $('[name="cont_size'+i+'"]').val(); 
 
    item['cont_type'] = $('[name="cont_type'+i+'"]').val(); 
 
    jsonObj.push(item); 
 
});