Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Something Mysterious Is Happening Here.

This is a discussion on Something Mysterious Is Happening Here., within the Javascript section. This forum and the thread "Something Mysterious Is Happening Here." are both part of the Programming Your Website category.

 
 Reply to this topicStart new topic
> Something Mysterious Is Happening Here.
Jason
post May 26 2008, 05:38 AM
Post #1


Master of the Universe
******

Group: Advisors
Posts: 1,157
Joined: 15-February 08
From: London, England
Member No.: 141
I am trying to hide/display 2 items based on whether a checkbox is ticked or not. This was working in a html test page. I then moved it to the site I am working on and it packed up. I fear it is something to do with the document object model. My test version didn't have the data in a table. Any idea as to what I need to change to bring this little script to life?


In the head
CODE
<script src="includes/validation.js" type="text/javascript"></script>


In validation.js
CODE
function display($var)

{

    if (document.getElementById($var).style.display == 'none')

    {

        document.getElementById($var).style.display = 'block';

    }

    else

    {

        document.getElementById($var).style.display = 'none';

    }

}


In add page

CODE
<tr height="25">

<th align="left">For Rent:</th>

<td><input type="checkbox" name="rent" value="true" onchange="display('View')" class="general_form" <?if($new_object->GetPropertyString($string='rent',$result_edit_details['kdcontent_string'])=="Yes"){?>checked<?}?>></td>


</tr>

<tr>
    <div id="View">
        <th align="left">Short-term Rental</th>
        <td><input type="checkbox" name="short-term" value="true" class="general_form" <?php if($result_edit_details['kd_short_term'] =="Yes"){?>checked<?php } ?> ></td>
    </div>
</tr>    
<tr>
    <th align="left">Long-term Rental</th>
    <td><input type="checkbox" name="long-term" value="true" class="general_form" <?php if($result_edit_details['kd_long_term'] =="Yes"){?>checked<?php } ?>></td>
</tr>
    

<script type="text/javascript">
                
    document.getElementById('View').style.display = 'none';
            
</script>


--------------------
Go to the top of the page
 
+Quote Post
ejg
post May 26 2008, 07:22 AM
Post #2


Squeezing
***

Group: Members
Posts: 75
Joined: 14-February 08
Member No.: 86
There are a couple of problems with your code. You cannot have <div>s within a table. You are also not using the table tags correctly. <th> is used to put a header across the top of a table not down the side.

You should be using <label> to go with your inputs.

There is also a logic problem with your javascript. Firefox does not clear checkboxes on refresh and since you are setting display: none on page intialization, you can end up with the checkbox checked and the <div> not displayed. You should set the display status of the <div> based on whether the checkbox is checked and call the display function after the page is loaded.
CODE
function display($var) {
    
         rentcb = document.getElementById('rent')
         el = document.getElementById($var);
    
         if (rentcb.checked) {
             el.style.display = 'block';
         }
         else  {
             el.style.display = 'none';
         }
     }

The HTML
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//Ddd HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.ddd">
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
   <meta http-equiv="Content-Language" content="en-us">
   <title>test</title>
   <link rel="stylesheet" type="text/css" href="test.css">
   <script src="validation.js" type="text/javascript"></script>
   </head>
   <body>
       <div class="row">
           <label for="rent">For Rent:</label>
           <input type="checkbox" name="rent" id="rent" value="true" onchange="display('View')" class="general_form" >
       </div>
       <div id="View" class="row">
           <label for="short-term">Short-term Rental</label>
           <input type="checkbox" name="short-term" id="short-term"  value="true" class="general_form"  >
       </div>
       <div class="row">
           <label for="long-term">Long-term Rental</label>
           <input type="checkbox" name="long-term" id="long-term" value="true" class="general_form" >
       </div>
  
       <script type="text/javascript">
           display('View');
       </script>
   </body>
   </html>

The corresponding CSS is:
CODE
.row {
       clear: both;
       padding-top: 2px;
       height: 30px;
       margin: 10px 0;
       }
   .row label {
       clear: both;
       float: left;
       width: 140px;
       text-align: right;
       margin-top: 2px;
       font-weight: bold;    
       }
   .row input {
       float: left;
       width: 20px;
       text-align: left;
       padding-top: 2px;
       }
Go to the top of the page
 
+Quote Post
Jason
post May 26 2008, 08:21 AM
Post #3


Master of the Universe
******

Group: Advisors
Posts: 1,157
Joined: 15-February 08
From: London, England
Member No.: 141
I didn't know about div's and tables. Thanks for the info. Unfortunately the client's site is littered with misused tables, table headers and table rows. My job is to get what is currently existing to work and to make it display consistently. I am not being paid to validate or rewrite sections of code. (I have spoken to the client about this but he is of the impression that 'it works', why pay money to do exactly what it is doing now.)

This is the last thing I need to do from 10 things. However it is presenting quite a problem.

I appended the id to the table row and it is working nicely. Thanks a lot.


--------------------
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: