Question

输入字段是通过jquery依赖于用户输入创建的如果用户输入Quantity：5，那么我创建了5个输入字段

例如，如果用户给出Quantity = 3，那么这就是使用Jquery

动态创建html的方式

<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

这里你的参考是完整的代码，var auto_tr值在这里对齐（带回车），用于你的目的。

$(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

所以当qty为4时，循环运行了3次。现在只添加了＆lt; =

谢谢您的回答朋友

Answer 2

确保在通过jquery创建html后调用函数。

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

还要确保正确关闭代码<tr></tr>。并将<tr>放在<table>代码中。

并确保将cont_qty设置为值

Answer 3

创建html并添加所有必填字段后，您可以使用以下选择器捕获所有元素：

＆＃13;

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

＆＃13;

如何获取动态创建的输入字段的值（Json）

3 个答案: