SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide jQuery - depending on a PHP variable

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

    Code:
    $(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]
    Code:
    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]
    Code:
    <?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?

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,500
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    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:
    Code:
    $(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.

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it to work. I think the solution is a little ugly and was hoping for something a little more compact, but basically:

    Code:
     <?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; ?>

  4. #4
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Maybe I'm missing something here, but I only spotted the last line changing:

    PHP Code:
      <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •