Cómo hacer submit a un form con javascript
Hola.
El hacer submit a un form usando javascript es muy utilizado en cualquier momento de un desarrollo. Esto es porque en ocasiones necesitamos personalizar los eventos que disparan un submit.
No siempre requerimos hacer submit únicamente con el botón de submit. Y sobre todo, no siempre tenemos o queremos usar librerías de Javascript como jQuery.
Ejemplos de cuando requerimos hacer submit con javascript: cuando queremos hacer submit después de hacer validaciones, cuando requerimos que más de un botón puedan hacer submit, cuando el submit depende de un evento externo, etc.
Aquí les dejo un ejemplo básico de HTML y Javascript para hacer submit que pueden personalizar fácilmente.
Les pongo cuatro maneras de hacerlo: La default que es únicamente usando un botón tipo submit dentro de la forma, usando botón normal con el nombre de la forma, usando botón normal con el id de la forma y con el código directo en el evento onClick del botón.
El submit y los tres botones hacen exactamente lo mismo. Los botones usan el evento onClick para llamar a las funciones Javascript definidas en el head del html.
Ya con el código de abajo podrán personalizarlo para realizar otras cosas como cambiar la acción de la forma, mostrar alertas, etc.
Lo que permite javascript es poder realizar eventos antes de ejecutar el submit. Observen como el campo tipo text llamado var1 se concatena por url a la dirección action del form.
Mi HTML con Javascript se ve así:
<!DOCTYPE HTML>
<html lang = "en-us">
<head>
<title></title>
<meta charset = "utf-8" />
<script type="text/javascript">
function submitconjavascriptporname(){
document.formnombre.submit();
}
function submitconjavascriptporid(){
document.getElementById("formid").submit();
}
</script>
</head>
<body>
<form name="formnombre" id="formid" action="http://www.google.com">
<input type="text" name="var1" value="value1" />
<input type="submit" value="Submit default" />
<input type="button" value="Submit con javascript por name" onclick="submitconjavascriptporname();" />
<input type="button" value="Submit con javascript por id" onclick="submitconjavascriptporid();" />
<input type="button" value="Submit con javascript por name onclick directo" onclick="javascript:document.formnombre.submit();" />
</form>
</body>
</html>
Esto lo abren con cualquier navegador y jala.
Espero les sirva.
No hay comentarios.:
Publicar un comentario