#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    56
    Rep Power
    8

    Show all div's if its input has a value


    Is this possible? So for below if the input value is not blank for any inputs in the "tdindent" class then change top div to visible?

    Code:
    <div class="table" id="table5" style="display:none;">
        <div class="tr">
             <div class="tdindent">Entity name(s):<input type="text" name='q325' id='q325' size='55' value='Test'>
    </div>
    </div>
    </div>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,152
    Rep Power
    183
    Originally Posted by QuietRiot
    Is this possible? So for below if the input value is not blank for any inputs in the "tdindent" class then change top div to visible?
    Yes, given you alter your HTML some what. The best/easiest way to do this; would be by using jQuery (see example below).
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $("document").ready(function(){
       $(".tdindent input").blur(function(){
          if($(this).val().length != 0) {
           $("#table5").css("display","block");
          }
          else {
           $("#table5").css("display","none");
          }
       });
    });
    </script>
    
    <div class="table" id="table5" style="display:none;">
    Table 5 Info Here
    </div>
        <div class="tr">
             <div class="tdindent">Entity name(s):<input type="text" name='q325' id='q325' size='55' value='Test'>
    </div>
    </div>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    56
    Rep Power
    8
    Originally Posted by web_loone08
    Yes, given you alter your HTML some what. The best/easiest way to do this; would be by using jQuery (see example below).
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $("document").ready(function(){
       $(".tdindent input").blur(function(){
          if($(this).val().length != 0) {
           $("#table5").css("display","block");
          }
          else {
           $("#table5").css("display","none");
          }
       });
    });
    </script>
    
    <div class="table" id="table5" style="display:none;">
    Table 5 Info Here
    </div>
        <div class="tr">
             <div class="tdindent">Entity name(s):<input type="text" name='q325' id='q325' size='55' value='Test'>
    </div>
    </div>
    Thanks for your reply. What if I actually want to do it on page load and for multiple tables. So I actually need the html the way i had it previously and I have a table 1, 2 ,3, 4, 5 etc.
    on load i want to see if there is a value and make those that do visible.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,152
    Rep Power
    183
    Yes, but you would need to use the .load() API, combined with the .each() API. This way; you get the effect when the document's/window's onload event occurs. Also, by adding the .each() API to the code; it will loop threw each of your input fields within each div belonging to the "tdindent" class and will show/hide divs, with a "table" class, accordingly.

IMN logo majestic logo threadwatch logo seochat tools logo