0

I have a table which is being filled dynamically on button click

This is my table

<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
                            <thead>
                                <tr>
                                    <th width="20%">Product</th>
                                    <th width="10%">Category</th>
                                    <th width="10%">Pkg Date</th>
                                    <th width="10%">Mfact date</th>
                                    <th width="10%">Expiry</th>
                                    <th width="10%">Batch No.</th>
                                    <th width="8%">Unit Price</th>
                                    <th width="8%">Qty</th>
                                    <th width="10%">Subtotal</th>  
                                    <th></th>                                  
                                </tr>
                            </thead>
                            <tbody id="tablebody">

                            </tbody>
                            <tfoot id="grandtot">
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>   
                                    <td></td> 
                                    <td></td>
                                    <td></td>
                                    <td>Total:</td>
                                    <td></td>
                                    <td>

                                    </td>
                                </tr>
                            </tfoot>
                        </table>

I am adding to this table on button click using jquery

var stock = Number($('#currentstockinput').val());
                 var qty = Number($('#tablettosellinput').val().replace(/[^0-9\.]+/g,""));
                 var pertabprice = Number($('#prodpricetabcapinput').val().replace(/[^0-9\.]+/g,"")).toFixed(2);
                 var subtotal = qty * pertabprice;
                 var pkgdate = $('#pkgdateinput').val();
                 var manufactdate = $('#manufactinput').val();
                 var expdate = $('#expdateinput').val();
                 var batchno = $('#s2_1 option:selected').text();

                 $('#tablebody').prepend('<tr>'+
                         '<td class="prodname">'+prod+'</td>'+
                         '<td class="category">'+type+'</td>'+
                         '<td class="pkgdate">'+pkgdate+'</td>'+
                         '<td class="manufactdate">'+manufactdate+'</td>'+   
                         '<td class="expdate">'+expdate+'</td>'+ 
                         '<td class="batchno">'+batchno+'</td>'+
                         '<td class="unitprice">'+pertabprice+'</td>'+
                         '<td class="qty">'+qty+'</td>'+
                         '<td class="subtot">'+subtotal+'</td>'+
                         '<td>'+
                            '<button class="btn btn-link" type="button">Remove</button>'+
                        '</td>'+
                     '</tr>');

Upto this, it is working fine

Now I am trying to assign value from each row to dropdown list on button click before submitting my form to servlet

$('#tSortable_2 tbody tr').each(function() {
            alert('Adding option');
            $('<option>').val($(this).find(".prodname").text()).text($(this).find(".prodname").text()).appendTo('#prodnd');
            $('<option>').val($(this).find(".category").text()).text($(this).find(".category").text()).appendTo('#categoryd');
            $('<option>').val($(this).find(".pkgdate").text()).text($(this).find(".pkgdate").text()).appendTo('#pkgdated');
            $('<option>').val($(this).find(".manufactdate").text()).text($(this).find(".manufactdate").text()).appendTo('#manufactd');
            $('<option>').val($(this).find(".expdate").text()).text($(this).find(".expdate").text()).appendTo('#expd');
            $('<option>').val($(this).find(".batchno").text()).text($(this).find(".batchno").text()).appendTo('#batchd');
            $('<option>').val($(this).find(".unitprice").text()).text($(this).find(".unitprice").text()).appendTo('#unitd');
            $('<option>').val($(this).find(".qty").text()).text($(this).find(".qty").text()).appendto('#qtyd');
            $('<option>').val($(this).find(".subtot").text()).text($(this).find(".subtot").text()).appendTo('#subtotd');
       })

Now if I have multiple rows in my table the above .each() iterates only once and submits the form.

My form tag contains this code

<form action="customerbill" method="post" id="submittest">  
                    <div class="head clearfix">
                        <div class="isw-grid"></div>
                        <h1>Purchase Cart</h1>                               
                    </div>
                    <div class="block-fluid table-sorting clearfix">
                        <table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
                            <thead>
                                <tr>
                                    <th width="20%">Product</th>
                                    <th width="10%">Category</th>
                                    <th width="10%">Pkg Date</th>
                                    <th width="10%">Mfact date</th>
                                    <th width="10%">Expiry</th>
                                    <th width="10%">Batch No.</th>
                                    <th width="8%">Unit Price</th>
                                    <th width="8%">Qty</th>
                                    <th width="10%">Subtotal</th>  
                                    <th></th>                                  
                                </tr>
                            </thead>
                            <tbody id="tablebody">

                            </tbody>
                            <tfoot id="grandtot">
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>   
                                    <td></td> 
                                    <td></td>
                                    <td></td>
                                    <td>Total:</td>
                                    <td></td>
                                    <td>

                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <select name="prodnd" id="prodnd" style="display:none" >

                                </select>
                                  <select name="categoryd" id="categoryd" style="display:none" >

                                </select>
                                  <select name="pkgdated" id="pkgdated" style="display:none" >

                                </select>
                                  <select name="manufactd" id="manufactd" style="display:none" >

                                </select>
                                  <select name="expd" id="expd" style="display:none" >

                                </select>
                                  <select name="batchd" id="batchd" style="display:none" >

                                </select>
                                  <select name="unitd" id="unitd" style="display:none" >

                                </select>
                                  <select name="qtyd" id="qtyd" style="display:none" >

                                </select>
                                  <select name="subtotd" id="subtotd" style="display:none" >

                                </select>

                    <div class="toolbar clear clearfix">
                            <div class="right">                                
                            <div class="btn-group">
                                <button id="printreport" type="submit" class="btn btn-small btn-warning" onClick="submitForm()"><span>Print</span></button>                                
                            </div>
                            </div>
                        </div>
                        </form>

The problem is that the .each() function iterates only once and only the values inside the first row are getting popuated in the dropdown lists.

The .each() function iterates only once when there are multiple rows in table.

Nishant123
  • 1,968
  • 2
  • 26
  • 44
  • 3
    please use a fiddle. – Nano Jan 30 '15 at 11:11
  • 3
    Are you appending the new rows *after* the `each` runs? – Rory McCrossan Jan 30 '15 at 11:12
  • Yes!! I am appending new row on each button click and on Clicking "Print" button all the values from all the rows is assigned to the dropdown lists but only the first row is getting fetched...I want to fetch all rows – Nishant123 Jan 30 '15 at 11:18
  • I think this can be the problem http://stackoverflow.com/questions/11544072/jquery-each-through-divs-inside-another-div – Sailesh Kotha Jan 30 '15 at 11:21
  • do you return false on your button click or form submit? if not your form will submit and reload the page before your js processing has completed which is why the .each only appears to iterate once. In effect it won't have time to finish iterating before the submit is finished – Pete Jan 30 '15 at 11:36
  • I added onsubmit to my form tag still it didn't work
    – Nishant123 Jan 30 '15 at 11:45
  • You need to provide a fiddle for this. This is a more complicated situation than I think you're realizing. I'm not seeing even a good point at which the each is being called. So if you put this in a fiddle and get it to where you have it now then we can go from there. – Cayce K Jan 30 '15 at 13:16

1 Answers1

0

You could try this, but I do not believe it will work right off the bat. I need to see more information, but you need to try something new.

$('#tSortable_2').find('tbody').find('tr').each(function(){ //do this });

This will at least give you the array you're looking for in a more correct way. (Less wasteful way?) It isn't a huge fix, or even a real fix it is just something new so try that and we will go from there. Also... fiddle.

Cayce K
  • 2,288
  • 1
  • 22
  • 35