Firefox не отправит форму, созданную с помощью JavaScript

Мне нужно создать форму с несколькими входами, когда происходит событие. Мой код ниже.

Chrome отправляет нормально — отображается окно предупреждения, и страница меняется.

Firefox не работает - отображается окно с предупреждением, но страница остается прежней. Как заставить Firefox отправить форму?

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

person Amy B    schedule 06.03.2011    source источник
comment
Стреляйте в темноте: установите форму на display:none и добавьте ее к существующему элементу в DOM, а затем отправьте ее. Я полагаю, что FF требует, чтобы он уже был в DOM.   -  person BalusC    schedule 06.03.2011
comment
@Balus: или, что еще лучше, удалить его после отправки?   -  person JCOC611    schedule 06.03.2011
comment
@JCOC: это не касается этой конкретной проблемы :) Страница в любом случае будет обновлена, поскольку OP не использует ajaxal.   -  person BalusC    schedule 06.03.2011
comment
Да, это пойдет вместо display:none   -  person JCOC611    schedule 06.03.2011
comment
@Balus - document.body.appendChild(form); сработало. Спасибо! Если вы хотите поставить это как ответ, я приму это.   -  person Amy B    schedule 06.03.2011
comment
@JCOC: Я полагаю, что причина этого в JS - просто скрыть форму от конечного пользователя :) Перед возвратом ответа может быть некоторая задержка. Следовательно, display:none.   -  person BalusC    schedule 06.03.2011


Ответы (2)


FF требует, чтобы он уже был в DOM. Установите для формы значение display:none и добавьте его к существующему элементу в DOM, а затем отправьте его.

person BalusC    schedule 06.03.2011
comment
Это тоже не сработает? document.body.appendChild(form); Честно говоря, я не очень понимаю разницу между DOM и страницей в этом контексте. Имеет аналогичную проблему, когда он отлично работал в Chrome и не работал в IE и FireFox. - person ficuscr; 19.08.2015
comment
document — корневой узел дерева DOM. - person BalusC; 19.08.2015
comment
Извините за опечатки в последнем комментарии. Хотел прояснить, что, хотя document.createElement не добавляет его в DOM (как я предполагал), его все же можно выполнить программно с помощью appendChild. То есть не требуется, чтобы форма была в разметке HTML при создании экземпляра или что-то в этом роде. - person ficuscr; 20.08.2015
comment
Разметка (полученный вывод HTML) != Дерево DOM (модель на стороне клиента). - person BalusC; 20.08.2015

Попробуй это...

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

var amountInput = document.createElement('input');
quantityInput.name = 'количество';
quantityInput.value = 1;

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

var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput .value = 'что угодно';

var form = document.createElement('form');
form.action = '@{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput ;
form.elements[1] = количествоInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
document.body.appendChild(form );
form.submit();

person rjvilla    schedule 15.05.2013