Firefox won't submit a form created by JavaScript

Question

I need to create a form with a few inputs when an event happens. My code is below.

Chrome submits fine - the alert box shows and the page changes.

Firefox does not work - the alert box shows but the page stays the same. How can I get Firefox to submit the form?

var idsInput = document.createElement('input');
idsInput.name = 'itemIds';
idsInput.value = ids;

var quantityInput = document.createElement('input');;
quantityInput.name = 'quantity';
quantityInput.value = 1;

var authTokenInput = document.createElement('input');
authTokenInput.name = 'authenticityToken';
authTokenInput.value = '${session.getAuthenticityToken()}';

var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput.value = 'anything';

var form = document.createElement('form');;
form.action = '@{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = quantityInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
form.submit();

alert('after submit()'); // for debugging only

Youngster

Shoot in the dark: set form to display:none and add it to an existing element in DOM and then submit it. I'd imagine that FF requires it to be in the DOM already. – Quiche

@Balus: or even better, delete it after submit? – Kooky

@JCOC: that's a non-concern for this specific issue :) Page will be refreshed anyway since OP doesn't use ajaxical stuff. – Quiche

Yeah, that would go instead of display:none – Kooky

@Balus - document.body.appendChild(form); worked. Thanks! If you want to put that as an answer, I'll accept it. – Youngster

@JCOC: I'd imagine that the reason of doing this in JS is just to hide the form from the enduser :) There may be some lag before the response returns. Hence the display:none. – Quiche

Answer 1

FF requires it to be in the DOM already. Set form to display:none and add it to an existing element in DOM and then submit it.

Quiche

Wouldn't this work too? document.body.appendChild(form); I'm honestly not too clear on distinct between "DOM" and "page" in this context. Has similar issue where it worked fine in Chrome and failed in IE and FireFox. – Winna

document is root node of DOM tree. – Quiche

Sorry for typos in last comment. Wanted to make clear that while document.createElement doesn't add it to the DOM (like I'd assumed) it can still be accomplished programmatically with appendChild. That is, it does not require the form be in the HTML markup when instantiated or anything like that. – Winna

Markup (retrieved HTML output) != DOM tree (client side model). – Quiche

Answer 2

Try This...

var idsInput = document.createElement('input');
idsInput.name = 'itemIds';
idsInput.value = ids;

var quantityInput = document.createElement('input');
quantityInput.name = 'quantity';
quantityInput.value = 1;

var authTokenInput = document.createElement('input');
authTokenInput.name = 'authenticityToken';
authTokenInput.value = '${session.getAuthenticityToken()}';

var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput.value = 'anything';

var form = document.createElement('form');
form.action = '@{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = quantityInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
document.body.appendChild(form);
form.submit();

Cheshire