Jeffy Posted January 30, 2006 Share Posted January 30, 2006 how can you create a select drop down box that when a certain option is selected or clicked using the event "onclick" it displays and additional text imput box below it?example: i have a drop down containing the optionsmailinternetrefferalwhat i want to do it when refferal is selected i want it to pop up another imput text box so they can enter who.thanks Link to comment Share on other sites More sharing options...
aspnetguy Posted January 30, 2006 Share Posted January 30, 2006 HTML ...<select id="selBox" onChange="additionalInput(this.selectedIndex)"><option value="1">mail</option><option value="2">internet</option><option value="3">refferal</option></select><div id="refferalBox" style="display:none"><input id="refferalName"/></div>... JavaScript ...function additionalInput(index){ var selBox = document.getElementById('selBox'); var refBox = document.getelementById('refferalBox'); if(selBox[index].value == "3") { refBox.style.display = ""; }} Link to comment Share on other sites More sharing options...
Jeffy Posted January 30, 2006 Author Share Posted January 30, 2006 HTML...<select id="selBox" onChange="additionalInput(this.selectedIndex)"><option value="1">mail</option><option value="2">internet</option><option value="3">refferal</option></select><div id="refferalBox" style="display:none"><input id="refferalName"/></div>... JavaScript ...function additionalInput(index){ var selBox = document.getElementById('selBox'); var refBox = document.getelementById('refferalBox'); if(selBox[index].value == "3") { refBox.style.display = ""; }} <{POST_SNAPBACK}> i tried it but im not sure i did it right....the script is in the head and the html as normal but it didnt do anything? Link to comment Share on other sites More sharing options...
aspnetguy Posted January 30, 2006 Share Posted January 30, 2006 sorry there was a typo in there...I also made a small change so that if the option is changed again it will re-hide the refferal input box. <html><head><script>function additionalInput(index){ var selBox = document.getElementById('selBox'); var refBox = document.getElementById('refferalBox'); if(selBox[index].value == "3") refBox.style.display = ""; else refBox.style.display = "none";}</script></head><body><select id="selBox" onChange="additionalInput(this.selectedIndex)"> <option value="1">mail</option> <option value="2">internet</option> <option value="3">refferal</option></select><div id="refferalBox" style="display:none"> <input id="refferalName"/></div></body></html> Link to comment Share on other sites More sharing options...
Jeffy Posted January 30, 2006 Author Share Posted January 30, 2006 awesome it works great Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now