I am trying to show a div which contains an input for file upload, the rule that I need to comply with is to show div it only if the status is equal to 1, otherwise it will hide it.
I have the status declared in a PHP variable called $status, to hide the div I use the display='none'.
The following is the validation code that I use in a Javascript function.
function showFileInput (){
var element = document.getElementById('content');
if ($status == '1'){
element.style.display='block';
}else{
element.style.display='none';
}
}
In my HTML code I have the following div that I want to display when the status is equal to 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>
It's important to note that I make use of the event onchange for other additional validations that I use when uploading the file.
With what I have previously, the div is still not hidden when the status is different from 1, it continues to be shown. Is there something that I am doing wrong in my validation or do I need additional?
You can directly put a check on $status variable in CSS like this.
This code will hide the element if $status is not set to 1, and will show it if it is.
<div style="<?php echo $status == 1 ? "display:block;" : "display:none;" ?>">My content</div>
You can do this with this code:
<?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>'; } ?>
This only adds the div to the page if status is equal to one, instead of hiding it, which can be useful if you don't want it to be accessible at all until the status is equal to 1.
You can't reference a PHP variable directly in JavaScript. You need to have PHP echo the variable. Use json_encode() to ensure that the PHP value is properly encoded as a JS literal.
function showFileInput (){
var element = document.getElementById('content');
if (<?php echo json_encode($status); ?> == '1'){
element.style.display='block';
}else{
element.style.display='none';
}
}