Código de JavaScript - Confirmar el envió de un formulario mediante una ventana modal

Imágen de perfil

Confirmar el envió de un formulario mediante una ventana modalgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 14 de Noviembre del 2017 por xve
2.105 visualizaciones desde el 14 de Noviembre del 2017. Una media de 49 por semana
Este código muestra una simple manera de solicitar una confirmación a cualquiera de nuestros formularios antes de ser enviado.


mensaje-confirmacion-enviar-formulario1

mensaje-confirmacion-enviar-formulario2

Versión 1.0
estrellaestrellaestrellaestrellaestrella(6)

Actualizado el 29 de Noviembre del 2017 (Publicado el 14 de Noviembre del 2017)gráfica de visualizaciones de la versión: Versión 1.0
2.106 visualizaciones desde el 14 de Noviembre del 2017. Una media de 49 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<header>
	<meta charset="utf-8">
</header>
<body>
 
<h1>Rellena los datos del formulario</h1>
<form id="MiFormulario" action="pagina.php">
	<div>
		<label>Nombre</label><input type="text">
	</div>
	<div>
		<label>Apellidos</label><input type="text">
	</div>
	<div>
		<label>Correo</label><input type="text">
	</div>
	<br><input type="submit" class="button" value="Enviar datos">
</form>
 
<!-- Esta capa es la que se muestra transparente y que contiene el cuadro de dialogo -->
<div id="capa">
	<div>
		<div class="title">Confirma el envio del formulario</div>
		<div class="text">Estas seguro de enviar los valores introducidos en el formulario?</div>
		<div class="buttons">
			<input type="button" class="button" value="Enviar" id="ok">&nbsp;
			<input type="button" class="button" value="Cancelar" id="ko">
		</div>
	</div>
</div>
 
</body>
 
<script>
// devinimos los tres eventos del formulario
document.getElementById("MiFormulario").addEventListener("submit", submit);
document.getElementById("ok").addEventListener("click", enviar);
document.getElementById("ko").addEventListener("click", cancelar);
 
// Funcion que se ejecuta al pulsar el botón enviar el formulario
function submit(e) {
	// Cancelams el envio a la espera de que valide el formulario
	e.preventDefault();
 
	// Mostramos la capa con el formulario de validacion
	document.getElementById("capa").style.display="block";
}
 
// Funcion que se ejecuta al pulsar el boton Enviar de cuadro de dialogo
function enviar(e) {
	// Escondemos la capa
	document.getElementById("capa").style.display="none";
 
	// Enviamos el formulario
	document.forms["MiFormulario"].submit();
}
 
// Funcion que se ejecuta al pulsar el boton Cancelar de cuadro de dialogo
function cancelar(e) {
	// Simplemente escondemkos el formulario
	document.getElementById("capa").style.display="none";
}
</script>
 
<style>
body {
	text-align:center;
	font-family:Arial;
	font-size:10pt;
}
label {
	display:inline-block;
	width:100px;
	text-align:right;
	margin-right:10px;
}
form {
	display:inline-block;
	padding:10px;
	border:1px solid #e2e2e2;
}
 
#capa {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.5);
}
 
#capa>div:first-child {
	margin:0;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
 
	width:350px;
	border:1px solid #ebebeb;
	padding:5px;
	background:rgba(255, 255, 255, 1);
}
 
.title {
	background-color: #eee;
	padding: 5px;
	text-align: center;
	font-weight:bold;
}
.text {
	text-align:left;
	padding: 10px;
}
.buttons {
	text-align: right;
	border-top: 1px solid #eee;
	padding: 5px 10px;
}
 
.button {
	font-family:Arial;
	font-size:9pt;
}
</style>
 
</html>



Comentarios sobre la versión: Versión 1.0 (6)

Imágen de perfil
kip
14 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
Humberto
15 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
MYU BUENO NO SABIA QUE SE PUDIERAN ESOS EVENTOS
Responder
Imágen de perfil
ScriptShow
20 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
abzerox
29 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
miguel
29 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
Muy bueno, gracias por sus contribuciones
Responder
David
03 de Enero del 2018
estrellaestrellaestrellaestrellaestrella
me viene genial
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4304  
Revisar política de publicidad