Cómo mostrar un cuadro de diálogo de confirmación (Aceptar/Cancelar) en JavaScript y página HTML. De forma que se solicite una confirmación al usuario y en función de si responde Aceptar o Cancelar se realice una acción u otra.
- Ejemplo de uso de JavaScript en HTML para mostrar diálogo de confirmación.
- Ejemplo de uso real en una aplicación para confirmación de eliminación de registro.
Ejemplo de uso de JavaScript en HTML para mostrar diálogo de confirmación
A continuación mostramos un ejemplo en HTML con JavaScript. Al cargar la página web index.html, se mostrará un enlace al usuario «Acceder a ProyectoA». Si el usuario pulsa sobre el enlace, le mostrará un mensaje de confirmación, si pulsa «Aceptar» se accederá a la web https://proyectoa.com. Si pulsa «Cancelar» no se realizará ninguna acción:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pruebas JavaScript - Cuadro de diálogo de confirmación</title> <script> //Cuadro de diálogo de confirmación en JavaScript function confirmarAccesoURL() { return confirm("¿Está seguro que desea acceder a la web ProyectoA?"); } </script> </head> <body> <p>Ejemplo de acceso a sitio web, previa confirmación:</p> <a href="https://www.proyectoa.com" onclick="return confirmarAccesoURL()"> Acceder a ProyectoA</a> </body> </html> |
La función JavaScript confirmarAccesoURL devolverá true si el usuario pulsa «Aceptar» y false si pulsa «Cancelar» o cierra el cuadro de diálogo.
Para probar el ejemplo, guardaremos el código HTML anterior en un fichero, por ejemplo con el nombre index.html, que colocaremos en el raíz de nuestro sitio web de pruebas. Accederemos a esta página web, por ejemplo con el navegador Google Chrome, y nos mostrará algo así:
Si pulsamos sobre «Acceder a ProyectoA» nos mostrará un cuadro de diálogo con las opciones «Aceptar» o «Cancelar». Si pulsamos «Aceptar»:
Nos abrirá el sitio web https://proyectoa.com:
En el navegador Opera nos mostrará el cuadro de diálogo de confirmación:
En Microsoft Edge nos mostrará:
En Mozilla Firefox nos mostrará:
Ejemplo de uso real en una aplicación para confirmación de eliminación de registro
A continuación mostramos un fragmento de código donde se usa esta función confirm de JavaScript, en HTML incrustado en código PHP, para solicitar confirmación a un usuario cuando pulsa en el enlace de eliminar un registro:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
//Cargamos los botones del XML $botones = obtenerXMLBotones(XML_MODULO, $modulo, $tabla); //Obtenemos el campo clave primaria de la tabla para usarlo como ID $campoClave = obtenerXMLCampoClave (XML_MODULO, $modulo, $tabla); $celda = array(); foreach ($botones as $boton) { $mostrar = false; $id = $boton["id"]; //Mostramos los botones según los permisos del usuario if ($mostrarBotonDetalle && $id == "id_detalle") { $mostrar = true; } else if ($mostrarBotonActualizar && $id == "id_actualizar") { $mostrar = true; } else if ($mostrarBotonEliminar && $id == "id_eliminar") { $mostrar = true; } if ($mostrar) { $alineacion = $boton["alineacion"]; $tipo = $boton["tipo"]; $clase = $boton["clase"]; $hint = $boton["hint"]; $label = $boton["label"]; $url = "href=\"$fichero_ac?" . generaURLSegura("$id", $registro["$campoClave"]) ."\""; if ($id == "id_eliminar") { $url = "href=\"$fichero_ac?" . generaURLSegura("$id", $registro["$campoClave"]) ."\"" . "\" onclick=\"return confirm('¿Está seguro que desea eliminar el registro?')\""; } $celda[] = array( "valor" => $registro["$campoClave"], "alineacion" => "$alineacion", "label" => "$label", "boton_tipo" => "$tipo", "boton_url" => "$url", "boton_clase" => "$clase", "id"=>"$id", "hint"=>"$hint"); } } celdaTablaBotones($celda); |
Vemos que es muy útil y sencillo implementar esta confirmación, únicamente con la línea:
|
1 2 |
$url = "href=\"$fichero_ac?" . generaURLSegura("$id", $registro["$campoClave"]) ."\"" . "\" onclick=\"return confirm('¿Está seguro que desea eliminar el registro?')\""; |
