¿Enviar un formulario HTML sin tener un botón de envío?

3 minutos de lectura

Avatar de usuario de Frantisek
Frantisek

¿Puedo enviar un html? <form> con <div> en vez de <input type="submit"> ?

Como esto:

<form method="post" action="" id="myForm">
  <textarea name="reply">text</textarea>
</form>

<div>Submit the form by clicking this</div>

avatar de usuario de japrescott
japrescott

El método que puede utilizar para enviar un formulario específico es el siguiente:

// Grab the form element and manually trigger the 'submit' method on it:
document.getElementById("myForm").submit();

Entonces, en su ejemplo, puede agregar un controlador de eventos de clic en cualquier elemento que desee y activar el método de envío del formulario a través de eso:

<form method="post" id="myForm">
  <textarea name="reply">text</textarea>
</form>

<div class="submit">Submit the form by clicking this</div>
const myForm = document.getElementById("myForm");
document.querySelector(".submit").addEventListener("click", function(){

  myForm.submit();

});

Y si quieres hacerlo al estilo jQuery (que No lo recomiendo para una tarea tan simple.);

$("#myForm").submit();

En su forma completa:

const myForm = $("#myForm");
$(".submit").click(function(){

  myForm.submit();

});

Referencias:

  • los enviar() método de elementos de formulario HTML (nativo JavaScript API)
  • los jQuery enviar() API

  • ¿Por qué todos hoy en día usan jquery para las tareas más simples? jQuery agregará como 500 instrucciones de CPU además de esta solución. Si puedes hacer algo sencillo, ¿por qué no simplemente hacerlo?

    – japrescott

    9 oct 2011 a las 16:55

  • @japrescott El submit método en jQuery no es muy caro. Básicamente solo llama a la función nativa de Javascript. No estoy seguro de por qué está tan convencido de no usar jQuery en este caso.

    – Peter Olsen

    9 oct 2011 a las 16:59


  • @japrescott, ¡porque el OP etiquetó su pregunta con jQuery!

    – chispeante

    9 oct 2011 a las 17:07

  • Diría que la forma jQuery es un poco más limpia, pero NO más simple. Ambos son de una sola línea. jQuery sería excesivo para esta tarea. 🙂

    – b01

    16/04/2013 a las 21:55


  • La discusión tonta de JQuery v JS es irrelevante si la pregunta solicita jquery. Y la gente que hace todo tipo de afirmaciones sobre JS mejor esto y aquello está siendo completamente fanática. A la larga, es lo que el cliente obtiene, NO cómo se hace. He visto que se publica un código absolutamente basura en los mejores juegos AAA, y se tira un código optimizado increíble. Olvídese de la gente de evangelismo de umbral – sus resultados y soluciones que cuentan. No es lo que más te gusta de tu mascota esta semana.

    – David Lanan

    15 de diciembre de 2018 a las 6:27

Sí, es bastante simple. solo usa el submit[jQuery docs] método dentro de un click función de manejador.

$("#myDiv").click(function() {
 $("#myForm").submit();
});

Si lo prefieres, puedes hacerlo con Vanilla Javascript:

document.getElementById("myDiv").onclick = function() {
  document.getElementById("myForm").submit();
};

Enlace el evento de clic div.

$("div").click(function(){ $("form#myForm").submit(); });

$('#myDiv').click(function() {  
    $('#myForm').submit();
});

Usando jquery:

$('#myForm').submit();

Avatar de usuario de Quentin
Quentin

Si desea depender innecesariamente de JavaScript, entonces podría…

jQuery('div').click(function () { jQuery('form').submit(); });

… sin embargo, debe usar HTML semántico que funcione sin la presencia de JS. Así que usa un botón de envío real y aplica CSS para que se vea como quieres.

avatar de usuario de vzwick
vzwick

Para una mejor semántica y una degradación elegante, le sugiero que haga esto:

$(document).ready(function(){
    $('form input[type="submit"]').replaceWith('<div class="submit">Submit the form by clicking this</div>'); // replace submit button with div

    $('.submit').live('click', function() {  
        $(this).closest('form').submit();
    });
});

De esta manera, su formulario seguirá siendo utilizable para clientes sin JS.

Dicho esto: simplemente diseñe su entrada para que se vea como quiere con CSS;)

  • Complemento jquery bastante simple: jsfiddle.net/yckart/3b4yzj8h Podríamos optimizarlo iterando sobre cada entrada de envío, para reemplazar cada uno con un individuo.

    – yckart

    28 de marzo de 2015 a las 1:32


¿Ha sido útil esta solución?