Solved

Jquery form function help

Posted on 2011-09-21
8
183 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
VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

 

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Get Duration of Audio On Load Rather Than Click 3 36
Html test in IIS 4 20
Passport Expiry 3 44
asp.net mvc5 6 16
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

773 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