Getting a DropDownList value to concatenate with String in a textbox

[uicouic]

Hi all. I need help about this particular aspect.

In a webform I have an <asp:textbox> (txtName) and <asp:DropDownLi st> (lstSchool) with 2 values inside.

I have typed in a value for the textbox. When I select an option from the dropdownlist, I would like that value(String) to be concatenated with the textbox's value. How do I achieve this in JavaScript?
(Microsoft Visual Studio 2005)

Any help/advice appreciated. Thanks.

[liawcv]

Let your TextBox's ID is "TextBox1", the following JS retrieve the text of the TextBox:

// tested with IE7 and FF3 only
var txt = document.getElementById("TextBox1");
var s1 = txt.value;

Let your DropDownList's ID is "DropDownList1", the following JS retrieve the selected item's value:

// tested with IE7 and FF3 only
var ddl = document.getElementById("DropDownList1");
var s2 = lst.value;

Somehow, that's no direct access to the selected item's text. Or, you can use the following JS to retrieve the selected item, then further down to its value / text:

// tested with IE7 and FF3 only
var ddl = document.getElementById("DropDownList1");
var i = ddl.selectedIndex;
var s3 = ddl.options[i].value;
var s4 = ddl.options[i].text;

When you combine the JS codes and make them work with your ASP.NET page, you should be careful since the Control ID is not promised to be same with the Client ID (the coming ASP.NET 4.0 allows us to fix the Client ID, luckily).

Let say: I have a TextBox named "TextBox1" and a DropDownList named "DropDownList1". I would like to have the TextBox's text and the DropDownList's selected item's text and value to be concatenated and being shown through a JS alert box when a Button named "Button1" is clicked.

1. Add a JS function to the .aspx file

...
// Client IDs of the TextBox and DropDownList are passed as parameters
// Use meaningful variable names for your case
function showResult(txtID, ddlID)
{
   var txt = document.getElementById(txtID);
   var ddl = document.getElementById(ddlID);
   var i = ddl.selectedIndex;

   var s1 = txt.value;
   var s2 = ddl.options[i].text;
   var s3 = ddl.options[i].value;  

   var result = s1 + " " + s2 + " " + s3;
   alert(result);
}
...

2. Attach the JS function call the the Button is .cs file

...
protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
      Button1.Attributes["onclick"] = string.Format(
         "showResult('{0}', '{1}'); return false;", TextBox1.ClientID, DropDownList1.ClientID);
      // Or set its OnClientClick property
   }
}
...

The following C# codes is equivalent if you don't like to use string.Format() :

...
Button1.Attributes["onclick"] =
   "showResult('" + TextBox1.ClientID + "', '" + DropDownList1.ClientID + "'); return false;";
...

Different scenarios, different solutions. Hope this can give you some ideas.

[uicouic]

Oh ok. Thanks alot liawcv!

Cheers! :)