Link to home
Start Free TrialLog in
Avatar of Pdesignz
PdesignzFlag for United States of America

asked on

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!
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

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

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

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.
Avatar of Pdesignz

ASKER

gurvinder372, I pasted your code and tried in Chrome, FF and IE and did not work in any browser.
beg to disagree, check this fiddle :)
http://jsfiddle.net/gurvinder372/nPZVD/
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
ASKER CERTIFIED SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Great Work!!