Как надежно отправить HTML-форму с помощью JavaScript?
Есть ли способ отправить HTML-форму с помощью JavaScript, который гарантированно будет работать во всех ситуациях?
Я уточняю. Общим подходом является:
formElement.submit()
Это все хорошо и хорошо, за исключением одного. Поля формы доступны как атрибуты formElement, поэтому, если есть поле с именем или id "text1", к нему можно получить доступ как formElement.text1.
Это означает, что если элементы называются "submit" (будь то его имя или его id), то formElement.submit() не будет работать. Это связано с тем, что formElement.submit не будет методом формы, а поле с этим именем. К сожалению, довольно распространено, что кнопки отправки имеют "отправить" имя или идентификатор.
Два примера, чтобы проиллюстрировать мою мысль. Во-первых, следующее НЕ будет работать, потому что элемент формы имеет имя "submit" :
<form name="example" id="example" action="/">
<button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
При этом будет работать следующее. Единственное различие заключается в том, что я удалил имя "submit" из формы:
<form name="example" id="example" action="/">
<button type="button" onclick="document.example.submit(); return false;">Submit</button>
</form>
Итак, есть ли другой способ отправить HTML-форму с помощью JavaScript?
Ответы
Ответ 1
Создайте другую форму в JavaScript и примените ее метод submit() в исходной форме:
<html>
<script>
function hack() {
var form = document.createElement("form");
var myForm = document.example;
form.submit.apply(myForm);
}
</script>
<form name="example" id="example" method="get" action="">
<input type="hidden" value="43" name="hid">
<button
type="button"
name="submit"
onclick="hack();return false;"
>Submit</button>
</form>
</html>
form.submit - ссылка на новый и чистый метод отправки, а затем вы используете apply(myForm) для его выполнения с исходной формой.
Ответ 2
Итак, есть ли другой способ отправить HTML-форму с помощью JavaScript?
Обновить. Возьмите совет Джерома (в другом месте этой темы). Я оставлю этот ответ на исторический интерес, но это не так хорошо или надежно, как решение Джерома.
Следующий подход является уродливым, но работает.
var x = document.forms.example;
var f = document.createElement('form');
f.action = x.action;
f.method = x.method;
f.enctype = x.enctype;
for (var i = 0; i < x.elements.length; i++) {
var el = x.elements[i];
if (el.name !== "submit") {
f.appendChild(el);
}
}
x.parentNode.replaceChild(f,x);
f.submit();
Ответ 3
В Firefox
formElement.constructor
возвращает "HTMLFormElement". Таким образом, вы можете отправить форму, используя:
HTMLFormElement.prototype.submit.call(formElement)
Вы также можете распространить это на другие браузеры:
formElement.constructor.prototype.submit.call(formElement)
Ответ 4
Лучшая идея - не называть кнопку отправки submit, но вы можете обойти ее -
function reallysubmitform(n){
n= n || 0;
var f= document.forms[n];
f.onsubmit= function(){
return true
};
var sub= f.elements['submit'];
if(sub && sub.type== 'submit') sub.click();
else f.submit();
}
reallysubmitform()
Ответ 5
Передача формы с использованием JavaScript не может быть безопасным дизайном.
Ваши пользователи могут просматривать ваш веб-сайт на своем телефоне, отключить JavaScript, изменить источник своей страницы или использовать Lynx.
В любом случае для целей доступности вам понадобится старая кнопка отправки HTML и некоторые проверки ввода на стороне сервера.
Ответ 6
Для формы с именем submit, вызывающей его кнопки, функция click для меня работает.
document.forms[0].submit.click(); //where submit here is just the name of the button/input tied to the form.
Ответ 7
Просто используйте onsubmit...
<form name="example" id="example" action="/" onsubmit="document.example.submit();">
<button type="submit" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
