javascript handling of selectedItemIndexChanged?

**pbmods** · Aug 7 '07, 08:43 PM

Heya, JLC.

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

**JLC** · Aug 7 '07, 09:14 PM

I see that now...okay will do...thanks.

**pbmods** · Aug 7 '07, 09:41 PM

Heya, JLC.

To get the client and the server talking like that, you'll need to use AJAX.

How familiar are you with AJAX?

**JLC** · Aug 7 '07, 10:04 PM

Hi...

I am not familiar at all with ajax.

I can't write a javascript that changes the text in a text box based on the selection of a dropdownlist?

Seems like something I might do alot...but I am still learning so maybe that seems ridiculous! :)

It was easier just dealing with it in C# but I am told for this project I am not allowed to do it that way.

is AJAX difficult? do I really need to learn AJAX to accomplish this task?
thanks

**pbmods** · Aug 7 '07, 10:43 PM

Heya, JLC.

I suppose AJAX is not the only tool for the job. It's probably the best in the long term, but let's try this instead:

On the server side, generate the code to create a JavaScript variable for each drop down element. I don't know how you would do that using ASP, but here's how you might do it in PHP:
[code=php]
echo '
<script type="text/javascript">
var $dropdown = {
"Down": "' . $whatShouldGoIn TheTextBoxWhenT heUserPicksDown . '",
"Blocked": "' . $whatShouldGoIn TheTextBoxWhenT heUserPicksBloc ked . '",
etc.
};
</script>';
[/code]
When your script executes, this is an example of what gets sent to the browser:
[code=javascript]
<script type="text/javascript">
var $dropdown = {
"Down": "Some down stuff here!",
"Blocked": "Some blocked stuff here!"
};
</script>
[/code]
The browser will parse this and create the JavaScript variable called $dropdown. It is important to remember that PHP (or ASP) does NOT directly set the value of the JavaScript variable! This is a VERY common misconception, and anybody who is reading this should be aware of that!
Then include the JavaScript on the page that looks for that variable when the value of the select changes:
[code=html]
<select ... onchange="docum ent.getElementB yId('theTextBox ID').value = $dropdown[this.options[this.selectedIn dex].value];">
[/code]

For example, if the User were to pick the 'Down' option, then the Javascript would attempt to set the value of the text box to $dropdown['Down'], or "Some down stuff here!".

**JLC** · Aug 8 '07, 03:53 AM

Ok pbmods...I couldn't quite get it to work from what you were saying. I tried some other things here...but still not working. Can you take a look at this and see if you see anything horribly wrong?
Thanks.

[CODE=html]
<%@ Page Language="C#" AutoEventWireup ="true" CodeFile="Defau lt.aspx.cs" Inherits="_Defa ult" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitl ed Page</title>

<script type="text/javascript">
function EmailChangedTex t(ddid)
{
var selected = ddid.options[ddid.selectedIn dex].value;
Text1.Value = selected;

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownLi st ID="DropDownLis t1" runat="server">
<asp:ListItem Selected="true" Text="Down" Value="Down">Do wn</asp:ListItem>
<asp:ListItem Text="Deploying " Value="Deployin g">Deploying </asp:ListItem>
<asp:ListItem Text="Running" Value="Running" >Running</asp:ListItem>
</asp:DropDownLis t>
<input id="Text1" type="text" style="width: 490px; height: 268px" />

</div>
</form>
</body>
</html>

[/CODE]

and then in my .cs file

[CODE=asp]
using System;
using System.Data;
using System.Configur ation;
using System.Web;
using System.Web.Secu rity;
using System.Web.UI;
using System.Web.UI.W ebControls;
using System.Web.UI.W ebControls.WebP arts;
using System.Web.UI.H tmlControls;

public partial class _Default : System.Web.UI.P age
{
protected void Page_Load(objec t sender, EventArgs e)
{
DropDownList1.A ttributes.Add(" OnChange", "javascript : EmailChangedTex t(" + DropDownList1.C lientID + ")");

}
}

why wouldn't this just populate my text box with what the selection is in the drop down?

[/CODE]

Originally posted by pbmods

Heya, JLC.

I suppose AJAX is not the only tool for the job. It's probably the best in the long term, but let's try this instead:

On the server side, generate the code to create a JavaScript variable for each drop down element. I don't know how you would do that using ASP, but here's how you might do it in PHP:
[code=php]
echo '
<script type="text/javascript">
var $dropdown = {
"Down": "' . $whatShouldGoIn TheTextBoxWhenT heUserPicksDown . '",
"Blocked": "' . $whatShouldGoIn TheTextBoxWhenT heUserPicksBloc ked . '",
etc.
};
</script>';
[/code]
When your script executes, this is an example of what gets sent to the browser:
[code=javascript]
<script type="text/javascript">
var $dropdown = {
"Down": "Some down stuff here!",
"Blocked": "Some blocked stuff here!"
};
</script>
[/code]
The browser will parse this and create the JavaScript variable called $dropdown. It is important to remember that PHP (or ASP) does NOT directly set the value of the JavaScript variable! This is a VERY common misconception, and anybody who is reading this should be aware of that!
Then include the JavaScript on the page that looks for that variable when the value of the select changes:
[code=html]
<select ... onchange="docum ent.getElementB yId('theTextBox ID').value = $dropdown[this.options[this.selectedIn dex].value];">
[/code]

For example, if the User were to pick the 'Down' option, then the Javascript would attempt to set the value of the text box to $dropdown['Down'], or "Some down stuff here!".

**pbmods** · Aug 8 '07, 06:02 AM

Heya, JLC.

Horribly wrong? You mean ASIDE from the fact that you're programming in d-flat? Just kidding :P

The idea is to output JavaScript that stores the values that you want to put in the textbox into a variable.

**JLC** · Aug 8 '07, 06:47 PM

OK, well I got it working but only in this way

when I choose an item from the drop down list, it will display in an alert.

What I want to do is instead of displaying in an alert, I want it to display in my asp:textbox.

Code:

<script type="text/javascript">
    function EmailChangedText(ddid)
    {
        var selected = ddid.options[ddid.selectedIndex].value;
 
        alert(selected);   [B]<--this works[/B]
        EmailTextBox.Value = selected; [B]<--this does not but I want it to! :)[/B]
    }

</script>

Originally posted by pbmods

Heya, JLC.

Horribly wrong? You mean ASIDE from the fact that you're programming in d-flat? Just kidding :P

The idea is to output JavaScript that stores the values that you want to put in the textbox into a variable.

**pbmods** · Aug 8 '07, 07:56 PM

Heya, JLC.

I'm going to go ahead and move this thread to the ASP forum, where our resident Experts will be better able to help you out.

**JLC** · Aug 8 '07, 08:01 PM

ok thanks for all the help
I appreciate it...

Originally posted by pbmods

Heya, JLC.

I'm going to go ahead and move this thread to the ASP forum, where our resident Experts will be better able to help you out.

**jhardman** · Aug 8 '07, 11:33 PM

sorry, I'm passing the buck too. This belongs in .NET

Jared, moderator
asp forum

**Frinavale** · Aug 9 '07, 02:14 AM

Originally posted by jhardman

sorry, I'm passing the buck too. This belongs in .NET

Jared, moderator
asp forum

This problem has been solved in this thread

Cheers!

-Frinny

javascript handling of selectedItemIndexChanged?

javascript handling of selectedItemIndexChanged?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment