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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dynamically change text based on dropdown selection

    I have a drop down menu with some values.

    <select name="searchin">
    <option value="1">Keyword</option>
    <option value="2">Author</option>
    <option value="3">ISBN</option>
    <option value="4">Publisher</option>
    <option value="5">Title</option>
    </select>

    Base on the users selection, I want to display some text next to the dropdown. For example if a user selects Author, then I want to display text like "author names will only return this kind of books". Then if a user selects publisher I will have a different message. By default, it displays keyword and there will be a message next regarding keyword.

    How can I do this? Is it possible to do this with document.write? rather than layers?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why would you want to do it with document.write???

    Try this:

    <select name="searchin" onchange="document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo">
    <option value="1" extrainfo="Search by keyword">Keyword</option>
    <option value="2" extrainfo="Search by author">Author</option>
    <option value="3" extrainfo="Search by ISBN">ISBN</option>
    <option value="4" extrainfo="Search by publisher">Publisher</option>
    <option value="5" extrainfo="Search by title">Title</option>
    </select>

    <div id="ExtraInfo">Select search option</div>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another example:
    <html>
    <head>
    <title>Set Message</title>
    <script language="JavaScript">
    myarr=new Array()
    myarr[1]="Keyword message"
    myarr[2]="Author message"
    myarr[3]="ISBN message"
    myarr[4]="Publisher message"
    myarr[5]="Title message"
    function doIt(objval)
    {
    document.getElementById("msg").innerHTML=myarr[objval]
    }
    </script>
    </head
    <body>
    <form name="myform">
    <select name="searchin" onChange="doIt(this.options[this.selectedIndex].value)">
    <option value="1">Keyword</option>
    <option value="2">Author</option>
    <option value="3">ISBN</option>
    <option value="4">Publisher</option>
    <option value="5">Title</option>
    </select>
    <span id="msg">Keyword</span>
    </form>
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    language="Javascript" has been depreciated in the last century and there is no such thing as element.innerHTML in the DOM spec.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried vladdy's code and it works fine in IE. But not in NN 6.2.

    But requestcode's is working fine in IE and NN. Is the .innerHTML is invalid?

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No it is not invalid, but if you want to code to DOM specs then you can change the function to this:
    function doIt(objval)
    {
    document.getElementById('msg').firstChild.nodeValue=myarr[objval]
    }

    Also as noted by Vladdy you should change the javascript tag to this:
    <script type="text/javascript">

    I believe that is correct. I am sure Vladdy will correct me if I am wrong.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by chelvis
    I tried vladdy's code and it works fine in IE. But not in NN 6.2.

    But requestcode's is working fine in IE and NN. Is the .innerHTML is invalid?
    My bad, did not really try it before posting. Change the onchange event as follows:
    <select name="searchin" onchange="document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')">
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

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