Estoy tratando de mostrar un div que contiene una entrada para la carga de archivos, la regla que debo cumplir es mostrar div solo si el estado es igual a 1, de lo contrario, lo ocultará.
Tengo el estado declarado en una variable de PHP llamada $status , para ocultar el div utilizo display='none' .
El siguiente es el código de validación que uso en una función de Javascript.
function showFileInput (){ var element = document.getElementById('content'); if ($status == '1'){ element.style.display='block'; }else{ element.style.display='none'; } } En mi código HTML tengo el siguiente div que quiero mostrar cuando el estado es igual a 1.
<div id="content" class="form-group row"> <label for="fileToUpload" class="col-sm-3 col-form-label">File Upload:</label> <div class="col-sm-8"> <input type="file" name="fileToUpload" id="XmlToUpload" class="btn" accept=".xml" onchange="ValidateFile()" required=""> </div> </div> Es importante notar que hago uso del evento onchange para otras validaciones adicionales que uso al subir el archivo.
Con lo que tengo anteriormente, el div sigue sin ocultarse cuando el estado es diferente a 1, se sigue mostrando. ¿Hay algo que estoy haciendo mal en mi validación o necesito algo adicional?
Puede marcar directamente la variable $status en CSS de esta manera.
Este código ocultará el elemento si $status no está establecido en 1 y lo mostrará si lo está.
<div style="<?php echo $status == 1 ? "display:block;" : "display:none;" ?>">My content</div>Puedes hacer esto con este código:
<?php if($status == 1) { echo '<div id="content" class="form-group row"> <label for="fileToUpload" class="col-sm-3 col-form-label">File Upload:</label> <div class="col-sm-8"> <input type="file" name="fileToUpload" id="XmlToUpload" class="btn" accept=".xml" onchange="ValidateFile()" required=""> </div> </div>'; } ?>Esto solo agrega el div a la página si el estado es igual a uno, en lugar de ocultarlo, lo que puede ser útil si no desea que esté accesible hasta que el estado sea igual a 1.
No puede hacer referencia a una variable de PHP directamente en JavaScript. Necesitas que PHP haga eco de la variable. Use json_encode() para asegurarse de que el valor de PHP esté codificado correctamente como un literal JS.
function showFileInput (){ var element = document.getElementById('content'); if (<?php echo json_encode($status); ?> == '1'){ element.style.display='block'; }else{ element.style.display='none'; } }