Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    198
    Thanks
    51
    Thanked 0 Times in 0 Posts

    Simple show/hide script

    Hi All,

    I am trying to get a simple show/hide script to work. It seems that my If statement is always returning false because my div "equipFields" is always hidden. Also, I added an alert to flag if it returns true and the alert is never popping up (even when the condition should be true).

    I think it has something to do with the fact that I am using PHP to return data from a recordset (this is what fills the "cat" variable) but I don't know how else to code this. Any help is always appreciated. Thanks in advance.

    Ken

    Code:
              <script type="text/javascript">
              function hideshow(){
              var cat = document.getElementById('category');
              var eqFields = document.getElementById('equipFields');
                if (cat=="Equipment issue") {
                alert("it says equipment issue");
                eqFields.style.display="block";           
                }else{
                eqFields.style.display="none";
                }
              };
              window.onload = function() {
                hideshow();
              };
              </script>
                <h4><em>Details of your selected entry:</em></h4>
            <p>
              <label><em><strong>Airdate - </strong></em></label>
              <em><?php echo $row_rstOnAirActivity['Airdate']; ?><br/>
              </em>
            <p>
              <em>
              <label><strong>Event Category - </strong></label>
              <div id="category"><?php echo $row_rstOnAirActivity['DiscrepType']; ?></div><br/>
              </em>
            <p>
              <em>
              <label><strong>Detail - </strong></label>
              <?php echo $row_rstOnAirActivity['DiscrepDetail']; ?><br/>
              </em>
            <p>
              <div id="equipFields">
              <em>
              <label><strong>Equipment Location - </strong></label>
              <?php echo $row_rstOnAirActivity['EquipLoc']; ?><br/>
              </em>
             <p>
              <em>
              <label><strong>Equipment ID - </strong></label>
              <?php echo $row_rstOnAirActivity['EquipID']; ?></em></em><br/>
              </div>
            <p>

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    You are setting cat to refer to an element, not the text it contains.

  • #3
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    198
    Thanks
    51
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mrhoo View Post
    You are setting cat to refer to an element, not the text it contains.
    Thanks mrhoo,

    I didn't realize that and this put me in the right direction. I tried:

    var eqFields = document.getElementById('equipFields').value;

    and

    if (cat.value=="Equipment issue") {

    but neither one would work. Forgive my lack of experience but what would be the correct way to set this variable

    Kind regards,

    Ken

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Your id's refer to a <div>, not a form field, so

    Code:
    var cat = document.getElementById('category').innerHTML;
    var eqFields = document.getElementById('equipFields').innerHTML;
    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    198
    Thanks
    51
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Your id's refer to a <div>, not a form field, so

    Code:
    var cat = document.getElementById('category').innerHTML;
    var eqFields = document.getElementById('equipFields').innerHTML;
    Hi Phillip M,

    Thanks for your help. I made your suggested change but it still does not work. The alert is not being triggered and the div is always visible. Could it be that I am using a PHP echo to pull the value of cat? I will read up on innerHTML but in the meantime here is the code with your change. Is this what you intended:

    Code:
              <script type="text/javascript">
              function hideshow(){
              var cat = document.getElementById('category').innerHTML;
              var eqFields = document.getElementById('equipFields').innerHTML;
                if (cat=="Equipment issue") {
                alert("it says equipment issue");
                eqFields.style.display="block";           
                }else{
                eqFields.style.display="none";
                }
              };
              window.onload = function() {
                hideshow();
              };
              </script>
                <h4><em>Details of your selected entry:</em></h4>
            <p>
              <label><em><strong>Airdate - </strong></em></label>
              <em><?php echo $row_rstOnAirActivity['Airdate']; ?><br/>
              </em>
            <p>
              <em>
              <label><strong>Event Category - </strong></label>
              <div id="category"><?php echo $row_rstOnAirActivity['DiscrepType']; ?></div><br/>
              </em>
            <p>
              <em>
              <label><strong>Detail - </strong></label>
              <?php echo $row_rstOnAirActivity['DiscrepDetail']; ?><br/>
              </em>
            <p>
              <div id="equipFields">
              <em>
              <label><strong>Equipment Location - </strong></label>
              <?php echo $row_rstOnAirActivity['EquipLoc']; ?><br/>
              </em>
             <p>
              <em>
              <label><strong>Equipment ID - </strong></label>
              <?php echo $row_rstOnAirActivity['EquipID']; ?></em></em><br/>
              </div>
            <p>
    Last edited by MaDmiX; 06-06-2012 at 09:21 PM.

  • #6
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    198
    Thanks
    51
    Thanked 0 Times in 0 Posts
    Hi All,

    I just wanted to post to say I got the script working. It was actually that, while the innerHTML propert was needed for the cat variable, it was not needed for the eqFields variable (since I was only hiding & showing this div, not pulling the value). Once I made this change, the script worked.

    Thanks again, everyone for your help.

    Ken


  •  

    Posting Permissions

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