9

Tengo un formulario muy parecido al que les pongo a continuación. Este es solo un demo pero ilustra la duda que tengo.

<!DOCTYPE>
<html>
<head>
    <title>Formulario</title>
</head>

<body>
    <form id="CreateForm" action="/create" method="post">
        <div>
            <label for="campo1">Campo1</label>
            <input type="text" id="campo1" name="campo1">
        </div>
        <div>
            <label for="campo2">Campo2</label>
            <input type="text" id="campo2" name="campo2">
       </div>
    </form>

    <button type="submit">
        Enviar
    </button>
 </body>

</html>

¿Como puedo hacer para que cuando haga click en el botón se envíe el formulario sin usar javascript?

3 respuestas 3

21

En HTML5 fue introducido un nuevo mecanismo para poder separar los elementos de formulario (buttons, inputs, etc) del formulario. El atributo form asocia un control con un <form>:

<form id="CreateForm" action="/create" method="post">
    <input type="text" name="foo" />
</form>

<button type="submit" form="CreateForm">Enviar</button>

Solo es necesario asignar el mismo id del formulario en el atributo form del elemento.

3
  • 4
    Según esto, no está disponible en IE ni Edge: caniuse.com/#feat=form-attribute
    – Darkhogg
    Commented el 25 dic. 2015 a las 0:12
  • @Darkhogg eso es cierto pero esa solución es lo suficientemente buena. El caso que me ocupa es, cuando usas angular, las directivas form se construyen usando las mismas reglas que los formularios en html y esta solución funciona de maravilla, por ejemplo, para poner reglas de validación en elementos que por restricciónes de las directivas o de estilo deban ser puestos en lugares diferentes pero que pertenecen al mismo formulario.
    – devconcept
    Commented el 25 dic. 2015 a las 16:32
  • ya es oportado por todos los navegadores Commented el 28 oct. a las 11:29
1

Otra solución seria esta:

    <form name="myform" action="#">
    Search: <input type='text' name='query' />
    <a href="javascript: submitform()">Search</a>
    </form>
    <script type="text/javascript">
    function submitform()
    {
      document.myform.submit();
    }
    </script>

Fuente

1
  • 1
    tu respuesta funciona pero en la pregunta se especifica que no se debe usar javascript de lo contrario sería algo así como un tutorial basico de como usar el javascript.
    – devconcept
    Commented el 4 ene. 2016 a las 17:17
1

Otra opción usando jQuery

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.