html - Cannot submit form from Javascript on Firefox - Stack Overflow

admin管理员组

文章数量:1344588

I am creating a form to submit in javascript function. I binded the function to a select element's onchange event. Event works fine in chrome and firefox, i tested it, it calls the function. But the problem is; while chrome submits the form, firefox doesn't. Could you please help? Thanks.

Javascript function:

function getStatementDetails()
{
    var stmtSelect = document.getElementById("statementSelect");
    var selectedId = stmtSelect.options[stmtSelect.selectedIndex].value;

    var stmtForm = document.createElement("form");
    stmtForm.setAttribute('method', "post");
    stmtForm.setAttribute('action', "mymiles-mystatement");

    var stmtId = document.createElement("input");
    stmtId.setAttribute('type', "hidden");
    stmtId.setAttribute('name', "statementID");
    stmtId.setAttribute('id', "statementID");
    stmtId.setAttribute('value', selectedId);

    stmtForm.appendChild(stmtId);
    stmtForm.submit();
};

The select input:

<select id="statementSelect" name="statementSelect" class="select-miles select-miles-medium spacing-right-10" onchange="getStatementDetails()">

Edit: I have read the suggested post and tried it. Still not working. Function latest status:

function getStatementDetails()
{
    var stmtSelect = document.getElementById("statementSelect");
    var selectedId = stmtSelect.options[stmtSelect.selectedIndex].value;

    var stmtForm = document.createElement("form");
    stmtForm.setAttribute('method', "post");
    stmtForm.setAttribute('action', "mymiles-mystatement");

    var stmtId = document.createElement("input");
    stmtId.setAttribute('type', "hidden");
    stmtId.setAttribute('name', "statementID");
    stmtId.setAttribute('id', "statementID");
    stmtId.setAttribute('value', selectedId);

    var stmtSbmt = document.createElement("input");
    stmtSbmt.setAttribute('type', "submit");
    stmtSbmt.setAttribute('name', "tryMe");
    stmtSbmt.setAttribute('id', "tryMe");
    stmtSbmt.setAttribute('value', "try submit");

    stmtForm.appendChild(stmtId);
    stmtForm.appendChild(stmtSbmt);
    stmtForm.submit();
};

I am creating a form to submit in javascript function. I binded the function to a select element's onchange event. Event works fine in chrome and firefox, i tested it, it calls the function. But the problem is; while chrome submits the form, firefox doesn't. Could you please help? Thanks.

Javascript function:

function getStatementDetails()
{
    var stmtSelect = document.getElementById("statementSelect");
    var selectedId = stmtSelect.options[stmtSelect.selectedIndex].value;

    var stmtForm = document.createElement("form");
    stmtForm.setAttribute('method', "post");
    stmtForm.setAttribute('action', "mymiles-mystatement");

    var stmtId = document.createElement("input");
    stmtId.setAttribute('type', "hidden");
    stmtId.setAttribute('name', "statementID");
    stmtId.setAttribute('id', "statementID");
    stmtId.setAttribute('value', selectedId);

    stmtForm.appendChild(stmtId);
    stmtForm.submit();
};

The select input:

<select id="statementSelect" name="statementSelect" class="select-miles select-miles-medium spacing-right-10" onchange="getStatementDetails()">

Edit: I have read the suggested post and tried it. Still not working. Function latest status:

function getStatementDetails()
{
    var stmtSelect = document.getElementById("statementSelect");
    var selectedId = stmtSelect.options[stmtSelect.selectedIndex].value;

    var stmtForm = document.createElement("form");
    stmtForm.setAttribute('method', "post");
    stmtForm.setAttribute('action', "mymiles-mystatement");

    var stmtId = document.createElement("input");
    stmtId.setAttribute('type', "hidden");
    stmtId.setAttribute('name', "statementID");
    stmtId.setAttribute('id', "statementID");
    stmtId.setAttribute('value', selectedId);

    var stmtSbmt = document.createElement("input");
    stmtSbmt.setAttribute('type', "submit");
    stmtSbmt.setAttribute('name', "tryMe");
    stmtSbmt.setAttribute('id', "tryMe");
    stmtSbmt.setAttribute('value', "try submit");

    stmtForm.appendChild(stmtId);
    stmtForm.appendChild(stmtSbmt);
    stmtForm.submit();
};

• javascript
• html
• forms
• firefox
• form-submit

Share Improve this question Follow edited Jul 7, 2015 at 10:16 Batuhan asked Jul 7, 2015 at 9:48 BatuhanBatuhan 8722 silver badges99 bronze badges 18

• It seems like is a correct code, so much long that is neccessary but it must work. You can tell us if console throws an error? In firefox, ALT + F2 opens the superdeveloper bar, and is in tools button where you find inspector, console, etc. – Marcos Pérez Gude Commented Jul 7, 2015 at 9:52
• Maybe Firefox doesn't flush the DOM changes within the same JavaScript method. You can try waiting with Timeout or using jQuery – red13 Commented Jul 7, 2015 at 9:53
• Using jQuery is 2 lines of code. But he is writting in pure-javascript I don't know why, but he have his reasons I think – Marcos Pérez Gude Commented Jul 7, 2015 at 9:54
• 1 @MarcosPérezGude - it may save YOU these problems. If jQuery is the answer, you've asked the wrong question – Jaromanda X Commented Jul 7, 2015 at 10:00
• 1 @MarcosPérezGude - but Alt+F2 does nothing - how embarrassing to be you right now – Jaromanda X Commented Jul 7, 2015 at 10:09

 |  Show 13 more ments

2 Answers 2

Sorted by: Reset to default 7

The ments section is full, and maybe the user don't see the correct answer. @spuyet said that is the solution here:

Javascript form.submit() not working in Firefox

It seems like firefox doesn't send a form without any button inside. If you includes a submit button inside your code must works.

  var button = document.createElement("input");
  button.setAttribute('type', "submit");
  stmtForm.appendChild(button);

And I think that's solve your problem.

Please, tell us if you solve it.

You'll need a submit button in a form if you are wanting to submit it, otherwise you'd need to use the form data api.

<input type="submit" value="click me baby" />

you'd have an easyer time writing your form in the html rather then creating it dynamically using javascript (unless there are reasons you've not gone into as why you'd need to do that)

You've got the select element in your html, why not the whole form?

it's also worth mentioning that you should not give your submit button the name submit, as that can cause issues if you need to preventDefault() at any point.

本文标签： htmlCannot submit form from Javascript on FirefoxStack Overflow