Results 1 to 9 of 9

Thread: DHTML Effect...

  1. #1
    Join Date
    Feb 2007
    Location
    Sa-Town, Tx
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DHTML Effect...

    I'm trying to figure out how to use a drop-down box effect so when the user selects something in that drop-down box, a series of text boxes appears under it, asking the user for more data. Any way to do that??

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You could use the select's onchange event to determine which other content to reveal.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yes there is. You can do this by writing a function to get this done. Here is how the function works. The function is able to get which item of the select drop down box is clicked. Beging able to do that, you can tell the function to write a html code to a div element that could already have been put their. Make sure the div element is having an "id" or "name" attribute so that you can make reference to that HTML object and alter its innerHTML.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2007
    Location
    Sa-Town, Tx
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ilensoft View Post
    yes there is. You can do this by writing a function to get this done. Here is how the function works. The function is able to get which item of the select drop down box is clicked. Beging able to do that, you can tell the function to write a html code to a div element that could already have been put their. Make sure the div element is having an "id" or "name" attribute so that you can make reference to that HTML object and alter its innerHTML.
    This seems to be a start...

    http://www.pageresource.com/jscript/jdrop2.htm

    I just need to figure out how to make it to work for my job page

    http://www.deaf-interpreter.com/request2.php

    once bill-me is selected, the billing information appears

    or once credit card is selected, the appropriate boxes would appear.

    Any Advice?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

  7. #7
    Join Date
    Feb 2007
    Location
    Sa-Town, Tx
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I see radio boxes and check boxes, I just am not sure how to do this with a drop-down box...

  8. #8
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Twey's script does do that... but it may seem a little complicated. Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script type="text/javascript">
    function selectBox(el) {
    var d_el = document.getElementById(el);
    document.getElementById("mainarea").innerHTML=d_el.innerHTML;
    }
    </script>
    </head>
    <body>
    <select onchange="selectBox(options[selectedIndex].value);">
    	<option selected value="default">Default Option</option>
    	<option value="content1">Option 1</option>
    	<option value="mycontent2">Option 1</option>
    </select>
    
    <div id="default" style="display:none">
    	<br>default content
    </div>
    
    <div id="content1" style="display:none">
    	<input type="text">
    	<br><input type="text">
    	<br><input type="radio" name="test">Item 1
    	<br><input type="radio" name="test">Item 2
    </div>
    
    <div id="mycontent2" style="display:none">
    	Blah blah ... you get the picture
    </div>
    
    <div id="mainarea"></div>
    </body>
    </html>
    Set the "value" of your option to your targeted content:
    Code:
    <option value="mycontentname">option</option>
    and make sure the content actually exists:
    Code:
    <div id="mycontentname"...
    - Mike

  9. #9
    Join Date
    Feb 2007
    Location
    Sa-Town, Tx
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Looks Promising, I'll give it a try and get back on ya'll with this once I figure this out. :-D

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
  •