Cannot submit form from Javascript on Firefox

Question

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();
};

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, Jul 07 '15 at 09:52
Maybe Firefox doesn't flush the DOM changes within the same JavaScript method. You can try waiting with Timeout or using jQuery — red13, Jul 07 '15 at 09: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, Jul 07 '15 at 09:54
Have you seen this post ?http://stackoverflow.com/questions/24685208/javascript-form-submit-not-working-in-firefox — Sébastien P., Jul 07 '15 at 09:55
maybe because using a javascript lib just to submit a form is overkill. it might be two lines of jquery to write, but what about the thousands of lines you include in your build? — atmd, Jul 07 '15 at 09:55
@MarcosPérezGude - not everyone needs 33k of browser slowing bloat to save a dozen lines of code — Jaromanda X, Jul 07 '15 at 09:57
@atmd I agree, if is only for this case, but if you write in jQuery you save tons of code lines :) I think that the comment of spuyet is the answer to solve the problem. Just add a submit button. — Marcos Pérez Gude, Jul 07 '15 at 09:58
@JaromandaX only for this case? YES. To build a complete page? NO. jQuery saves you a lot of lines a headbreaking problems. — Marcos Pérez Gude, Jul 07 '15 at 09:58
I am new to web development, i am not very familiar with jquery. @MarcosPérezGude Alt+F2 does not work, but the function executes till the end. I put an alert("123") line at the end of the code and it worked. — Batuhan, Jul 07 '15 at 09:59
@MarcosPérezGude - it may save YOU these problems. If jQuery is the answer, you've asked the wrong question — Jaromanda X, Jul 07 '15 at 10:00
Read my comments. jQuery is NOT the answer. If you read with attention you can view how I say — Marcos Pérez Gude, Jul 07 '15 at 10:02
@Batuhan - Ctrl+Shift+K to get Firefox NATIVE console - no need for bloated add ons as well — Jaromanda X, Jul 07 '15 at 10:02
@JaromandaX SHIFT+F2 is NATIVE firefox tools, no addons needed. If you feel so smart, please, solve you the problem. We tell to the user that here: http://stackoverflow.com/questions/24685208/javascript-form-submit-not-working-in-firefox is the solution — Marcos Pérez Gude, Jul 07 '15 at 10:05
@Batuhan sorry, I mistaken in shortcut. It is SHIFT + F2, but with CTRL+Shift+K like jaromandaX said is a directly shortcut — Marcos Pérez Gude, Jul 07 '15 at 10:06
@MarcosPérezGude - but Alt+F2 does nothing - how embarrassing to be you right now — Jaromanda X, Jul 07 '15 at 10:09
@MarcosPérezGude Ok I opened the console, but it does not say anything about my function. I read the post and tried it, but it doesn't work either. — Batuhan, Jul 07 '15 at 10:13
Please, see the answers below, maybe it's your solution in here. — Marcos Pérez Gude, Jul 07 '15 at 10:17

score 7 · Accepted Answer · edited May 23 '17 at 12:02

7

The comments 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.

edited May 23 '17 at 12:02

Community

1
1

answered Jul 07 '15 at 10:12

Marcos Pérez Gude

21,869
4
38
69

I copied your suggestion exactly, still does not work. In Chrome it is working perfectly. I think I am gonna need to find another solution or approach for my problem here. Thank you for your attention. – Batuhan Jul 07 '15 at 10:32
2

I think that you need to append the form to the body, if you like you can hide it, and then submit it. `document.getElementsByTagName("body")[0].appendChild(stmtForm);` – Marcos Pérez Gude Jul 07 '15 at 10:36
2

This worked. I added the form to the body, and submit is now working. Thank you very much, couldn't have solved this without your help. – Batuhan Jul 07 '15 at 10:53
I'm glad to help you. Thanks to @spuyet that tells the submit button – Marcos Pérez Gude Jul 07 '15 at 11:07

atmd · Answer 2 · 2016-05-03T13:11:50.137

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.

Cannot submit form from Javascript on Firefox

2 Answers2