'How to show div depending on the value in a PHP variable

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?

javascriptphphtml


Solution 1:[1]

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.

Solution 2:[2]

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';
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ethry
Solution 2 Barmar

Related Questions