Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Hiden Div Code

  1. #1
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Hiden Div Code

    Hi guys, I'm sure this is a really novice question, but here goes...

    I am looking for a hidden div script which, when a selected tick box in my PHP form becomes checked a drop down menu appears directly under it, and disapears if the tick box becomes unchecked again - if that makes any sence at all. I'm pretty sure this cant be done through PHP, so have resorted to JS\Ajax to solve my problem.

    Can anyone guide me in the right direction as to what I need to be doing here?

    Cheers

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    You would wanna do something like:
    Code:
    <script type="text/javascript">
    function change_it(){
    document.getElementById('this_div1').innerHTML='<select><option>1</option><option>2</option><option>3</option></select>';
    document.getElementById('checkboxes').innerHTML='Check: <input type="radio" />';
    }
    </script>
    <div id="checkboxes">
    Check: <input type="radio" onChange="change_it()"/>
    </div><br />
    <div id="this_div1">
    Check the radio button above...</div>
    Edit:
    I edited the code :P so if you tried it already try the updated 1.
    Last edited by Nile; 02-10-2008 at 03:19 PM. Reason: edit
    Jeremy | jfein.net

  3. #3
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Nile, thanks for the post. I have tried the code you suggested and it works a treat in FireFox. However wont work in IE7.

    Any ideas?

    Cheers

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Try this:
    Code:
    <script type="text/javascript">
    function change_it(){
    document.this_div1.innerHTML='<select><option>1</option><option>2</option><option>3</option></select>';
    document.checkboxes.innerHTML='Check: <input type="radio" />';
    }
    </script>
    <div name="checkboxes">
    Check: <input type="radio" onChange="change_it()"/>
    </div><br />
    <div name="this_div1">
    Check the radio button above...</div>
    Edit: fAnd if that doesn't work:
    Code:
    <script type="text/javascript">
    function change_it(){
    document.this_div1.value='<select><option>1</option><option>2</option><option>3</option></select>';
    document.checkboxes.value='Check: <input type="radio" />';
    }
    </script>
    <div name="checkboxes">
    Check: <input type="radio" onChange="change_it()"/>
    </div><br />
    <div name="this_div1">
    Check the radio button above...</div>
    Last edited by Nile; 02-10-2008 at 03:35 PM. Reason: if
    Jeremy | jfein.net

  5. #5
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Nile View Post
    Try this:
    Code:
    <script type="text/javascript">
    function change_it(){
    document.this_div1.innerHTML='<select><option>1</option><option>2</option><option>3</option></select>';
    document.checkboxes.innerHTML='Check: <input type="radio" />';
    }
    </script>
    <div name="checkboxes">
    Check: <input type="radio" onChange="change_it()"/>
    </div><br />
    <div name="this_div1">
    Check the radio button above...</div>
    Edit: fAnd if that doesn't work:
    Code:
    <script type="text/javascript">
    function change_it(){
    document.this_div1.value='<select><option>1</option><option>2</option><option>3</option></select>';
    document.checkboxes.value='Check: <input type="radio" />';
    }
    </script>
    <div name="checkboxes">
    Check: <input type="radio" onChange="change_it()"/>
    </div><br />
    <div name="this_div1">
    Check the radio button above...</div>
    Still the same result I'm affriad... Buggy IE7

  6. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Yea, I wonder how your suppose to use getElementById in javascript..
    (the second and the third codes don't work if FF either.)
    Jeremy | jfein.net

  7. #7
    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

    Nile, div doesn't have value. With forms, innerHTML is an extremely bad idea. The two best options for dynamic content via javascript in forms are:

    • Having the content already on the page and simply hiding it or showing it via either its visibility or display style property. (this is often best, as it is fairly easy to provide non-javascript fall backs for)
    • DOM level 2 element creation and insertion/removal.


    However, no javascript is all that great of an idea for important form content unless there is a server side and/or plain HTML back up to the function/content it provides. Javascript is also less secure than the server side, and depending upon the sensitivity of the data and/or its value in commerce, care should be exercised in using javascript for it.
    - John
    ________________________

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

  8. #8
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Yes go with jscheuer1, Im really kinda new to js.
    Jeremy | jfein.net

  9. #9
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Nile View Post
    Yes go with jscheuer1, Im really kinda new to js.
    Thanks guys

    Quote Originally Posted by jscheuer1 View Post
    Nile, div doesn't have value. With forms, innerHTML is an extremely bad idea. The two best options for dynamic content via javascript in forms are:

    • Having the content already on the page and simply hiding it or showing it via either its visibility or display style property. (this is often best, as it is fairly easy to provide non-javascript fall backs for)
    • DOM level 2 element creation and insertion/removal.


    However, no javascript is all that great of an idea for important form content unless there is a server side and/or plain HTML back up to the function/content it provides. Javascript is also less secure than the server side, and depending upon the sensitivity of the data and/or its value in commerce, care should be exercised in using javascript for it.
    Thanks for the info jscheuer1, what would you say would be the best way to hide the drop down menu, and show it when the tick box is checked?

    Cheers

  10. #10
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Use css.
    Jeremy | jfein.net

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
  •