1

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?

Improve this question
4
  • Where do you call showFileInput()? The HTML calls ValidateFile(). Commented May 19, 2022 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) Commented May 19, 2022 at 20:32
  • Does this answer your question? What is the difference between client-side and server-side programming? Commented May 19, 2022 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. Commented May 19, 2022 at 20:35

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

= should be ==.
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.

Improve this answer

Comments

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';
    }
}
Improve this answer

7 Comments

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.
Maybe, except it doesn't happen until they click on something that calls the function.
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.
If showFileInput() is called when they click on a button, you can't do that in PHP.
@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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.