Question

I have a problem updating MySQL rows using Jquery.

This is my current code.

<script type="text/javascript">
$(document).ready(function(){
$(".insert").click(function(){

var id=$("#id").val();
var ip=$("#ip").val();
var permissions=$("#permissions").val();
var password=$("#password").val();
var key=$("#key").val();

$.post('myscript.php?action=updateAPIuser', {id: id, ip: ip, permissions: permissions,     password: password, key:key },
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); 
});
return false;
});
});   
</script>

This is the html:

<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<th>Customer</th>
<th>Permission</th>
<th>IP</th>
<th>Key</th>
<th>Password</th>
<th>Date added</th>
<th>Action</th>
</tr>
<tr class="record" id="record-1"><td>John Doe</td>
<td><select id="permissions" name="permissions" />
<option value="ro" selected>Read Only</option>
<option value="rw">Read Write</option>
</select></td>
<td><input type="text" id="ip" name="ip" value="1.1.1.13">
<input type="hidden" id="id" name="id" value="1"></td>
<td><input type="text" id="key" name="key" value="mijnkey"></td>
<td><input type="text" id="password" name="password" value="password000"></td>
<td>2012-10-24 20:48:25</td><td><a class="insert" title="Update data" href="#"><img src="images/icons/save.png" title="Save" alt="Save"></a> 
</td></tr>

<tr class="record" id="record-2"><td>Jane Doe</td>
<td><select id="permissions" name="permissions" />
<option value="ro" selected>Read Only</option>
<option value="rw">Read Write</option>
</select></td>
<td><input type="text" id="ip" name="ip" value="2.2.1.13">
<input type="hidden" id="id" name="id" value="1"></td>
<td><input type="text" id="key" name="key" value="janeskey"></td>
<td><input type="text" id="password" name="password" value="pass000"></td>
<td>2012-10-24 20:48:25</td><td><a class="insert" title="Update data" href="#"><img src="images/icons/save.png" title="Save" alt="Save"></a> 
</td></tr>
</table>

And ofcourse I have php for updating the MySQL row.

The problem is this: When I click on Save (aka Update) the Jquery always updates the row with ID 1. No matter what row I click.

So my question is: how can I change the code, so that the correct row gets updates?

Cheers,
Hub

PS This is my PHP-code for updating the row:

function updateAPIuser($req){
global $db_whmcs, $_LANG;    

$id = $req['id'];
$ip = $req['ip'];
$permissions = $req['permissions'];
$password = $req['password'];
$key = $req['key'];
$updated = date("Y-m-d H:i:s");

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0



  $query = "UPDATE `mod_powerdns_api` SET 
`ip` = '".$ip."',
`key` = '".$key."',
`permissions` = '".$permissions."',
`updated` = '".$updated."', 
`password` = '".$password."' 
WHERE `id` = ".$id;

mysql_query($quer) or pdns_die('Can not update user'.mysql_error());

} // end

Answer 1

First of all you shouldn’t use duplicate id’s.

From http://www.w3schools.com/tags/att_global_id.asp

Definition and Usage

The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).

You can get the correct id by using the following code:

var id = $(this).find('[name="id"]').val();

The other elements can also be found the same way:

$(".insert").bind('click', function(){
    var tr = $(this).parents('tr');

    var id = tr.find('[name="id"]').val();
    var ip = tr.find('[name="ip"]').val();
    var permissions = tr.find('[name="permissions"] option:selected').val();
    var password = tr.find('[name="password"]').val();
    var key = tr.find('[name="key"]').val();
});