kstout Posted May 12, 2010 Share Posted May 12, 2010 I have created a contact page and there is one field that will be disabled until something is selected in a drop down menu.Basically, there is a drop down menu asking questions about where the user found us. One option is "other".If "other" is selected, then a text field just below will be enabled and the user can fill in the pertinent information.Does this make sense and how can I create this?Thanks in advance. Link to comment Share on other sites More sharing options...
justsomeguy Posted May 12, 2010 Share Posted May 12, 2010 You need to have an onchange event for the select element. The onchange event should check the value that was selected and enable or disable the field as appropriate. e.g.:<select onchange="check_option(this.value)"> function check_option(val){ if (val == 'other') { // enable field } else { // disable field }} Link to comment Share on other sites More sharing options...
ShadowMage Posted May 12, 2010 Share Posted May 12, 2010 Create a function and assign it in an onchange handler. Give your text box an id and in your JS function set it's enabled property:document.getElementById("textBoxID").enabled = true;Ah, its disabled:document.getElementById("textBoxID").disabled = false; Link to comment Share on other sites More sharing options...
kstout Posted May 12, 2010 Author Share Posted May 12, 2010 Thanks for the reply. I will give it a shot! Link to comment Share on other sites More sharing options...
kstout Posted May 12, 2010 Author Share Posted May 12, 2010 Okay, I gave this a shot but it is apparent I do not know what I am doing. Here is what I have. I took out a large majority of the page to simplify it for viewing here.<html><head><script type="text/javascript">document.getElementById("other").disabled = false; </script></head><body><form> <label> <select name="find_us" id="find_us"> <option value="other" id="foundOther" onchange="check_option(other)">Other</option> </select> </label> <label>If Other: <input name="other" type="text" id="other" /> </label></form></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted May 12, 2010 Share Posted May 12, 2010 You never defined the function check_option. You call it:<option value="other" id="foundOther" onchange="check_option(other)">Other</option>BTW, the onchange should be on your <select> not the <option>But you never define it in your script. You need to define the function: <script type='text/javascript'>function check_option(strID) { if (this.options[this.selectedIndex].value == 'other') { document.getElementById(strID).disabled = false; } else { document.getElementById(strID).disabled = true; }}</script> This line:if (this.options[this.selectedIndex].value == 'other') {checks for the value of the selected option of the drop down. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 12, 2010 Share Posted May 12, 2010 <select name="find_us" id="find_us" onchange="check_option(this.value)"><option value="option1">option1</option><option value="option2">option2</option><option value="option3">option3</option><option value="other">Other</option></select><input name="other" type="text" id="other" disabled="disabled" />function check_option(val){if(val == "other"){document.getElementById("other").disabled = false;}else{document.getElementById("other").disabled = true;}} Link to comment Share on other sites More sharing options...
chibineku Posted May 12, 2010 Share Posted May 12, 2010 You've got help with the function, so I won't do that here, but it's worth noting that if you start with an input disabled, and your user has javascript off, there's no way to get it on again. So, start with it enabled and when the page loads, immediately change it to disabled:window.onload = (document.getElementById('other').disabled = true); Link to comment Share on other sites More sharing options...
kstout Posted May 12, 2010 Author Share Posted May 12, 2010 Thanks for the help everyone. I tried both jkloth's and dsonesuk's method but I still can't get it to work. Is it obvious I have never used JavaScript before. Here is what I have for jkloth's method. I also incorporated the onload suggestion from chibineku. Hopefully I put it in the right spot. <html><head><script type='text/javascript'>function check_option(strID) { if (this.options[this.selectedIndex].value == 'other') { document.getElementById(strID).disabled = false; } else { document.getElementById(strID).disabled = true; }}window.onload = (document.getElementById('other').disabled = true); </script></head><body><form> <label> <select name="find_us" id="find_us" onchange="check_option(this.value)"> <option value="search_engine">Internet Search Engine</option> <option value="trade_show">Trade Show</option> <option value="other" id="other">Other</option> </select> </label> </p> <p> <label>If Other: <input name="other" type="text" id="other"/> </label> </p> <p><input name="submit" type="button" class="button" value="Submit" /></form></body></html> What am I missing or what am I doing wrong? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 12, 2010 Share Posted May 12, 2010 this.value is passing the value, when you only need 'this' (this), or it this.id anyway try both Link to comment Share on other sites More sharing options...
chibineku Posted May 12, 2010 Share Posted May 12, 2010 Hm. The use of the word 'this' is often a stumbling block. When you call a function from an element, 'this' refers to the element that is calling it. Inside the function, though, it has no meaning. The variable name in the brackets after the function name are going to hold the value of the element that called it - i.e. the select with id 'find_us'. The call to the function should be:<select id="find_us" name="find_us" onchange="check_option(this)">And your function:function find_us(element) {//in here, 'element' refers to the select element, and element.selectedIndex refers to the current selected option} Link to comment Share on other sites More sharing options...
ShadowMage Posted May 12, 2010 Share Posted May 12, 2010 Thanks for the help everyone. I tried both jkloth's and dsonesuk's method but I still can't get it to work. Is it obvious I have never used JavaScript before. Here is what I have for jkloth's method. I also incorporated the onload suggestion from chibineku. Hopefully I put it in the right spot.<html><head><script type='text/javascript'>function check_option(strID) { if (this.options[this.selectedIndex].value == 'other') { document.getElementById(strID).disabled = false; } else { document.getElementById(strID).disabled = true; }}window.onload = (document.getElementById('other').disabled = true); </script></head><body><form> <label> <select name="find_us" id="find_us" onchange="check_option(this.value)"> <option value="search_engine">Internet Search Engine</option> <option value="trade_show">Trade Show</option> <option value="other" id="other">Other</option> </select> </label> </p> <p> <label>If Other: <input name="other" type="text" id="other"/> </label> </p> <p><input name="submit" type="button" class="button" value="Submit" /></form></body></html> What am I missing or what am I doing wrong? Whoops that's my bad. There is an error in my function. You need to pass just 'this' to the function as dsonesuk mentioned, but change my function to read:function check_option(elem) { if (elem.options[elem.selectedIndex].value == 'other') { Link to comment Share on other sites More sharing options...
kstout Posted May 12, 2010 Author Share Posted May 12, 2010 I believe we are getting there. I made the changes that chibineku and dsonesuk suggested. It still is not working properly. I wonder if having two of id="option" is the issue?<option value="other" id="other">Other</option>and<input name="other" type="text" id="other"/ disabled="disabled"> Link to comment Share on other sites More sharing options...
chibineku Posted May 12, 2010 Share Posted May 12, 2010 Yes, that is invalid - your ids must be unique. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 12, 2010 Share Posted May 12, 2010 Your <option> tags don't need an id. And yes you can only have one id on a page. They have to be unique. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 12, 2010 Share Posted May 12, 2010 I tried it out with out much success either try thisfunction check_option(strID) {x=document.getElementById(strID);if (x.options[x.selectedIndex].value == 'other') {document.getElementById("other").disabled = false;} else {document.getElementById("other").disabled = true;}}sorry! with <select name="find_us" id="find_us" onchange="check_option(this.id)"> Link to comment Share on other sites More sharing options...
kstout Posted May 12, 2010 Author Share Posted May 12, 2010 Here is one last effort before I set myself on fire and run out of the office. Here is what I have but it still isn't working. <html><head><script type='text/javascript'>function find_us(element) { if (this.options[element.selectedIndex].value == 'foundOther') { document.getElementById(strID).disabled = false; } else { document.getElementById(strID).disabled = true; }}window.onload = (document.getElementById('other').disabled = true); </script></head><body><form> <label> <select name="find_us" id="find_us" onchange="check_option(this)"> <option value="search_engine">Internet Search Engine</option> <option value="trade_show">Trade Show</option> <option value="foundOther">Other</option> </select> </label> </p> <p> <label>If Other: <input name="other" type="text" id="other" /> </label> </p> <p><input name="submit" type="button" class="button" value="Submit" /></p></form></body></html> Link to comment Share on other sites More sharing options...
kstout Posted May 12, 2010 Author Share Posted May 12, 2010 I tried it out with out much success either try thisfunction check_option(strID) {x=document.getElementById(strID);if (x.options[x.selectedIndex].value == 'other') {document.getElementById("other").disabled = false;} else {document.getElementById("other").disabled = true;}}sorry! with <select name="find_us" id="find_us" onchange="check_option(this.id)">I'll give this a shot. Link to comment Share on other sites More sharing options...
kstout Posted May 12, 2010 Author Share Posted May 12, 2010 That worked dsonesuk! Thanks so much for helping out and to the others who helped as well. I now need to go take a JavaScript 101 class. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 FWIW, in your previous post this line is incorrect:if (this.options[element.selectedIndex].value == 'foundOther') {it should be:if (element.options[element.selectedIndex].value == 'other') { Link to comment Share on other sites More sharing options...
kstout Posted May 13, 2010 Author Share Posted May 13, 2010 FWIW, in your previous post this line is incorrect:if (this.options[element.selectedIndex].value == 'foundOther') {it should be:if (element.options[element.selectedIndex].value == 'other') {Thanks for your input jkloth. I was throwing everything out there to see if I could make it work. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.