How to get values of dynamically created input fields (Json)

Question

input fields are created via jquery depend on user input If user type Quantity : 5 then i m created 5 input fields

for example if user give Quantity = 3 then this is how the html created dynamically using 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>

now i need to store all this input fields values in 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);  
            }

i tried like this but its not working the please someone help me. ThankYou

for your refrence here is full code, var auto_tr value is aligned here(with enter) for your purpose .

$(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]);
        });
 });

I assume that the id="cont_no1" in tr_2 is also a typo (just to make sure you have unique id's)? You could show us the method used to create these input fields. — Artur Filipiak
– Artur Filipiak, Commented Jan 23, 2015 at 11:02

user4013871 · Accepted Answer · 2015-01-23 11:33:21Z

1

did small loop mistake :)

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

in previous one i<cont_qty.value this one used now just changed as i<=cont_qty.value

so the loop ran 3 times when qty is 4. now just added <=

ThankYou for your answers friends

answered Jan 23, 2015 at 11:33

user4013871

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

Comments

jrarama · Accepted Answer · 2015-01-23 10:56:47Z

0

Make sure you call your function after you created the html via jquery.

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

Also make sure you properly close your tags <tr></tr>. And put <tr> inside a <table> tag.

And make sure your cont_qty is set to a value

answered Jan 23, 2015 at 10:56

jrarama

9147 silver badges8 bronze badges

Comments

wesleycoder · Accepted Answer · 2015-01-23 11:32:08Z

0

After you created the html and added all the fields necessary, you can catch all elements by using a selector like:

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

answered Jan 23, 2015 at 11:32

wesleycoder

1,2031 gold badge13 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to get values of dynamically created input fields (Json)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related