HTML:

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

Javascript:

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

Fiddle: /

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?

HTML:

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

Javascript:

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

Fiddle: http://jsfiddle/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?

• javascript
• jquery
• forms
• cross-browser
• submit

• 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 Commented May 13, 2013 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 Commented May 13, 2013 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 Commented May 13, 2013 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 Commented May 13, 2013 at 11:52
• Simpler can be: window.location.href = "http://www.google./search?q=stack overflow"; (link) – Stano Commented May 13, 2013 at 11:53

2 Answers 2

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./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.)

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.