Как надежно отправить 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>