Many forms, but only submit the one that changes

Question

What I have done so far

I have created a website using CGI::Application and HTML::Templates in Perl that looks like this.

The bottom form is will appear for each data set there is in my database. E.g. 400 times.

The idea of the bottom form is that the user should be able to make changes to an existing dataset, where the top form creates a new dataset.

The top form works, and uses Ajax to look in the database for illegal values, that the user is not allowed to enter.

Problem

There will be an Save button for each dataset, as seen in the screenshot.

How do I submit just the dataset corresponding to the Save button that was pressed using Ajax?

I can do that with pure JQuery and having a hidden input like so

<form action="" method="post">
   <input name="anchor" value="34" type="hidden">
   <input name="title" type="text" />

   ...

   <button  type="submit">Save</button>
</form>

but without Ajax, I can't first check for illegal values in the database.

How would the Ajax code look like, that would submit just the dataset for the form the save button belongs to?

Answer 1

You could use the .serialize() method:

$('form').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            // the AJAX request succeeded => do something
            // with the results returned by the server
        }
    });
    return false;
});

This will subscribe for the submit event of all forms (maybe you could adjust the selector to restrict it only to the forms contained in the table) and when submitted it will cancel the default action and send an AJAX request by serializing all the form fields.