SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Lower Hutt
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making parts of a form visible/invisible

    Hey there, I'm not a big fan of Javascript myself, avoiding it wherever necessary. But I've reached a point where I need a small piece of Javascript to finish a project.

    Basically what I want to do is this.

    I have a form, its a very big form. About halfway down is a series of checkboxes (8 or so). Each one toggles whether the item I'm editing belongs to one of the categories or not. Each checkbox is linked to a subform that is invisible. (by subform I mean one or more form elements).

    When a checkbox is clicked I want the subform to appear, and when it is unclicked I want it to disappear. Now the tricky part is, that when the page loads, it draws information from the database, and some of these checkboxes will already be clicked, so those forms need to be visible right from the start.

    I'm just having far too many problems, can anyone point me towards some information that might help? Reply if I wasnt clear enough and you need clarification.

    Thanks

    -Andrew

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont understand why the field needs to be visible when being set or read from a database.

    if you are are you trying to avoid display='none';

    Cant see why you cant simply control the visibility with

    document.getElementById('*MyField*').style.visibillity='hidden';// or 'visible';

    if you dont want them taking up space try position:absolute;top:-1000px;
    for invisible

    and
    position:relative;top:0px; for visible

    must difficult/limit your options without JS?

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Lower Hutt
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was tinkering around, and got it worked out by myself.

    Code:
    function showHideText(box,id)  {  var elm = document.getElementById(id) 
    if (box.checked) {
    	elm.style.display = "block"
    } else {
    	elm.style.display = "none"
    }
    }
    
    function OnOff(boxid, zoneid) {
    var box = document.getElementById(boxid)
    var zone = document.getElementById(zoneid)
    
    if (box.checked) {
    	zone.style.display = "block"
    } else {
    	zone.style.display = "none"
    }
    }
    
    function initialToggle() {
    
    OnOff('type_food', 'foodzone')
    OnOff('type_book', 'bookzone')
    
    }
    I'm aware its probably terrible code, but it works.

    Then I call initialToggle in the body onLoad

    And the form is made up of:

    Code:
    <INPUT TYPE="CHECKBOX" NAME="type_food" ID="type_food" onClick="showHideText(this,'foodzone')"> 
    
    <div id='foodzone' style="display: none;">Food Form Here</div>

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beware display='none' elements are not always rendered, you may not be able to change its attibutes. as identified in my previous post.

    stay with the JS, it comes good in the end


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
  •