Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Div no aparezca mientras el required este true

JavaScript - Div no aparezca mientras el required este true

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Eduardo Arroyo Teherán
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Div no aparezca mientras el required este true

Publicado por Eduardo Arroyo Teherán (186 intervenciones) el 13/11/2020 14:57:55
Tengo en un formulario un DIV oculto al lado del botón (sumbit)

1
2
3
<div id="alerta">
    <p><b> <img src="http://taqro.com.mx/factura/Imgs/envixando.gif" width="32" height="32" /><span class="fg"> Enviando, por favor espere...</span></b></p>
</div>

dicho div al iniciar la web esta oculto y solo se activa (aparece) cuando el botón (submit) es presionado.. Para indicar a los usuarios que se esta enviando la info que esperen....

1
<input name="botons" type="submit" class="boton" id="button" onclick="mostrar()" value="Enviar" />


el botón al ser presionado activa la función mostrar(); la cual hace que el div oculto aparezca y su contenido (gif del loader y texto Cargando...)

esta es la función JavaScript para eso

1
2
3
4
5
6
7
8
9
10
11
<script>
window.addEventListener("load",mostrar);
function mostrar() {
  var x = document.getElementById('alerta');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
</script>

si notan los campos del formulario tienen la opción required="required" para que los campos sean obligatorios

pero me gustaría que si algún campo obligatorio falte por estar diligenciado (este activa la opción required) no salga el div en mención..


acá dejo todo el código que uso.. para que ensayen usándolo (oprimiendo el botón Enviar) y ver que sale el alert del campo vacío y aun así sale el div

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
<html>
<head>
<meta charset="utf-8" />
<title>Formulario</title>
<script>
window.addEventListener("load",mostrar);
function mostrar() {
  var x = document.getElementById('alerta');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
</script>
<!------------------------------------------------------------------------------>
<style type="text/css">
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
<!---------------------------------------
</style>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
	position: absolute;
	left: 134px;
	top: 9px;
	width: 848px;
	height: 87px;
	z-index: 1;
}
.fg {	color: #F00;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="procesapedido.php">
  <table width="978" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="978" height="15" bgcolor="#FFFFFF" style="text-align:right" >Bienvenido <?php echo $_SESSION['nombre'] ?> - Municipio de <?php echo $_SESSION['municipio'] ?></td>
    </tr>
    <tr>
      <td height="215" bgcolor="#FFA466"><table width="961" border="0" align="center" cellpadding="2" cellspacing="2">
        <tr>
          <td width="65">&nbsp;</td>
          <td width="15">&nbsp;</td>
        </tr>
        <tr>
          <td height="26" colspan="2"><center>
            REALIZAR PEDIDOS DE ELEMENTOS DE OFICINA CODIGO PEDIDO NUMERO <?php echo $codigo ?><br />
          </center></td>
          </tr>
        <tr>
          <td height="6" colspan="2"><hr /></td>
        </tr>
        <tr>
          <td colspan="2"><table width="825" border="0" align="center" cellpadding="2" cellspacing="2">
            <tr>
              <td width="811" height="24" colspan="2" bgcolor="#FFA466"><div class="field_wrapper">
                <div>
                &nbsp;&nbsp;&nbsp;
                <label>Elemento: </label>
                <select name="elemento[]" required="required" class="campos" id="elemento" onChange="pagoOnChange(this)">
                  <option value="">Seleccione:</option>
                  <?php $query = $mysqli -> query ("SELECT * FROM elementos WHERE estado='activo' AND tipo='oficina' ORDER BY elemento ASC");
                  while ($valores = mysqli_fetch_array($query)) { echo '<option value="'.$valores[elemento].'">'.$valores[elemento].'</option>'; }?>
                  </select>
                <label>Cantidad:</label><input name="cantidad[]" type="number" id="cantidad" required size="1" min="1" max="1000" />
                <label>Especificaciones: </label><input name="especificacion[]" type="text" id="especificacion" size="24" /></td>
            </tr>
            </table></td>
          </tr>
        <tr>
          <td colspan="2"><hr /></td>
        </tr>
        <tr>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td colspan="4">&nbsp;&nbsp;&nbsp;
            <table width="951" border="0">
              <tr>
                <td width="84"><input name="botons" type="submit" class="boton" id="button" onClick="mostrar()" value="Enviar" /></td>
                <td width="839"><div id="alerta">
                  <p><b> <img src="http://taqro.com.mx/factura/Imgs/envixando.gif" width="32" height="32" /><span class="fg"> Enviando, por favor espere...</span></b></p>
                </div></td>
                <td width="14">&nbsp;</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td height="26" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  </table>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Div no aparezca mientras el required este true

Publicado por Alejandro (540 intervenciones) el 26/11/2020 22:09:38
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Te dejo un ejemplo.
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
<form id="myForm">
	Requerido: <input type="text" required /><br />
	Opcional: <input type="text" /><br />
	Requerido: <input type="text" required ><br />
	<button type="button">Enviar</button>
</form>
<script>
	document.querySelector('button').addEventListener('click', function(){
		inputs = document.getElementById('myForm').querySelectorAll('input');
		save = true;
		for( input of inputs){
			if(input.required && input.value=="" ){
				input.style.borderColor="red";
				save = false;
			}else{
				input.style.borderColor="";
			}
		}
		if(!save){
			// Advertir de campos vacios.
		}else{
			// Mostrar div de loading...
		}
	})
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar