SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding DIV on SELECT

    I have a select option with 3 options. If the second option is chosen, then I must display another part of the form, in a div that expands/collapses. This is what I've got, but the div always shows:

    Code:
    <html><head>
    <title>Test: Show/Hide div</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function toggleDiv(){
        if (document.tagsForm.masterTag=="people") {
            showHideMe.style.display='block';
        }else{
            showHideMe.style.display='none';
        }
    }
    onload = toggleDiv();
    </script>
    </head><body>
    <form id="tagsForm">
        <select name="masterTag" id="masterTag" onchange="toggleDiv()">
            <option value="keywords">Keywords</option>
            <option value="people">People</option>
            <option value="places">Places</option>
        </select>
        <div id="showHideMe">Hello, people!</div>
    </form>
    </body></html>
    What am I doing wrong? Thanks in advance.
    . Have a question?
    . . What Is Firefox?
    . . . . What Is Open Office?
    . . . . . . What Is What?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    if (document.tagsForm.masterTag=="people") {
    should be
    Code:
    if (document.tagsForm.masterTag.value=="people") {
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Kravvitz, but it makes no improvement. The div is still visible no matter what option is selected. Also, I get this error in the Firefox JS debugger:
    document.tagsForm has no properties
    for this line:
    Code:
    if (document.tagsForm.masterTag.value=="people") {
    I don't understand why it's seeing "document.tagsForm" when the line says "document.tagsForm.masterTag.value".
    . Have a question?
    . . What Is Firefox?
    . . . . What Is Open Office?
    . . . . . . What Is What?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It shows the error there because that's where it is. Why would you want an error message that is wrong about the location? You can use IE for that.

    It's probably because the form as an ID but not a name.

    Try this.
    Code:
    if (document.getElementById('tagsForm').masterTag.value=="people") {
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Addict dotancohen's Avatar
    Join Date
    Aug 2005
    Location
    Haifa
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not commenting about the error, rather, the cause of the error! I did manage to get the div appearing/disappearing finally. Thanks.
    . Have a question?
    . . What Is Firefox?
    . . . . What Is Open Office?
    . . . . . . What Is What?


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
  •