Question

This should be easy, but after browsing several libraries (jquery preferred!) and even plain old javascript, I’m drawing a blank.

In other words, a row with 3 edit boxes, 2 prefilled with type of, say, cheese and pickle, then one unfilled box for a number, and a submit button to the right of that.
Repeat times n rows.

To put it another way:
Imagine a form presented as a series of rows from a search result.
Let’s say there are 8 results, that’s 8 rows. The user can save their choices into any of 100 “slots”.
It’s easy if each row can have a name or letter; I just call each submit button a number, 1 to 8, and when say 6 is pressed, it know it’s row 6 it wants to save. It uses Malsup’s jquery form thing to submit it in an ajaxy way so that the form doesn’t have to be refreshed each time.

But that doesn’t allow free choice of which “slot” that result is saved in. If I could get the submit button to reflect the number in the cell to the left of it, I’d be away.

But I can’t, so I’m not. And I appear to be the only person to do such a nonsense thing.
Any better way?

Answer 1

Let’s assume your submit button is a button element.

$('table').delegate('button', 'click', function(e) {

  var formData = {}

  $(this).closest('tr').find('input').each(function() {
    formData[this.name] = this.value;
  });

  //Add in your code to ajax it off...

  e.preventDefault(); //since buttons/submits behave differently in each browser.

});

//Now you have all your formData in an object. Send it via your Ajax thing.