10

I have the following function that collects data from a page, stuffs them all into the 'data' variable, appends it to a form then submits it.

 $(document).ready(function () {
$('#content-tab .submit').click(function () {
    var data = {champion: window.selectedChampion, runes: runes, masteries: masteries, items: items, skillingOrders: skillingOrders, chapters: chapters, title: $('#guide_title').val()};
            data = JSON.stringify(data); 
            $("<form method='post'>").append($('<input type="hidden" name="data" id="data">').val(data)).submit();
    });
});

There is a div on the page that triggers this when clicked on:

<div class='button pointer submit'>Submit</div>

All is well when tested in Chrome. The form submits then redirects to a page, just as planned. But while testing in Firefox (v. 5 and 6), clicking on the div does nothing. Nada. Zilch. I wonder what went wrong in Firefox? Any help would be highly appreciated. Thank you.

radu florescu
  • 4,315
  • 10
  • 60
  • 92
druesome
  • 155
  • 1
  • 7

1 Answers1

39

I would try adding the form to the DOM before submitting.

$('#content-tab .submit').click(function() {

    var data = {
        champion: window.selectedChampion,
        runes: runes,
        masteries: masteries,
        items: items,
        skillingOrders: skillingOrders,
        chapters: chapters,
        title: $('#guide_title').val()
    };
    data = JSON.stringify(data);
    var $form = $("<form method='post'>").append($('<input type="hidden" name="data" id="data">').val(data));
    $form.appendTo("body").submit();

});
karim79
  • 339,989
  • 67
  • 413
  • 406
  • Hi karim79, sorry left that out in my sample code. The function above is already enclosed in $(document).ready(function() { xxx }); – druesome Aug 19 '11 at 05:01
  • Ahh, that .appendTo() did the trick for me. I had used .clone() to copy a form and put some of the fields into canonical form without showing the user, but FireFox wouldn't do the submit right until I added it to the DOM (with display: none, of course) – jacobq Oct 31 '12 at 18:54
  • 1
    @karim79 I've just run into this issue. It seems creating a form element and NOT adding it to the dom then using `.submit()` works in Chrome but not in IE or Firefox -- you need to add it to the dom. Any reason for this at all or just a quirky thing that Chrome does? – Gary Green Jul 25 '14 at 09:56