Read each rows before sending using jQuery -
i have following table inside form
<form> <table id="table1" class="appendgrid ui-widget"> <thead class="ui-widget-header"> <tr> <td class="ui-widget-header" style="width: 32px;"></td> <td class="ui-widget-header">supco</td> <td class="ui-widget-header">number</td> </tr> </thead> <tbody class="ui-widget-content"> <tr id="tblappendgrid_row_1"> <td class="ui-widget-content first">1</td> <td class="ui-widget-content"> <input type="text" id="tblappendgrid_supco_1" name="supco" maxlength="100" style="width: 160px;"></td> <td class="ui-widget-content"> <input type="text" id="tblappendgrid_number_1" name="number" maxlength="4" style="width: 40px;"></td> </tr> <tr id="tblappendgrid_row_2"> <td class="ui-widget-content first">2</td> <td class="ui-widget-content"> <input type="text" id="tblappendgrid_supco_2" name="supco" maxlength="100" style="width: 160px;"></td> <td class="ui-widget-content"> <input type="text" id="tblappendgrid_number_2" name="number" maxlength="4" style="width: 40px;"></td> </tr> <tr id="tblappendgrid_row_3"> <td class="ui-widget-content first">3</td> <td class="ui-widget-content"> <input type="text" id="tblappendgrid_supco_3" name="supco" maxlength="100" style="width: 160px;"></td> <td class="ui-widget-content"> <input type="text" id="tblappendgrid_number_3" name="number" maxlength="4" style="width: 40px;"></td> </tr> <button role="button" class="ui-button" id="btnsave" type="button"></button> </tbody> </table> </form>
i trying read each row(tr) , submit using ajax function.
$('#btnsave').button().click(function () { var rowdata = $(document.forms[0]).serializearray(); $.each(rowdata, function (i, field) { var odata = { "supco": field.supco.value, "number": field.number.value }; $.ajax({ type: 'post', url: "./api/updatedb?id=" + id +"&", data: odata, sucess: alert("record udpatesucessfully.") }); });
problem having is, when try serlializearray, 1 long string , doesn't save in object. goal each row object or read nearest tr, can submit update db. ideas how can that? pleaseeeeee
you should try (assuming id want in first column) :
$('#btnsave').button().click(function () { var rows = $('form tbody>tr'); $.each(rows, function () { var odata = { "supco": $(this).find('input[name="supco"]').val(), "number": $(this).find('input[name="number"]').val() }; $.ajax({ type: 'post', url: "./api/updatedb?id=" + $(this).find('td.first').text() +"&", data: odata, success: alert("record udpatesucessfully.") }); }); });
but maybe better (depending of needs) send 1 single ajax request whole data of rows many of them (one row). :
$('#btnsave').button().click(function () { var odata = { 'rows': [] }; var rows = $('form tbody>tr'); $.each(rows, function () { odata.rows.push({ "id": $(this).find('td.first').text(), "supco": $(this).find('input[name="supco"]').val(), "number": $(this).find('input[name="number"]').val() }); }); $.ajax({ type: 'post', url: "./api/updatedb", data: odata, success: alert("record udpatesucessfully.") }); });
and make loop in server-side script :
foreach ($_post['rows'] $row) { $id = $row['id']; $supco = $row['supco']; $number = $row['number']; /* script */ }
Comments
Post a Comment