Solved

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

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
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…

911 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

17 Experts available now in Live!

Get 1:1 Help Now