Solved

Using JQuery and a drop-down Select field to populate multiple text fields

Posted on 2009-04-01
2
3,709 Views
Last Modified: 2012-05-06
I have a simple drop-down select field in a form which contains 4 other text fields. When a user selects an item from the select list, I want to change the default value in the 4 other fields based on the selected item.
I'd like to do so using JQuery.
The select field is generated on the server from mysql database. I can generate anything necessary in the Javascript.

I was thinking I could generate a Javascript Array containing the necessary data to populate the text fields.
Is this method feasible? Please provide an example.
0
Comment
Question by:bhlang
2 Comments
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 250 total points
ID: 24048562
Look at the code.
Perhaps it's working for you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>DropDownList Populate</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    </head>
<body>
<script type="text/javascript">
// array list generated on the server
var tbValues = [];
tbValues["1"] = ['The first textbox', '', 'The 3rd', 'Last but not least; the 4th'];
tbValues["2"] = ['The first textbox', 'The second one', 'The 3rd', 'Last but not least; the 4th'];
tbValues["option3"] = ['3 : The first textbox', '3 : The second', '3 : The 3rd', '3 : Last but not least; the 4th'];
tbValues["4"] = ['4 - empty', '4 - The second', '4 - The 3rd', '4 - Last but not least; the 4th'];
 
function changeDropDownList() {
	var val = $(this).val();
	if (val != "") {
		$("#myTextBox1").val(tbValues[val][0]);
		$("#myTextBox2").val(tbValues[val][1]);
		$("#myTextBox3").val(tbValues[val][2]);
		$("#myTextBox4").val(tbValues[val][3]);
	} else {
		// Clear the textboxes
		$("#myTextBox1").val(val);
		$("#myTextBox2").val(val);
		$("#myTextBox3").val(val);
		$("#myTextBox4").val(val);
	}
}
 
$(function() {
	// Bind the change event
	$("#myDropDownList").bind("change", changeDropDownList);
});
</script>
	<form>
		<select id="myDropDownList">
			<option value="">Please select</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="option3">Three</option>
			<option value="4">Four</option>
		</select>
		<input type="text" id="myTextBox1" />
		<input type="text" id="myTextBox2" />
		<input type="text" id="myTextBox3" />
		<input type="text" id="myTextBox4" />
	</form>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:bhlang
ID: 31565578
First class solution! Thank you very much.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

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 …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

786 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