tengo un nuevo problema.
De mi formulario ya conseguí que al momento de dar clic en el botón enviar, se marquen en rojo los campos que no han sido contestados, en otras palabras, ya se validan los placeholder
y los radiobutton/checkbox
.
Ahora tengo que hacer que después de haber llenado todos los campos y dar clic en el botón de "Enviar", tras validar todo, se envíen los datos pero que se muestre una ventana la cual tenga de mensaje "Envío de datos correcto" ¿Desea responder otro formulario? Y dos botones uno de "Cancelar" que cierre todo el formulario/pagina y otro de "Aceptar" que me permita volver a contestar el formulario desde 0, o sea, que no se queden datos guardados del anterior.
De momento nada se envía a la base de datos porque no existe, es solo para fines de funcionalidad, que se vea que funciona el formulario.
¿Como hago esto de la venta con JavaScript
?
Por su amable atención gracias.
Aquí mi código JavaScript
:
function salta()
{
var number = document.getElementById("selectFormularios").value; /* esta variable representa el obtener la referencia de la lista desplegable del option */
var e = document.getElementsByClassName("formulario"); /* esta variable permite seleccionar un elemento del documento por medio del valor del atributo id que se le ha asignado */
Array.prototype.forEach.call(e, function(el) { el.style.display = "none"; }); /* Esta parte oculta todo lo que hay en el Call, uno por uno y les pone display none */
switch (number)
{
case '2':
document.getElementById("Tabla3").style.display = "block";
break;
case '3':
document.getElementById("Tabla4").style.display = "block";
break;
case '4':
document.getElementById("Tabla5").style.display = "block";
break;
case '5':
document.getElementById("Tabla6").style.display = "block";
break;
case '6':
document.getElementById("Tabla7").style.display = "block";
break;
case '7':
document.getElementById("Tabla8").style.display = "block";
break;
case '8':
document.getElementById("Tabla9").style.display = "block";
break;
case '9':
document.getElementById("Tabla10").style.display = "block";
break;
case '10':
document.getElementById("Tabla11").style.display = "block";
break;
case '11':
document.getElementById("Tabla12").style.display = "block";
default:
Array.prototype.forEach.call(e, function(el) {
el.style.display = "none";
});
break;
}
}
function formulario()
{
var formulario = document.getElementsByName('formulario')[1],
elementos = formulario.elements,
boton = document.getElementById('btn');
var validarNombre = function(e){
if (formulario.nombre.value == 0){
alert("completa el campo");
e.preventDefault();
}
};
var validarRadio = function()
{
if (formulario.option[0].checked == true || formulario.option[1].checked == true || formulario.option[2].checked == true{
} else {
alert("Selecciona una opcion");
e.preventDefault();
}
var validar = function(e){
validarNombre(e)
validarRadio(e)
};
formulario.addEventListener("submit", validar);
}
}
Y aquí mi código HTML
:
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title> Formato para equipos moviles</title>
<!-- Meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Meta tags -->
<!--stylesheets-->
<link href="style.css" rel='stylesheet' type='text/css' media="all">
<!--//style sheet end here-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700" rel="stylesheet">
</head>
<body>
<!-- Este es el titulo del formulario --->
<h1 class="header-w3ls">
Formato de Inspección Pre-operativa<br>
para Equipos Móviles
</h1>
<!-- Fin del titulo del formulario --->
<!-- Seccion de la primer parte del formulario donde se llenan los campos solicitados -->
<div class="online-w3l-form">
<div class="main-headder">
</div>
<div class="appointment-w3">
<form name="formulario" action="" method="get">
<div class="main">
<div class="form-left-w3l">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Nombre de la instalación</p>
<input type="text" class="top-up" id="Nombre-Instalacion" name="Nombre" placeholder="" required />
</div>
<div class="form-right-w3ls">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Área</p>
<input type="text" class="top-up" id="Area" required name="Nombre" placeholder="">
<div class="clearfix"></div>
</div>
<div class="form-right-w3ls">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Fecha:
<input type="date" required name="Nombre">
</p>
</div>
</div>
<div class="main">
<div class="form-left-w3l">
<p>Nombre del Operador</p>
<input type="text" required name="Nombre" id="Nombre-Operador" placeholder="">
</div>
<div class="form-right-w3ls">
<p>Nombre del Supervisor o Responsable de Área</p>
<input type="text" required name="Nombre" id="Nombre-Supervisor" placeholder="">
<div class="clearfix"></div>
</div>
</div>
<div class="main">
<div class="form-right-w32">
<p>Marca y tipo del equipo</p>
<input type="text" class="top-up" id="Marca-Equipo" required name="Nombre" placeholder="">
<div class="clearfix"></div>
</div>
<div class="form-right-w33s">
<p>Lectura del contador-Horometro (si aplica)</p>
<input type="text" required name="Nombre" id="Lec1" placeholder="Inicio">
<input type="text" required name="Nombre" id="Lec2" placeholder="Fin">
</div>
</div>
<div class="main">
<div class="form-left-w3l">
<p>Número/código del equipo</p>
<input type="text" required name="Nombre" id="Codigo-Equipo" placeholder="">
</div>
<div class="form-right-w33s">
<p>Lectura de combustible (si aplica)</p>
<input type="text" required name="Nombre" id="Lec3" placeholder="Inicio">
<input type="text" required name="Nombre" id="Lec4" placeholder="Fin">
<div class="clearfix"></div>
</div>
</div>
<br>
<br>
<!-- Fin de la primer parte del formulario -->
<!-- Cinta verde de titulo del segundo formulario -->
<div class="caja3">
<p>II. VEHICULOS UTILITARIOS y DE TRANSPORTE DE PERSONAL</p>
</div>
<!-- Fin de cinta verde de titulo del segundo formulario -->
<!-- Segundo formulario--->
<table class="Datos2">
<thead>
<tr>
<th>
<h2 id="encabezado"><p>Inspeccion del equipo</p></h2>
</th>
<th width="40">
<h3 id="unico">CR</h3>
</th>
<th width="40">
<h2 id="encabezado">C</h2>
</th>
<th width="40">
<h2 id="encabezado">C/N</h2>
</th>
<th width="40">
<h2 id="encabezado">N/A</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Llanta de refacción (inflado / desgaste / deformaciones)</td>
<td width="80" align="center" width="25">3</td>
<td align="center">
<input type="radio" required name="check25" value="C">
<td align="center">
<input type="radio" required name="check25" value="C/N">
<td align="center">
<input type="radio" required name="check25" value="N/A">
</td>
</tr>
<tr>
<td>Herramientas - kit de emergencia (sin daños / completas)</td>
<td align="center" width="25">3</td>
<td align="center">
<input type="radio" required name="check26" value="C">
<td align="center">
<input type="radio" required name="check26" value="C/N">
<td align="center">
<input type="radio" required name="check26" value="N/A">
</td>
</tr>
<tr>
<td>Roll bar - pick up (colocada y sin deformación en su estructura)</td>
<td align="center" width="25">3</td>
<td align="center">
<input type="radio" required name="check27" value="C">
<td align="center">
<input type="radio" required name="check27" value="C/N">
<td align="center">
<input type="radio" required name="check27" value="N/A">
</td>
</tr>
<tr>
<td>Pértiga con banderín - pick up uso en cantera (colocada y sin deformaciones)</td>
<td align="center" width="25">3</td>
<td align="center">
<input type="radio" required name="check28" value="C">
<td align="center">
<input type="radio" required name="check28" value="C/N">
<td align="center">
<input type="radio" required name="check28" value="N/A">
</td>
</tr>
<tr>
<td>Otro: Especificar</td>
<td align="center" width="25">3</td>
<td align="center">
<input type="radio" required name="check29" value="C">
<td align="center">
<input type="radio" required name="check29" value="C/N">
<td align="center">
<input type="radio" required name="check29" value="N/A">
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<!-- Botón envio de formulario y validación de datos -->
<button id="submit" type="submit">Enviar</button>
<!-- Botón envio de formulario y validación de datos -->
</form>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<!-- Pie de pagina -->
<!-- Fin del pie de pagina -->
</div>
</body>
</html>