Jquery form function help

I am building a form and one of the components will be a drop down menu and a text box. I would like the text box to be disabled, unless they select other from the drop down. If they select other then the text field becomes active. If they then choose another option after selecting other then the text field would go back to being disabled. This would only apply to two drop downs and two text fields on the form all other text fields on the form would not be disabled by default.

Thanks!
PdesignzPPC SpecialistAsked:
Who is Participating?
 
Gurvinder Pal SinghCommented:
0
 
Gurvinder Pal SinghCommented:
this one works for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#dp1").change(function(){
				if ( $(this).val() == "-1" )
				{
					$("#otherText").removeAttr("disabled");
				}
				else
				{
					$("#otherText").attr("disabled", "disabled");
				}
			});
		});
	</script>
</HEAD>

<BODY>
	<select id="dp1">
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
		<option value="-1">Other</option>
	</select>
	<input type="text" id="otherText" disabled/>
</BODY>
</HTML>

Open in new window

0
 
leakim971PluritechnicianCommented:
check this : http://jsfiddle.net/7HBUP/


<form name="formshipping">
    <select name="CUST_STATE" id="CUST_STATE"><option val="">Select One</option><option val="1">One</option></select><input id="t1" name="t1" type="text" value="" disabled="disabled" /><br>
    <select name="SHIP_STATE" id="SHIP_STATE"><option val="">Select One</option><option val="1">One</option></select><input id="t2" name="t2" type="text" value="" disabled="disabled" /><br>
</form>

Open in new window



$("#CUST_STATE").change(function() {
    if( $(this).prop("selectedIndex") == 0 ) {
        $("#t1").attr("disabled", true);
    }
    else {
        $("#t1").removeAttr("disabled");
    }
})

$("#SHIP_STATE").change(function() {
    if( $(this).prop("selectedIndex") == 0 ) {
        $("#t2").attr("disabled", true);
    }
    else {
        $("#t2").removeAttr("disabled");
    }
})

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
dkellnerCommented:
Something like this will help you:

 
<select id="myDropDown" onchange="changedIt(this)">
	<option value=1> One
	<option value=2> Two
	<option value=3> Three
	<option value="x"> Other ...
</select>
<textarea id="myTextBox"></textarea>

<script type="text/javascript">

	function changedIt(obj) {
		var state=(obj.value=="x")?1:0;
		$("#myTextBox").attr("disabled",state);
	}

</script>

Open in new window


(This example works if you ensure jQuery is included. Change the IDs as necessary, of course.
0
 
PdesignzPPC SpecialistAuthor Commented:
gurvinder372, I pasted your code and tried in Chrome, FF and IE and did not work in any browser.
0
 
Gurvinder Pal SinghCommented:
beg to disagree, check this fiddle :)
http://jsfiddle.net/gurvinder372/nPZVD/
0
 
PdesignzPPC SpecialistAuthor Commented:
You are correct, I had the wrong path to the jquery file. How would I do this with 2 drop downs and two text boxes, 1 dropdown for each text box.

Thanks
0
 
PdesignzPPC SpecialistAuthor Commented:
Great Work!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.