Отправьте форму, используя кнопку вне тега <form>

Question

Скажите, что у меня есть:

<form method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" />

Как мне отправить эту форму с помощью кнопки отправки вне формы, я думаю, что в HTML5 есть атрибут действия для отправки, но я не уверенесли это полностью кросс-браузер и если это не так, в любом случае это сделать?

Answer 1

В HTML5 есть атрибут формы .В основном

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />

Answer 2

Решение, которое отлично работает для меня, все еще отсутствует здесь.Это требует наличия визуально скрытого элемента <submit> или <input type="submit"> внутри <form> и связанного элемента <label> вне его.Это выглядело бы так:

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

Теперь эта ссылка позволяет вам «щелкнуть» по элементу формы <submit>, щелкнув по элементу <label>.

Answer 3

Обновление: В современных браузерах вы можете использовать атрибут form, чтобы сделать это .

---

Насколько мне известно, вы не можете сделать это без JavaScript.

Вот что говорит спецификация

Элементы, используемые для создания элементов управления, обычно появляютсявнутри элемента FORM, но могут также появляться за пределами объявления элемента FORM, когда они используются для создания пользовательских интерфейсов.Это обсуждается в разделе о внутренних событиях. Обратите внимание, что элементы управления вне формы не могут быть успешными элементами управления.

Это мой жирный знак

Кнопка submit считается элементом управления.

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

Из комментариев

У меня есть область настроек с несколькими вкладками с кнопкой, чтобы обновить все, из-за дизайна этой кнопкибудет вне формы.

Почему бы не поместить input внутри формы, а использовать CSS, чтобы расположить его в другом месте на странице?

Answer 4

если вы можете использовать jQuery, вы можете использовать это

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

Итак, суть заключается в том, чтобы создать кнопку типа «Отправить», поместить в форму кнопку реального отправки (конечно, скрывая ее) и отправить форму с помощью jquery, нажав кнопку «Поддельное подтверждение». Надеюсь, это поможет.

Answer 5

<form method="get" id="form1" action="something.php">

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

Это сработало для меня, чтобы иметь кнопку удаленной отправки формы.

Answer 6

Попробуйте это:

<input type="submit" onclick="document.forms[0].submit();" />

Хотя я бы предложил добавить id к форме и получить к нему доступ вместо document.forms[index].

Answer 7

Аналогично другому решению здесь, с незначительной модификацией:

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

Answer 8

Вы всегда можете использовать jQuery:

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

<script>
$(document).ready(function () {
  $("#myButton").click(function () {
    $("#myForm").submit();
  });
});
</script>

Answer 9

Вот довольно солидное решение, которое включает в себя лучшие идеи, а также мое решение проблемы, выделенной Оффереином. JavaScript не используется.

Если вам нужна обратная совместимость с IE (и даже Edge 13), вы не можете использовать атрибут form="your-form" .

Используйте стандартный ввод для отправки без отображения и добавьте метку для него вне формы:

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

Обратите внимание на использование display: none;. Это намеренно. Использование класса начальной загрузки .hidden конфликтует с jQuery .show() и .hide(), и с тех пор в Bootstrap 4 устарело.

Теперь просто добавьте метку для отправки (в стиле начальной загрузки):

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

В отличие от других решений, я также использую tabindex - установлен в 0 - это означает, что мы теперь совместимы с вкладками клавиатуры. Добавление атрибута role="button" дает ему стиль CSS cursor: pointer. И вуаля. ( См. Эту скрипку ).

Answer 10

Это прекрасно работает!;)

Это можно сделать с помощью Ajax и с помощью вызова: «элемент зеркала формы».Вместо того, чтобы отправить форму с внешним элементом, вы можете создать поддельную форму.Предыдущая форма не нужна.

<!-- This will do the trick -->
<div >
    <input id="mirror_element" type="text" name="your_input_name">
    <input type="button" value="Send Form">
</div>

Код Ajax будет выглядеть так:

    <script>
        ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");

        function ajax_form_mirror(form, file, element, method) {
            $(document).ready(function() {
                // Ajax
                $(form).change(function() { // catch the forms submit event
                    $.ajax({                // create an AJAX call...
                        data: $(this).serialize(),      // get the form data
                        type: method,                   // GET or POST
                        url: file,                      // the file to call
                        success: function (response) {   // on success..
                        $(element).html(response);  // update the DIV
                        }
                    });

                    return false; // cancel original event to prevent form submitting
                });
            });
        }
   </script>

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

Может быть, этот код может оптимизировать и исправить в зависимости от цели.Работает отлично !!;) Также работает, если вы хотите выбрать опцию, например, такую:

<div>
    <select id="mirror_element" name="your_input_name">
        <option id="1" value="1">A</option>
        <option id="2" value="2">B</option>
        <option id="3" value="3">C</option>
        <option id="4" value="4">D</option>
    </select>
</div>

Я надеюсь, что кто-то вроде помог мне.;)