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

Question

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?

Where do you call `showFileInput()`? The HTML calls `ValidateFile()`. — Barmar, May 19 '22 at 20:23
would be nice if you share content of `ValidateFile()` function. this kinda seems like you are tryting to use php variable which is not evaluated at a time you print the page, in other words only after the file submit you have the php variable with relevant data (or as ajax result but then code would look differently) — Kazz, May 19 '22 at 20:32
Does this answer your question? [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — Robin Zigmond, May 19 '22 at 20:32
it's not clear what you actually want to do here. If you simply want to show or hide the div on pageload according to the value of that PHP variable, you don't need or want Javascript at all - just don't `echo` out that div if the variable doesn't have the correct value. If you want it to show or hide depending on user interactions without reloading the page, then you need JS, but it's not clear what your requirements are in that case. — Robin Zigmond, May 19 '22 at 20:35

score 3 · Accepted Answer · edited May 20 '22 at 00:20

3

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>

edited May 20 '22 at 00:20

ethry

731
6
17

answered May 19 '22 at 20:27

Mehmood

66
1
5

`=` should be `==`. – Barmar May 19 '22 at 20:38

score 1 · Answer 2 · answered May 19 '22 at 21:05

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.

score 0 · Answer 3 · answered May 19 '22 at 20:25

0

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

answered May 19 '22 at 20:25

Barmar

741,623
53
500
612

I really don't think this can be the right solution. `showFileInput` here is more or less a do-nothing function, it sets a style to something that is set on the server side when the page first loads, and subsequent calls won't change anything. It's not clear to me what the OP wants, but if that's what they want - which it may well be - they shouldn't be using JS at all. – Robin Zigmond May 19 '22 at 20:37
Maybe, except it doesn't happen until they click on something that calls the function. – Barmar May 19 '22 at 20:39
You don't need to use JS for this, what if someone blocked scripts? It would break this, and there's no point in using JS when you can use plain CSS and PHP anyway. – ethry May 24 '22 at 19:00
If `showFileInput()` is called when they click on a button, you can't do that in PHP. – Barmar May 24 '22 at 19:24
@ethry Very few modern web sites can function without JavaScript enabled. Like it or not, SPAs are the norm, and no one designs pages that will operate without JS. – Barmar May 24 '22 at 19:25
@Barmar they never wanted to press a button though. Also tons of modern sites function without JS. – ethry May 24 '22 at 19:34
@ethry They have a function `showFileInput()`, I assume it will be called in response to some dynamic action. It doesn't have to be a button click, but it's something that can't just be hard-coded into the page on the server. – Barmar May 24 '22 at 19:39

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

3 Answers3