Show/Hide jQuery - depending on a PHP variable

[LesMizzell]

I'm using jquery to show/hide a form text input depending on the value of a checkbox:

$(document).ready(function(){
 
  $("input[name$='usr_type']").click(function(){
  var radio_value = $(this).val();
    if(radio_value=='1') {
      $("#typeother").show("slow");
    }
    else if(radio_value=='2') {
      $("#typeother").hide();
     }
  });
  $("#typeother").hide();
});

Above works great.

However, I also need to SHOW the form input if a returned database value matches 1 as well.

PHP Code: [Select]

if ($gtprsn['usr_type'] == 1); {  ... show the freaking text input ... }

Nothing I've tried so far works. I can add an if statement to the input itself to add a style and it will display:

PHP Code: [Select]

<?php if ($gtprsn['usr_type'] == 3): ?>style="display:block !important;"<?php endif; ?>

But this then overrides the jquery and if I check the other radio button (value 2), the input still shows...

Suggestions?

[guido2004]

When is that PHP code called? Through AJAX? Or only when the entire page is requested?

If it's the latter, then you should output a different jquery code (I think). Something like:

$(document).ready(function() {
  $("input[name$='usr_type']").click(function() {
    var radio_value = $(this).val();
    if(radio_value=='1') {
      $("#typeother").show("slow");
    }
    else if(radio_value=='2') {
      $("#typeother").hide();
    }
  });
  <?php 
    if ($gtprsn['usr_type'] == 3) {
      echo '$("#typeother").hide();' 
    } else {
      echo '$("#typeother").show();' 
    }
});

If it's an AJAX call, then you would return the variable value and then you would have to manage that value in your jscript code.

Anyway, the point is that PHP is server side, and jscript is client side, so they don't communicate directly. Or you make PHP output the jquery code you need when the page is requested, or you make it return the values/code you need when an AJAX request is made.

[LesMizzell]

Got it to work. I think the solution is a little ugly and was hoping for something a little more compact, but basically:

 <?php if ($gtprsn['usr_cat_id'] == 3): ?>
  <script type="text/javascript">  
   $(document).ready(function(){
     $("input[name$='usr_type']").click(function(){
     var radio_value = $(this).val();
       if(radio_value=='3') {
         $("#typeother").show("slow");
       }
       else if(radio_value=='2') {
         $("#typeother").hide();
        }
        else if(radio_value=='1') {
        $("#typeother").hide();
        }
        else if(radio_value=='0') {
        $("#typeother").hide();
        }
     });
     $("#typeother").show();
   });
  </script>
<?php else: ?>
  <script type="text/javascript">  
   $(document).ready(function(){
     $("input[name$='usr_type']").click(function(){
     var radio_value = $(this).val();
       if(radio_value=='3') {
         $("#typeother").show("slow");
       }
       else if(radio_value=='2') {
         $("#typeother").hide();
        }
        else if(radio_value=='1') {
        $("#typeother").hide();
        }
        else if(radio_value=='0') {
        $("#typeother").hide();
        }
     });
     $("#typeother").hide();
   });
  </script>
<?php endif; ?>

[Cups]

Maybe I'm missing something here, but I only spotted the last line changing:

  <script type="text/javascript">  
   $(document).ready(function(){
     $("input[name$='usr_type']").click(function(){
     var radio_value = $(this).val();
       if(radio_value=='3') {
         $("#typeother").show("slow");
       }
       else if(radio_value=='2') {
         $("#typeother").hide();
        }
        else if(radio_value=='1') {
        $("#typeother").hide();
        }
        else if(radio_value=='0') {
        $("#typeother").hide();
        }
     });
<?php if ($gtprsn['usr_cat_id'] == 3): ?>
     $("#typeother").show();
<?php else: ?>
     $("#typeother").hide();
<?php endif; ?>
   });
  </script>

So at least try and keep your PHP DRY. I'm no JQuery guru at all, but I thought that toggle was supposed to maintain the state of show/hide.