I am writing an HTML form. I need the selected value of a <select> tag to then populate an <input type="text" [...] /> tag. I got this to work just fine, but when I wrap the form in a <div id="form">[...]</div> it stops working. I have searched up and down google for an answer, but I am unsure if I even understand how to ask the question! Here is my sample code as of yet: <html> <head> <title>js Test</title> <script Language="JavaScript"><!-- function myTest(){ var myTest = form.select.options[form.select.selectedIndex].value; alert(myTest); } </script> </head> <body> <div id="form"> <form action="" method="post" name="form"> <span class="title">Add Details</span> <ul> <li> <label>Label</label> <span class="note">Note</span> <select name="select" onChange="myTest()"> <option value=""></option> <option value="this text in alert box">trying</option> <option value="some other text">something</option> <option value="value 3">new</option> </select> </li> </ul> </form> </div> </body> </html> Code (markup): So if you remove the id="form" from <div id="form"> it works just fine and gives me an alert. How to I reference the <div id=form> to make it work properly? Do I need to do this for every div the form is in? I have done PHP for a number of years but not javascript, so this is kind of new to me. Thanks in advance!
Just needs a couple of things fixing. The div has an id of "form", and the form has a name of "form". That will cause problems with IE, which intermingles ids and names. Standards-compliant browsers don't do that, only IE. So just id your div to something other than "form", and IE won't get them mixed up. The following is an incomplete DOM reference which will likely upset compliant browsers, but apparently not IE ... var myTest = form.select.options[... Code (markup): To fix that, use one of the following alternatives for that line var myTest = document.form.select.options[document.form.select.selectedIndex].value; var myTest = document.forms[0].select.options[document.forms[0].select.selectedIndex].value; Code (markup): Or else you could id the form (or the select) and use getElementById instead. If you are going to have more than one forms, use one of these last two alternatives, as document.form.select. ... assumes only one form exists (or only gets the last form in the markup). Also, for the script tags, use <script type="text/javascript">, and there is no need for the comment protectors within the script tags. And eventually, you'll need a proper doctype at the top of the page, to keep IE out of quirks mode.