Solved

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

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

This article will show, step by step, how to integrate R code into a R Sweave document
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

760 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now