Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
Like Tree1Likes
  • 1 Post By felgall

Thread: newby question

  1. #1
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts

    newby question

    hi,




    i want to do something.

    i have a 1st drop-down menu.


    upon a selection made , I want that a 2th dropdown menu appears below and have different options, based upon the first option picked.

    ex:

    celestral body : planet
    subtype: gas

    celestral body: black hole
    subtype: ( none)

    if the user pick 'planet', the subtype menu will have choices like gas, etc to pick.

    if the user pick a black hole, there aint a subtype for this.

    Code:
    <form name="form1">
    <tr><td>Celestral Body</td><td>
    <select name="Celestral" id="celestral" onChange="myfunction1()";>
        <option value=1>Planet</option>
        <option value=2>Moon</option>
        <option value=3>Sun</option>
        <option value=4>Asteroid Field</option>
        <option value=5>Comet</option>
        <option value=6>Black Hole</option>
        </select>
    
    
    <script>
    myfunction1()= function{
    var celestral= document.getElementById(celestral);
    }
    
    
    </script>

    how do i do ? do document.getElementById return the option value ?

    and once that resolved, i want that like if celestral="planet", then create html below ( a row, a <select> , etc ).


    thanks for lightening me on this !

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Is Dynamic Dropdown Boxes - Revised what you are looking for?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    yeah its that.


    but there might be a way less complicated.

    thansk a lot for the link.


    i will study it more....


    can we generate a html code upon a javascript function called ?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    If you have a limited amount of info needed for a second dropdown JS and arrays could be used. If you have a lot of info or need a number of dropdowns then ajax and a database would be better.

    You have a few errors in your posted code and sending the picked value to the JS code works a lot easier.

    Code:
    <form name="form1"> <!--   why is this here???  -->
    <tr><td>Celestral Body</td><td>
    <select name="Celestral" id="celestral" onchange="myfunction1(this.value);">
        <option value=1>Planet</option>
        <option value=2>Moon</option>
        <option value=3>Sun</option>
        <option value=4>Asteroid Field</option>
        <option value=5>Comet</option>
        <option value=6>Black Hole</option>
    </select>
    
    
    <script>
    function myfunction1(celestral){
    	alert(celestral);  // FOR CHECKING 
    }
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    franc11 (06-20-2014)

  • #5
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    o yeah i understand now !!

    onchange="myfunction1(this.value);" do transfer the picked value to the function parameter () . then since (celestral) is replace by (value ), (value) is called in alert ...


    pretty strange tho.

  • #6
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    i want a function that upon called, it makes appears another block of html codes....

    Code:
    <script> function subtypeFunction(){
     document.write(' <tr><td>Subtype:</td><td>
     <select name="subtype">
     <option>Hot</option>
     <option>Temperate</option>
     <option>Cold</option>
     </td></tr></select>');
    }
     </script>

  • #7
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    this is ( the code upper) that is suppose to make appears the code, but it doesnt works. it only works if i use only string like "hello". . .

    plus, i dont want to create a new page.

    i only want that the code is generated, or made visible once the function subtypeFunction is called.

    thank you


    m goimng to sleep ( sleepy head )

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    franc11 (06-20-2014)

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by franc11 View Post
    o yeah i understand now !!

    onchange="myfunction1(this.value);" do transfer the picked value to the function parameter () . then since (celestral) is replace by (value ), (value) is called in alert ...


    pretty strange tho.
    That is the old way to do it though.

    Nodern browsers work best with the JavaScript completely separate so you use addEventListener in the script itself to add the change event processing.

    Also alert is the old way of debugging. Replace that with console.log() and if you forget to remove it when the script goes live no one will notice as they will not normally be looking at the error console.
    franc11 likes this.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    That is the old way to do it though.

    Nodern browsers work best with the JavaScript completely separate so you use addEventListener in the script itself to add the change event processing.

    Also alert is the old way of debugging. Replace that with console.log() and if you forget to remove it when the script goes live no one will notice as they will not normally be looking at the error console.

    yep, so opening a javascript file externally who does all the code is also a good choice.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •