SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Hiding text areas when not applicable?

    I apologise if this is a stupid question, but my roots lie in PHP, and not Javascript. If anyone can help me I'd be very grateful.

    I have a form for a user to submit, but I would like to have either:

    a) a checkbox that, when ticked, "greys out" certain text fields so that they can't be edited

    b) a button that will reveal/hide a part of the form

    If possible, I would like to do either of these WITHOUT refreshing the page.

    Any ideas (and bear in mind I'm a Javascript newb)?

  2. #2
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do both of these.

    Which should i explain.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you could explain how to toggle whether parts of a table are hidden without refreshing the page, that'd be great!


  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need the 'display' CSS property.

    Here's a simple form
    Code:
    <form>
    <input type="text" name="Name" /><br />
    Show/Hide <input type="checkbox" name="show_hide" onClick="showHide(this.checked, 'hiddenStuff')" />
    <span id="hiddenStuff">
    <input type="text" name="HiddenField" />
    </span>
    </form>
    Next, our stylesheet
    Code:
    <style type="text/css">
    span#hiddenStuff {
    display: none;
    }
    </style>
    Then, some javascript
    Code:
    <script>
    
    function showHide(bChecked, objName)
    	{
    	var tempObj = document.getElementById(objName);
    	tempObj.style.display = (bChecked) ? "block" : "none";
    	}
    
    </script>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks beetle, that was really helpful!

    However, I still have some questions if people don't mind answering them...

    How can I include a table within the hidden area, as I can't get one into the <span> of the previous code?

    Also, how would I use this method for radio buttons (when I only want one table visible at any one time)? It will appear when the radio button is clicked, but do I need a seperate function to remove it?

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just change the SPAN to a DIV! You'll noticed that I coded the function to accept the object's name, so you can use it for multiple instances...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, you've been EXTREMELY helpful, for which I am very grateful indeed. I would like to think that when I know something about this stuff I can help others in the same way you have helped me

    I knew I needed a different object, but could only think of using a layer (I think in this situation I need a smilie which is slapping it's own forehead)

    However, I only have one more question to ask ...

    What I'm trying to is toggle between two tables on the page, for which I need radio buttons. But if I try to use them, they will activate, but not deactivate when I reselect the other button. Can you help me?

    PS. Shop smart, shop S-Mart...

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you simply need to come up with a method/system to toggle the visibility of the other table off. I'll let you take a shot at it before saying any more.

    P.S. S-Mart!!!!
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehe, I totally understand!

    Anyway, I got it working, which was tricky seeing as I don't know Javascript

    For anyone following this thread who also needs to know how to do it, here foes:

    First, I changed the style information so that the section I wanted hidden initially was selected, and also so that it was applying this to a DIV rather than SPAN

    Code:
    <style type="text/css">
    div#internalstuff {
    display: none;
    }
    </style>
    I didn't need to change beetle's wonderful function , so that stays intact. But with the radio buttons, I simply had to make them turn one div on, and also THE OTHER DIV OFF.

    Code:
    <input type="radio" name="type" value="internal" onClick="showHide(this.checked,'internalstuff');showHide(this.unchecked,'projectstuff')">
    
    <input type="radio" name="type" value="project" onClick="showHide(this.unchecked,'internalstuff');showHide(this.checked,'projectstuff')">
    Thanks again for the help beetle And remember:

    <evildeadquoteage>Hail to the king, baby!</evildeadquoteage>

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! Glad you got it working. I should note, however, that there is a slight flaw. You reference the attribute this.unchecked which is not a valide attribute. However, since you actually do want the layer in that function call to turn off, the function properly receives a false value for bChecked. Now, this acutally may cause an error with some browsers (referencing a non-valid attribute) so you can get the same results just by change all the this.uncheckd parameters to false or 0
    Code:
    <input type="radio" name="type" value="internal" onClick="showHide(this.checked,'internalstuff');showHide(0,'projectstuff')">
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •