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

Answer 1

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.

Answer 2

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.