onSubmit not triggered on form loaded with AJAX

Question

Hi, I use AJAX to load an external HTML file, containing a form, into another HTML file. The form HTML looks something like this:

<form id="..." name="..." onsubmit="postUsingAJAX(x,y,x); return false;">

Loading works fine. However, the onSubmit code is not executed when the form is submitted, same thing with onClick handlers on the submit button; no event listeners seems to be triggered. Is this the way things work when HTML is loaded through AJAX or am I doing something wrong?

A possible work-around would be to do

theFormObject.addEventListener('submit', function...)

but I can't figure out how to make the form NOT submit after the callback is fired. How can I make it wait for a return value (or rather, feed it "return false" no matter what happens in the callback function)?

Any ideas?

Answer 1

If you're using AJAX, my guess is that you don't want the form to take the user to a new page - you want it to call the processing page and update the current page accordingly. What you should do instead is create the entire form without any <form> tags. Then, using the <button> tag (example: <button id="whatever">Whatever</button>) attach a click event listener to that button to do the AJAX stuff. That's the way that I always do AJAX calls with a form that the user is filling in.

Answer 2

It looks like an error in function postUsingAJAX. Code "return false" will not executes. To continue properly work after error you should use try..catch statement. Example:

function postUsingAJAX() {
    try {
        // dangerous code
    } catch (e) {
        // report about error
    }
}

<form onsubmit="postUsingAJAX(); return false;">