¿Cómo tomar el evento onSubmit para un formulario?

Quiero saber cómo obtener el evento onsubmit de un formulario para hacer alguna validación de formulario, porque no tengo acceso a él directamente. (Estoy escribiendo un plugin de Wordpress para comentarios, así que no tengo acceso directo a la etiqueta del formulario o al botón de enviar.)¿Cómo tomar el evento onSubmit para un formulario?

Me frustré tanto tratando de hacer esto para mi complemento que he escrito una versión de Hello World abajo. Quiero que muestre la alerta "Hola mundo" cuando cargue la página y la alerta "formulario enviado" cuando hago clic en el botón Enviar. En cambio, muestra ambas ventanas emergentes cuando se carga la página.

Aquí está mi código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html> 
    <head> 
    <title>Hello World</title> 
    </head> 
    <body> 
    <h2>Test</h2> 
    <form action="#" method="post" id="commentform"> 

    <p><input type="text" name="author" id="author" size="22" tabindex="1" /> 
    <label for="author"><small>Name (required)</small></label></p> 

    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> 

    </form> 

    <script type="text/JavaScript"> 
    <!-- 
    alert("Hello world"); 

    var formCheck = document.getElementById("commentform"); 

    formCheck.onSubmit = doMapping(); 

    function doMapping() { 
     alert("form submitted"); 
     return false; 
    } 

    --> 
    </script>  

    </body> 
    </html>

Fuente

2009-04-02 Anonymous

cambiar esta situación:

formCheck.onSubmit = doMapping()

a esto:

formCheck.onSubmit = doMapping

Cuando se agrega entre paréntesis al final de una función que ejecuta esa función . Cuando asigna una función (o la pasa como un parámetro a otra función) necesita omitir el paréntesis, ya que esa es la manera de recuperar un puntero de función en JavaScript.

Editar: También tendrá que mover la declaración de la función doMapping por encima de la asignación de esa función al evento onsubmit así (bueno tvanfosson captura!):

function doMapping() { 
     alert("form submitted"); 
     return false; 
    } 

formCheck.onSubmit = doMapping();

Sin embargo si la función doMapping no se utiliza en otro lugar, puede declarar la función doMapping como una función anónima como esta:

formCheck.onSubmit = function() { 
     alert("form submitted"); 
     return false; 
    }

que me parece un poco más limpio.

Fuente

2009-04-02 15:51:19

Creo que también tendrá que cambiar el orden ya que es necesario definir doMapping antes de asignarlo como el controlador onSubmit. – tvanfosson

Gracias - Edité mi respuesta para abordar su punto. –

Uso de jQuery.

$(document).ready(function() { 
    $('#commentform').submit(function() { 
     alert('form submitted'); 
     return false; 
    }); 
});

Fuente

2009-04-02 15:54:31 tvanfosson

¡Gracias! En realidad, lo resolví de otra manera, utilizando tanto la sugerencia de Andrew como el evento window.onload. Creo que el problema se debió en parte a que el elemento no se había cargado realmente.

window.onload = function(){ 
    if (document.getElementById("commentform")){ 
     document.getElementById("commentform").onsubmit = doMapping; 
    } 
} 

function doMapping(){ 
      alert("form submitted"); 
      return false; 
}

Fuente

2009-04-02 16:07:44

Nota: se pensó que el evento de carga se desencadena después de que se haya cargado toda la página. Entonces, si hay una imagen que tarda mucho en cargarse, generalmente algo así como Google Analytics, su controlador de eventos no se asignará antes de que el usuario acceda a enviar. – Rashack

La respuesta de jQuery maneja eso ... – Rashack

¿Cómo tomar el evento onSubmit para un formulario?

Respuesta

Cuestiones relacionadas