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