0

I am currently loading several forms into a webpage with:

$(document).ready(function () {
    $('#content').load('php_script.php', function() {
        $(this).find('#someForm').ajaxForm(function() {
            alert('Success!');
        });
        $(this).find('.someOtherForm').ajaxForm(function() {
            alert('Success!');
        });
    });
});

This works in Chrome, Chromium and IE who loads the forms and everything works as it should (Clicking submit sends a request to the php-script defined in the form's action, which adds stuff to a db, and shows the alert dialog). In Firefox (v10.0.2) this code loads the forms into the DOM and displays them, but when clicking submit on any of the forms nothing happens.

At first I suspected ajaxForm, but changing the above code to:

$(document).ready(function () {
    $('#content').load('php_script.php');
});

yields almost the same result, the difference being that the user is sent to the script defined as the action (Except for Firefox, where nothing happens).

How do I make Firefox not kill the submit button?

2 Answers 2

1

I solved it, bad HTML from my side:

<table><form ...>
    <tr>...</tr>
</form></table>

Instead it should look like:

<form ...><table>
    <tr>...</tr>
</table></form>

The validator did not catch this since it was loaded via jQuery (and I forgot to validate the page serving the forms), and Firefox buggered out.

1
  • You can write this answer as update in your question. No need to write separate answer. Feb 29, 2012 at 17:56
0

The code above looks ok to me...

  1. Have you had a look in firebug if there are any errors? Maybe there is a conflicting Id or something.

  2. Maybe the form isnt completely loaded into the dom yet, might be worth giving live binding a try

  3. Found this in the docs:

...jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser...

If you inspect the form is it the same as in other browsers?

2
  • 1. Only errors in firebug is my CSS3 gradient. The page is valid XHTML trans. No javascript errors. 2. Gonna check that out, thanks :). 3. The form is the same when inspecting it in Firefox and when inspecting it in Chrome. There is no head, html, or body in the output from php_script.php though, can that have some unforeseen effect when loading?
    – phnom
    Feb 28, 2012 at 15:47
  • I don't think that will cause any issues, give the live binding a try.
    – Manatok
    Feb 28, 2012 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.