Solved

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

Posted on 2009-04-01
2
3,710 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article will show, step by step, how to integrate R code into a R Sweave document
The viewer will learn how to count occurrences of each item in an array.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

821 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