How to fill 2 text boxes by changing dropdownlist?

Question

I have tried to fill 2 text boxes when a DropdownList changed.

The text in text box 1 is Name of ID_1.
The text in text box 2 is Age of ID_1

And if I choose another choices in the dropdownlist, the text in text box 1 and text 2 will be changed.

For example,

+----+-----------+--------------+--------------+
| Dropdownlist   | TextBox1     | TextBox2     | 
+----------------+--------------+--------------+
| 1              | John         | 23           |
+----------------+--------------+--------------+
| 2              | Vivian       | 43           |
+----------------+--------------+--------------+

This is my database.

+----+-----------+--------------+
| id | Name      | Age          | 
+----+-----------+--------------+
| 1  | John      | 23           |
+----+-----------+--------------+
| 2  | Vivian    | 43           |
+----+-----------+--------------+

My code from .aspx

$('#<%:DropDownA.ClientID%>').change(function () {
  changeData();
});

function changeData() {
  var txt1 = $('#<%:DropDownA.ClientID%>').val();
  var txt2 = $('#<%:DropDownA.ClientID%>').val();
  $('input[id="TextBox1"]').val(txt1);
  $('input[id="TextBox2"]').val(txt2);
};

changeData();

<asp:DropDownList ID="DropDownA" runat="server" CssClass="form-control" DataSourceID="SqlDataFromDatabase" DataTextField="id" DataValueField="name"></asp:DropDownList>
<asp:SqlDataSource ID="SqlDataFromDatabase" runat="server" ConnectionString="<%$ ConnectionStrings:asrsDBConnectionString %>" SelectCommand="SELECT * FROM [table]"></asp:SqlDataSource>


<input class="form-control" id="TextBox1" value="xxxx" type="text" style="color: green;" disabled>
<input class="form-control" id="TextBox2" value="xxxx" type="text" style="color: green;" disabled>

Thank you in advance for giving me the solution or suggestion.

The Solution.

** Please follow this link for checking how to split the data: **
How to split the string using jQuery or JavaScript?

$('#<%:DropDownA.ClientID%>').change(function () {
  changeData();
});

function changeData() {
  var data1 = $('#<%:DropDownA.ClientID%>').val();
  var arr = data1.split(';');
  $('input[id="TextBox1"]').val(arr[0]);
  $('input[id="TextBox2"]').val(arr[1]);
};

changeData();

<asp:DropDownList ID="DropDownA" runat="server" CssClass="form-control" DataSourceID="SqlDataFromDatabase" DataTextField="id" DataValueField="name"></asp:DropDownList>
<asp:SqlDataSource ID="SqlDataFromDatabase" runat="server" ConnectionString="<%$ ConnectionStrings:asrsDBConnectionString %>" SelectCommand="Select (Name + ';' + Age) NameAge, id from [table]"></asp:SqlDataSource>


<input class="form-control" id="TextBox1" value="xxxx" type="text" style="color: green;" disabled>
<input class="form-control" id="TextBox2" value="xxxx" type="text" style="color: green;" disabled>

score 0 · Accepted Answer · answered Sep 22 '17 at 13:29

Solution #1: Drop-Down List Value

This solution would require you to store the pertinent information in the Value & Key attributes of the Drop Down List. So your SQL statement would need to look like this: Select (Name + ';' + age) NameAge, Id from [table]

With this SQL Statement, you could then change your DropDownList DataValueField field to NameAge and split the key-value pair on SelectIndexChanged event to fill the two associated TextBoxe, when the PostBack occurs

Solution #2: Hidden reference values

Less ideal but will depend on your situation.

Basically, you have a Hidden Input field that holds ALL possible meta-data for the DropDown List and based on selection the pertinent information is extracted for further use in other locations. Think of this like a Flat-file style storage mechanism.

This solution usually will require jquery/javascript to perform, as the data would generally be stored as json. Although, you could do a hierarchical CSV type design.

The solution #1 is worked !! . Thank you for the solutions and suggestion. I will edit my post then add my worked code :) — K.Olagon, Sep 22 '17 at 14:30

How to fill 2 text boxes by changing dropdownlist?

1 Answers1

Solution #1: Drop-Down List Value

Solution #2: Hidden reference values