Javascript passing parameters from form to function --> update DB

can anyone help please. I have a form generated dynamically, when it is submitted it should send values to a function and add them back to a database. I'm having real problems getting this to work, it seems simple: 1. Form --> 2. submit received --> 3. update function. The code is below:

Dynamically generated form:

   function renderResults(tx, rs) {
    e = $('#status');
    e.html("");
    for(var i=0; i < rs.rows.length; i++) {
      r = rs.rows.item(i);
  var f = $("<form>" +
"<input type=\"hidden\" name=\"rowId\" value=\"" + r.id + "\" />" +
"<input value=\"" + r.name + "\" name=\"name\" />" +
"<input value=\"" + r.amount + "\" name=\"amount\" />" +
"<input type=\"submit\" />" +
"</form>");
e.append("id: " + r.id, f);
f.submit(function(e)
{
updateRecord(this.rowId.value, this.name.value, this.amount.value);
});

        }
  }

Handles the form submit and passes to function:

$('#theform').submit(function() {
updateRecord($('#thename').val(), $('#theamount').val());

});

Function to set values:

function updateRecord(id, name, amount) {
db.transaction(function(tx) {

       tx.executeSql('UPDATE groupOne SET (name, amount) VALUES (?, ?) WHERE id=?', [name, amount, id], renderRecords);

  });
}     

The DB update code has the id set to 4 as a test just to see if anything happens to row 4, i've been fiddling with this line for ages to get it to work. If i set it to:

tx.executeSql('UPDATE groupOne SET name = 4, amount = 5 WHERE id=?', [id], renderRecords);

it will work with set values, but can someone help me get the form开发者_StackOverflow values into it please.

You are missing the row id in your jQuery selector. You are passing:

$('#thename').val();

But your field has an id of "thename" + r["id"]:

'<input type="text" ... id="thename' + r['id'] + '" ...>'

You need to get your value by passing the full input id.

$("#thename" + rowId).val();

Edit: Looking more closely at your code, I notice you are creating multiple forms with the same id, which is invalid html. I see now that you've got one form per record. Good, just lose the id from the form and its inputs. Instead, use names for the inputs.

var f = $("<form>" +
    "<input type=\"hidden\" name=\"rowId\" value=\"" + r.id + "\" />" +
    "<input name=\"name\" />" +
    "<input name=\"amount\" />" +
    "<input type=\"submit\" />" +
    "</form>");
e.append("id: " + r.id, f);
f.submit(function(e)
{
    updateRecord(this.rowId.value, this.name.value, this.amount.value);
});