En este post te mostraré cómo tener un formulario en PHP con dos botones de tipo submit y cómo saber cuál botón de los dos fue presionado para enviar el formulario.
A partir del botón presionado en el formulario de dos botones podemos hacer diferentes acciones, sin tener que usar JavaScript ni otras técnicas.
El truco está en ponerle el mismo atributo name
a cada input
de tipo submit
, y después verificar su valor accediendo a $_POST
en el lado del servidor con PHP.
Veamos el formulario de PHP que tendrá dos botones. Podemos tener, aparte de los dos botones, más campos.
En el ejemplo pongo un campo para solicitar el nombre:
<html>
<head>
<title>Formulario con múltiples botones</title>
</head>
<body>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br><br>
<form method="post" action="procesar.php">
<input type="text" name="nombre" placeholder="Tu nombre">
<br><br>
<button type="submit" name="boton" value="a">Opción A</button>
<button type="submit" name="boton" value="b">Opción B</button>
</form>
</body>
</html>
Ahora fíjate en que tengo dos botones de tipo submit
(para que envíen el formulario) pero en value
uno tiene a y otro tiene b.
La “etiqueta” puede ser distinta y puede llevar espacios.
El formulario va a ser procesado en el archivo llamado procesar.php que tiene lo siguiente; y ahí es en dónde sabremos cuál botón fue presionado:
<?php
$nombre = $_POST["nombre"];
$boton = $_POST["boton"];
# $boton podría ser "a" o "b"
echo "Hola $nombre el botón es $boton";
?>
El valor del botón puede ser a o b, y dependerá del botón que hayan presionado para enviar el formulario.
Puedes hacer un if
o un switch
para comparar el valor, y realizar las acciones dependiendo de ello.
Con este enfoque puedes tener más botones, uno con un valor distinto, y saber cuál fue presionado con este pequeño truco.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.