How to submit a form via AJAX using a different action?

Question

I have a form element and that has a normal submit button but I also want to be able to submit an AJAX get request using the values entered in the form but make it to a different address (this is independed of the submit button).

Is there an easy way to do that?

---

The long version: I have a form with several select elements in it and want to repopulate them (updating them to the new set of valid values) each time the user sets one of them.

Answer 1

This will be easiest if you use a library (Prototype, jQuery, Closure, or any of several others). With the help of such a library, it becomes almost trivially easy to do this.

Prototype example:

$('theFormElementId').request({
    onSuccess: function(response) {
        // GET was successful
    }
});

that uses Prototype's Form#request, but you could use Ajax.Request instead and get the form data via Form#serialize (Form#request basically just does that for you).

jQuery example:

$.get("yoururl", $('#theFormElementId').serialize(), function(data) {
    // The GET was successful
});

That uses jQuery's $.get and serialize functions (you could use $.ajax instead of $.get for more control/options).

It's totally possible to do this without a library, it's just a lot more work.