Always getting values from first form. What's wrong?

I have a webpage where there are several forms. It looks like

When "Create" is clicked an ajax script checks the fields for illegal values in the first form, whe开发者_如何学运维re the Create button belongs to. That's fine.

But when the "Save" button is clicked, it still checks fields from the first form, and not the form where the Save button belongs to.

My Ajax looks like this

$(document).ready(function(){

    //    $('form').submit(function() {
    $('form').live('submit', function(){

    var title = $('#title').val();

        ...

Is it here the problem could be? I have tried with the commented code, but that doesn't work either.

Any ideas where the problem could be?

$('#title').val(); means "Get the value of the one and only input that has the id title".

If you have violated the spec and have multiple elements with the same id, then browsers will generally recover from the error by returning the first such element.

You should probably change the id to something like: idOfForm_title (so that your <label> elements still work)

And then use: this.elements.title.value where title is the value of the name attribute (and this automatically resolves to the form on which the submit event fires).

I think you should give your forms a class, like class="create" for the first / create form and then class="edit" for the second / edit form.

Then you can amend your jQuery to look like

$(document).ready(function() {
    // only work with the 'create' form
    $('form.create').live('submit', function(e) {
        e.preventDefault(); // stop the form's default action

        // the rest of your code
    });

    // only work with the 'edit' form(s)
    $('form.edit').live('submit', function(e) {
        e.preventDefault(e); // stop the form's default action

        // the rest of your code
    });
});