jquery post - update db - multiple rows - php

Question

I'm not sure if what I'm trying to do is simple or not but here it is:
I have rows of data in a table. The last 3 fields are text fields that take user input. Each row has it's own UPDATE button.
I'm using the following code to try and do a jQuery .ajax post but I'm seeing my issue - I'm assigning IDs to my input fields and you can only have one ID declared per page so I'm sure that's one issue.
I'm trying to make it so that when you click the UPDATE button, it passes the variables from that row in the INPUT boxes and the hidden INPUT field for the rowID, and calls a .php file that updates the DB.
$(function() {
$(".submit").click(function() {
var status = $("#status").val();
var ly = $("#ly").val();
var rt = $("#rt").val();
var offerout = $("#offerout").val();
var lineid = $("#lineid").val();
var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&lineid=' + lineid;
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
and on line of my form (each line is the same but with a different hidden ID variable):
<form method="POST" name="form">
<td>This one</td><td>Los Angeles</td>
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status" name="status"></td>
<td><input size="6" type="text" id="ly" name="ly"></td>
<td><input size="6" type="text" id="rt" name="rt"></td>
<td><select id="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" id="lineid" value="97">
<td><input type="submit" class="submit" value="Update"></td>
</form>
Thanks in advance, been working for days on this!

Answer 1

Duplicating id attributes will cause problems. When you say $("#ly"), you'll probably get the first one on the page and that's usually not the one you want. That's easy to solve:
Drop the id attributes in favor of class attributes. You could also use attribute selectors.
Adjust your jQuery selectors to go up to an ancestor and come back down to the thing you want.
First the HTML:
<td><input size="6" type="text" class="status" name="status"></td>
<td><input size="6" type="text" class="ly" name="ly"></td>
<td><input size="6" type="text" class="rt" name="rt"></td>
<td><select class="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" class="lineid" value="97">
Then your jQuery:
var $form = $(this).closest('form');
var status = $form.find(".status").val();
var ly = $form.find(".ly").val();
var rt = $form.find(".rt").val();
var offerout = $form.find(".offerout").val();
var lineid = $form.find(".lineid").val();
Also, since you are doing a POST request, you should just hand jQuery an object and let it worry about serializing it:
var data = {
status: status,
ly: ly,
rt: rt,
offerout: offerout,
lineid: lineid
};
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: data,
success: function() {
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
That should take care of your client-side issues.

Answer 2

You could store a row number data variable in each submit and use that to determine which row was clicked and thus which inputs you need to pull values from.
$(function() {
$(".submit").each(function () {
var rowNum = $(this).attr('data-rownum');
$(this).click(function () {
var status = $("#status" + rowNum).val();
var ly = $("#ly" + rowNum).val();
var rt = $("#rt" + rowNum).val();
....
});
});
});
<form method="POST" name="form">
....
<td><input size="6" type="text" id="status1" name="status"></td>
<td><input size="6" type="text" id="ly1" name="ly"></td>
<td><input size="6" type="text" id="rt1" name="rt"></td>
<input type="hidden" name="lineid" id="lineid1" value="97">
<td><input type="submit" class="submit" value="Update" data-rownum="1"></td>
</form>

Answer 3

I remove hidden field and assign database id to update button as button will click get that id and corespondent data.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<form method="POST" name="form">
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status_97" name="status"></td>
<td><input size="6" type="text" id="ly_97" name="ly"></td>
<td><input size="6" type="text" id="rt_97" name="rt"></td>
<td><select name="offerout" id="offerout_97"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<td><input type="submit" class="submit" value="Update" name="97"></td>
</form>
</tr>
<tr>
<form method="POST" name="form">
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status_96" name="status"></td>
<td><input size="6" type="text" id="ly_96" name="ly"></td>
<td><input size="6" type="text" id="rt_96" name="rt"></td>
<td><select name="offerout" id="offerout_96"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" id="lineid_96" value="96">
<td><input type="submit" class="submit" value="Update" name="96"></td>
</form>
</tr>
</table>
java script code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
$(".submit").click(function() {
var rowToUpdate = $(this).attr('name');
var status = $("#status_"+rowToUpdate).val();
var ly = $("#ly_"+rowToUpdate).val();
var rt = $("#rt_"+rowToUpdate).val();
var offerout = $("#offerout_"+rowToUpdate).val();
var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&rowToUpdate='+ rowToUpdate;
$.ajax({
type: "POST",
url: "post/updatedata.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
</script>
I hope this will help you..