6

I am using following javascript function to construct a form and submitting it to the server. It works fine in Chrome browser but not working in Firefox.

function loadPage(url, projectName){
    var jForm = $('<form></form>');
    jForm.attr('action', url);
    jForm.attr('method', 'post');

    var jInput = $("<input>");
    jInput.attr('name', 'curPrj');
    jInput.attr('value', projectName);
    jForm.append(jInput);

    jForm.submit();
}

I got some suggestion from SE's older post Mozilla form.submit() not working, to append the form to document body document.body.appendChild(jForm) but unfortunately that didn't work for me either. I got following error in debug console when I used document.body.appendChild(jForm) before form submit.

TypeError: Argument 1 of Node.appendChild does not implement interface Node. @ http://localhost:9000/assets/javascripts/global.js

Am I missing something here? Pls advise.

Community
  • 1
  • 1
svjn
  • 904
  • 2
  • 19
  • 35

1 Answers1

16

document.body.appendChild(jForm) won't work because jForm is not a dom element, it is a jQuery object so add the below script before jForm.submit();

jForm.appendTo('body')

function loadPage(url, projectName) {
    var jForm = $('<form></form>', {
        action: url,
        method: 'post'
    });

    $("<input>", {
        name: 'curPrj',
        value: projectName
    }).appendTo(jForm);

    jForm.appendTo('body').submit();
}
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • oh yeah, it worked now. Thanks a lot Arun. :) And thanks for the enhanced version of the code. – svjn Mar 21 '14 at 10:03