Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Jquery form function help

Posted on 2011-09-21
8
184 Views
Last Modified: 2012-05-12
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!
0
Comment
Question by:Pdesignz
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575610
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36575621
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
 
LVL 3

Expert Comment

by:dkellner
ID: 36575638
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:Pdesignz
ID: 36575705
gurvinder372, I pasted your code and tried in Chrome, FF and IE and did not work in any browser.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575740
beg to disagree, check this fiddle :)
http://jsfiddle.net/gurvinder372/nPZVD/
0
 

Author Comment

by:Pdesignz
ID: 36575815
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
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 36577660
0
 

Author Closing Comment

by:Pdesignz
ID: 37217702
Great Work!!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question