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

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

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

<input type="submit" />

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

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

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

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

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

Это мой жирный

submitКнопка считается контроль.

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

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

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

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

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

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

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

Решение, которое отлично работает для меня, все еще отсутствует здесь. Это требует наличия визуально скрытого <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>элемент.

если вы можете использовать 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, нажав кнопку «Поддельная отправка». Надеюсь, поможет.

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

</form>

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

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

Аналогично другому решению здесь, с незначительными изменениями:

<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

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

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

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

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

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

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

Вот довольно солидное решение, которое включает в себя лучшие идеи, а также мое решение проблемы, выделенной Оффереином. Никакой 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. И вуаля. ( См. Эту скрипку ).

Это отлично работает! ;)

Это можно сделать с помощью 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>

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

Может быть, это может сработать, но я не знаю, является ли это действительным HTML.

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

<label for="submitButton">Submit</label>

У меня была проблема, когда я пытался скрыть форму от элемента ячейки таблицы, но все равно показывал кнопку отправки формы. Проблема заключалась в том, что элемент формы все еще занимал дополнительное пустое пространство, что делало формат моей ячейки таблицы странным. Отображение: нет и видимость: скрытые атрибуты не работали, потому что она также скрывала кнопку отправки, поскольку она содержалась внутри формы, которую я пытался скрыть. Простой ответ состоял в том, чтобы установить высоту форм практически без использования CSS

Так,

CSS -

    #formID {height:4px;}

работал на меня.

Я использовал этот способ, и он мне понравился, он проверяет форму перед отправкой и совместим с safari / google. нет JQuery NN

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
            <input type="button" value="Reset">
        </module-footer>