Autocomplete-Add new row problem
Hey everyone,
I got this set up where a new row is added to a table which contains a text box that is set up with the jQuery auto-complete plugin.
It's all hooked up with PHP and MySQL to a database, and when you click on a entry from the autocomplete, it prints the ID of that entry so I can work with it in the backend.
Currently, it prints the ID to a visible text box, in use, its going to be hidden, its just so i can check whether the ID is being printed in the first place.
Problem is, all the IDs change to the same when a new row is added. For example, if I start with the first row, it'll print the ID of the selected entry, but if I click to add another row, it'll replace all the ID text boxes with the ID for the second entry. I need all the ID boxes to relate to the correct autocomplete entry.
To make the tables rows unique, there's a variable called "id" which is incremented each time a new row is added. I guess I need to make each of the text boxes containing the ID unique so they don't all change when a new row is added.
Can anyone help me out with this, here's the code I'm using..
-
function addFormField() {
var id = document.getElementById("id").value;
$("#lesson-student-array").append("<tr id='row" + id + "'><td style='width:16px;'><p>" + id + "</p></td><td style='width:160px;'><p><input name='name[]' id='example' class='auto-student-name' /><input class='hiddenIDbox' /></p></td><td style='width:16px;'><a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'><img src='/style/icons/delete.png' alt='' /></a></td></tr>");
$(".auto-student-name").autocomplete("/manage/users/autoname-conduit.php")
.result(function (evt, data, formatted) {
$(".hiddenIDbox").val(data[1]);
});
id = (id - 1) + 2;
document.getElementById("id").value = id;
}
function removeFormField(id) {
$(id).remove();
}
Many thanks..
-- Ian