Jump to content

Enable Form Field When Selecting an Item from Drop-Down List


kstout
 Share

Recommended Posts

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

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

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;

Edited by jkloth
Link to comment
Share on other sites

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

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.

Edited by jkloth
Link to comment
Share on other sites

<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;}}

Edited by dsonesuk
Link to comment
Share on other sites

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

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

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

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

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

Yes, that is invalid - your ids must be unique.

Link to comment
Share on other sites

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)">

Edited by dsonesuk
Link to comment
Share on other sites

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

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

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') {

Edited by jkloth
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...