Envíe el formulario usando un botón fuera de la etiqueta <form>

Digamos que tengo:

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

<input type="submit" />

¿Cómo hago para enviar ese formulario con ese botón de envío fuera del formulario? Creo que en HTML5 hay un atributo de acción para el envío, pero no estoy seguro de si eso es completamente entre navegadores y si no está ahí para ¿hacer esto?

Actualización: en los navegadores modernos puede usar el formatributo para hacer esto .

Que yo sepa, no puedes hacer esto sin javascript.

Esto es lo que dice la especificación

Los elementos utilizados para crear controles generalmente aparecen dentro de un elemento FORM, pero también pueden aparecer fuera de una declaración de elemento FORM cuando se utilizan para crear interfaces de usuario. Esto se discute en la sección sobre eventos intrínsecos. Tenga en cuenta que los controles fuera de un formulario no pueden ser controles exitosos.

Esa es mi atrevida

Un submitbotón se considera un control.

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

De los comentarios

Tengo un área de configuración de múltiples pestañas con un botón para actualizar todo, debido al diseño del mismo, el botón estaría fuera del formulario.

¿Por qué no colocar el inputinterior del formulario, pero usar CSS para colocarlo en otra parte de la página?

En HTML5, existe el atributo de formulario . Básicamente

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

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

Una solución que funciona muy bien para mí, todavía falta aquí. Requiere tener un elemento visualmente oculto <submit>o <input type="submit">dentro del elemento <form>y un <label>elemento asociado fuera de él. Se vería así:

<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>

Ahora este enlace le permite 'hacer clic' en el <submit>elemento del formulario haciendo clic en el <label>elemento.

si puedes usar jQuery puedes usar esto

<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>

Por lo tanto, la conclusión es crear un botón como Enviar y colocar el botón de envío real en el formulario (por supuesto, ocultarlo) y enviar el formulario mediante jquery haciendo clic en el botón 'Enviar falso'. Espero eso ayude.

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

</form>

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

Esto funcionó para mí, tener un botón de envío remoto para un formulario.

Similar a otra solución aquí, con modificaciones menores:

<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

Prueba esto:

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

Aunque sugeriría agregar un idal formulario y acceder por eso en lugar de document.forms[index].

Siempre puedes usar jQuery:

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

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

Aquí hay una solución bastante sólida que incorpora las mejores ideas hasta ahora, así como también incluye mi solución a un problema destacado con Offerein. No se usa javascript.

Si le importa la compatibilidad con IE (e incluso Edge 13), no puede usar el form="your-form" atributo .

Use una entrada de envío estándar con display none y agregue una etiqueta fuera del formulario:

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

Tenga en cuenta el uso de display: none;. Esto es intencional El uso de la .hiddenclase bootstrap entra en conflicto con el de jQuery .show()y .hide(), y desde entonces ha quedado en desuso en Bootstrap 4.

Ahora simplemente agregue una etiqueta para su envío, (diseñado para bootstrap):

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

A diferencia de otras soluciones, también estoy usando tabindex , establecido en 0, lo que significa que ahora somos compatibles con la tabulación del teclado. Agregar el role="button"atributo le da el estilo CSS cursor: pointer. Et voila. ( Ver este violín ).

¡Esto funciona perfectamente! ;)

Esto se puede hacer usando Ajax y con lo que yo llamo: "un elemento espejo de forma". En lugar de enviar un formulario con un elemento externo, puede crear un formulario falso. El formulario anterior no es necesario.

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

El código ajax sería como:

    <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>

Esto es muy útil si desea enviar algunos datos dentro de otro formulario sin enviar el formulario principal.

Este código probablemente se puede adaptar / optimizar según la necesidad. ¡Funciona perfectamente! ;) También funciona si desea un cuadro de opción de selección como este:

<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>

Espero que haya ayudado a alguien así me ayudó. ;)

Quizás esto podría funcionar, pero no sé si es HTML válido.

<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>

Tuve un problema en el que intentaba ocultar el formulario de un elemento de celda de tabla, pero aún mostraba el botón de envío de formularios. El problema era que el elemento de formulario todavía ocupaba un espacio en blanco adicional, haciendo que el formato de la celda de mi tabla se viera extraño. La pantalla: ninguno y visibilidad: los atributos ocultos no funcionaron porque también ocultaría el botón de envío, ya que estaba contenido en el formulario que estaba tratando de ocultar. La respuesta simple fue establecer la altura de los formularios en casi nada usando CSS

Entonces,

CSS -

    #formID {height:4px;}

trabajó para mi.

Lo utilicé de esta manera, y me gustó, valida el formulario antes de enviarlo y también es compatible con safari / google. no 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>