En este artículo, veremos cómo enviar el formulario sin hacer clic en el botón Enviar, además de comprender las diferentes formas de realizar esta tarea a través de la implementación.
El formulario se puede enviar sin utilizar el botón Enviar mediante la implementación de un atributo de evento específico o haciendo clic en el enlace. Esta tarea se puede realizar usando el atributo de evento OnClick o usando el método form.submit() en Javascript.
Enfoque: el método form.submit() en JavaScript se puede utilizar para enviar un formulario determinado. Es similar a activar el <botón> de envío del formulario, pero no idéntico. Agregaremos un detector de eventos » onclick » al elemento en el que, después de hacer clic en ese elemento, se enviará el formulario. Usando el método getElementById , los elementos requeridos pueden orientarse y una vez que se hace clic en el elemento, se activa la función «enviar» y se envía el formulario. Los elementos HTML utilizados para enviar el formulario pueden ser una etiqueta de encabezado, una etiqueta de párrafo, una etiqueta de imagen y muchos más. HTMLFormElement.requestSubmit() también es un método alternativo para enviar el formulario que solicita enviar el formulario mediante un botón de envío específico.
Ejemplo 1: Este ejemplo ilustra cómo enviar el formulario sin un botón de envío y almacenar los datos en una base de datos usando phpMyAdmin.
Nota: <input> con atributo type=”submit” no se enviará con el formulario al usar este método.
index.php
<!DOCTYPE html> <html> <head> <title>Form Submittion without using submit Button</title> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <h3> Form Submittion without using submit Button </h3> <form id="form" action="form.php" method="post"> <label> Subscribe the GBlog to get daily update!!! </label> <br><br> <input type="text" name="text" placeholder="Enter Mail ID" /> <br/> <h5 onclick="submit()"> Click Me to Subscribe! </h5> </form> <script> function submit() { let form = document.getElementById("form"); form.submit(); alert("Data stored in database!"); } </script> </body> </html>
form.php: Este código nos ayudará a conectar PHP con la base de datos y almacenar los datos enviados por el usuario.
form.php
<?php $conn = mysqli_connect('localhost','root','','info'); if($conn){ echo "Success"; } else{ echo "Failure"; } $text = $_POST['text']; $sql = "INSERT INTO info(info) VALUES ('$text')"; mysqli_query($conn,$sql); ?>
Explicación: Aquí, necesitamos agregar los datos completados en el formulario a la base de datos sin usar el botón de enviar. Para esto, necesitamos activar la función de envío() usando el elemento HTML. Usando el método getElementById() , hemos apuntado al formulario requerido para ser enviado. Tan pronto como se hace clic en HTML, se ejecuta enviar() y los datos se almacenan en la base de datos. En el ejemplo anterior, hemos utilizado la etiqueta <h5> para activar la función de envío.
Producción:
El texto escrito se almacenará en la base de datos después de hacer clic en el elemento HTML como se muestra en el gif.
Ejemplo 2: Este ejemplo describe cómo usar una imagen para enviar el formulario. Aquí, hemos usado la etiqueta <img> para activar la función de envío(). Aquí, usaremos el archivo form.php para almacenar los datos enviados por el usuario.
index.php
<html> <head> <title>Submit a form using image</title> </head> <body> <form id="form" action="form.php" method="post"> <input type='text' name='text' /> <a href="javascript: submit()"> <img src="gfg.jpg" width="35" height="30" /> </a> </form> <script> function submit(){ form.submit(); alert("Data stored in database!"); } </script> </body> </html>
Explicación: En los dos ejemplos anteriores, tan pronto como se hace clic en el elemento HTML, el evento ‘ onclick ‘ se activa al seleccionar el elemento mediante el método getElementById() . Luego, se ejecuta la función form.submit () para enviar el formulario.
Producción:
Publicación traducida automáticamente
Artículo escrito por priddheshinternship y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA