How to properly submit a dynamically created form with JS/jQuery?

Question

HTML:

<button class="search" name="search">search</button>

Javascript:

$('button.search').live('click', function(event) {
    var newForm = jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    }));
    newForm.submit();
});

Fiddle: http://jsfiddle.net/YqGLH/90/

Expected behavior: when clicking on the search button, page should forward to google search. Works as expected in latest Chrome, Safari and Opera.

Does not work in latest FF and IE9. Clicking the button silently fails, no error messages, no forwarding happens.

What am I missing here?

You don't seem to be appending the new form to the actual page - what happens if you add `.appendTo("body")` before the submit? — nnnnnn, May 13 '13 at 11:46
@nnnnnn I indeed do not add the form, is that a requirement? In that case it's strange that it works in some browsers — András Szepesházi, May 13 '13 at 11:48
To me it _feels_ wrong not to add the form, but I don't actually know if it is covered by any particular specification. Still, it should be easy enough for you to try it out... — nnnnnn, May 13 '13 at 11:50
@nnnnnn That was it, if you care to add as answer I'll accept it. Some reference to this requirement would also be nice. — András Szepesházi, May 13 '13 at 11:52
Simpler can be: `window.location.href = "http://www.google.com/search?q=stack overflow";` [(link)](http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-in-jquery-javascript) — Stano, May 13 '13 at 11:53

nnnnnn · Accepted Answer · 2013-05-13T12:04:49.343

I don't have a reference to any particular specification to support the why, but I believe it will work if you append the new form to the page:

$('button.search').live('click', function(event) {
    jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    })).appendTo('body')
    .submit();
});

Note also that it would be a good idea not to keep using .live() in any new code, given that it has been removed from the latest version of jQuery. Instead use:

$(document).on('click', 'button.search', function() {    // in jQuery v 1.7+   
// or
$(document).delegate('button.search', 'click', function() {    // in jQuery v 1.4.3+

(Ideally specifying a parent element closer to the button rather than document.)

How to pass multiple params ? – iit2011081 Nov 25 '16 at 06:00 — iit2011081, Nov 25 '16 at 06:00
@user3542450 - Just append more fields to the form. – nnnnnn Nov 25 '16 at 06:08 — nnnnnn, Nov 25 '16 at 06:08

score 2 · Answer 2 · answered Oct 31 '14 at 05:40

It's also worth mentioning that you must add the form to the body element, not the document. Chrome is forgiving and will work when the form is just added to the document element, but IE and Firefox will need you to add it to the body element specifically.

How to properly submit a dynamically created form with JS/jQuery?

2 Answers2

Linked