CODEWITHSUNDEEP
javascriptphpshow-hide
Hunter Winchester
Hunter Winchester

Reputation: 305

Hide and Show depending on value

Does anyone know how to hide and show options under select-tag depending on a certain value from database?

Here's what I did but it doesn't work:

<script>
    var a = <?php echo $row["status"]; ?>
    if(a == 'To be check' || a == 'Endorsed By IT') {
        $("#new").show();
    } else
        $("#new").hide();   
    </script>

Here's what's under #new:

<div id="new">
    <select name="status">
        <option value="Request">Request</option>
        <option value="Upload">Upload</option>
    </select>
</div>

Upvotes: 0

Views: 1196

Answers (5)

Anshul Nigam
Anshul Nigam

Reputation: 1628

i guess you need to do it write condition in document ready method

$( document ).ready(function() {
var a = '<?php echo $row["status"]; ?>'; // missing the quotes here
    if(a == 'To be check')
     {
         $("#new").show();
     }
     else
         $("#new").hide();
})

Upvotes: -1

insertusernamehere
insertusernamehere

Reputation: 23580

As of your problem b0s3 has the answer. Besides that, I would recommend a different way to handle this problem:

Try to modify the HTML markup while rendering instead of your altering your JavaScript:

<div id="new" <?print ( in_array($row["status"], array('To be check', 'Endorsed By IT')) ? 'class="active"' : ''); ?>
    […]
</div>

You can use a CSS class like:

#new { display: none; }
#new.active { display: block; }

You can still alter the visibility later by using:

document.getElementById('new').classList.toggle('active'); // vanilla JS
$('#new').toggleClass('active'); // jQuery

The advantages are:

  • The element is hidden right away and won't be visible to the user if your page loads slowly (for whatever reason).
  • The JavaScript code could be kept and maintained separately from your template, as it doesn't have to be modified by PHP.

Upvotes: 2

user3832769
user3832769

Reputation:

Try this:-

<script>
 var a = '<?php echo $row["status"]; ?>';
 if(a == 'To be check' || a == 'Endorsed By IT')
 {
 document.getElementById("new").style.display = 'block';
 }
 else
 {
 document.getElementById("new").style.display = 'none';
 }
 </script>

Upvotes: 0

Manashvi Birla
Manashvi Birla

Reputation: 2843

To show/hide div using javascript, you can write like :

<script>
        var a = '<?php echo $row["status"]; ?>';
        if(a == 'To be check' || a == 'Endorsed By IT')
        {
            document.getElementById(new).style.display = 'block';
        }
        else
            document.getElementById(new).style.display = 'none';

    </script>

Upvotes: 0

Sougata Bose
Sougata Bose

Reputation: 31749

Missing the quotes. $row["status"] contains string. You should add the quotes properly. 

<script>
    var a = '<?php echo $row["status"]; ?>'; // missing the quotes here
    if(a == 'To be check' || a == 'Endorsed By IT')
    {
        $("#new").show();
    }
    else
        $("#new").hide();

</script>

Upvotes: 1

Related Questions