SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy show/hide for me tried new way not working..

    here is my code but not working:

    HTML Code:
    <script language="javascript1.2">
    function init()
    {
    var optional = document.getElementById("optional");
    optional.className = "hidden";
    var readrental = document.getElementById("readrental");
    readrental.onclick = showOptional;
    var readsale = document.getElementById("readsale");
    readsale.onclick = hideOptional;
    return true;
    }
    function showOptional()
    {
    var optional = document.getElementById("optional");
    optional.className = "";
    return true;
    }
    function hideOptional()
    {
    var optional = document.getElementById("optional");
    optional.className = "hidden";
    return true;
    }
    </script>
    <style>
    .hidden 
    {
    position:absolute;
    left:-1500em;
    }
    </style>
    now next block:

    HTML Code:
    <tr>
                <td>
    			  <input name="read" type="radio" id="readrental" />
    			  <label for="readrental">
    			  Rent
    			  </label>
                  <input name="read" type="radio" id="readsale" />
    			  <label for="readsale">
    			  Sale
    			  </label>
    			  </td>
              </tr>
    		  <div id="optional">
              <tr>
                <td>Choose Category: </td>
              </tr>
              <tr>
                <td>
    			<select name="category" id="category">
    			<option value="1">Student</option>
                </select>
                </td>
              </tr>
    		  </div>
    probably it is not working, i do not knw what is wrong..


    on the body tag i am doing it like this:

    HTML Code:
    <body onload="addLoadListener(init);">

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have addLoadListener defined?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Have you validated your code?

    The div cannot be where you have placed it. You should get rid of it, combinine the contents of both tr elements into just the one, and place the id attribute on the tr element instead,
    Code HTML4Strict:
    <tr id="optional">
        <td>
            Choose Category:<br />
            <select name="category" id="category">
            <option value="1">Student</option>
            </select>
        </td>
    </tr>

    If combining them isn't feasible, you could use a class name instead.

    Additionally, the script element should not use the language attribute anymore, and the style element should specify which type of style is being used.

    Code HTML4Strict:
    <script type="text/javascript">
    ...
    </script>
    <style type="text/css">
    ...
    </style>

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by M-M-J View Post
    Do you have addLoadListener defined?
    well, i just used it as in the body tag, and have not defined it anywhere, do i need to define it if so then how? can u guide me plz..

    Thanks and regards


  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    If you don't have addLoadListener defined anywhere you can just use init() instead.

  6. #6
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do the same like this if you like:
    Hide your optional block by default with style="display:none;" (see in the tr).
    And use the onClick event of radio buttons and pass the values of each which makes you easier to check in the javascript function.
    HTML Code:
    .......
        <tr>
            <td>
                <input name="read" type="radio" id="readrental" value="Rent" onClick="doHideShow(this.value);" /> <label for="readrental"> Rent </label>
                <input name="read" type="radio" id="readsale" value="Sale" onClick="doHideShow(this.value);" /> <label for="readsale"> Sale </label>
            </td>
        </tr>
        <tr id="optional" style="display:none;">
        	<td>
                <label>Choose Category:</label><br>
                <select name="category" id="category">
                    <option value="1">Student</option>
                </select>
            </td>
        </tr>
    .......
    And your javascript function should like this:
    Code javascript:
    function doHideShow(value){
    	if(value == "Rent")
    		document.getElementById('optional').style.display = '';
    	else
    		document.getElementById('optional').style.display = 'none';
    }

    And one more comment:
    <style>
    .hidden
    {
    position:absolute;
    left:-1500em;
    }
    </style>
    This is not the proper way to hide the elements. You can use display or visibility in CSS.
    Code css:
    .hidden{
    display:none;
    /* or */
    visibility:hidden;
    }
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5


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
  •