Hi,

I have run into a problem regarding how to retrieve values on server side of the controls that have been modified by javascript on the client side?

the scenario includes 2 dropdowns which are linked togather through java script in a parent child relationship

on changing the parent the corresponding child items are filled in the other dropdown, but when the user selects the values and submits the form, I dont get the selected values that the user selected

we used java scripts to increase performance of our online ERP, the forms are too large and postbacks take a long time

any idea on how to do that?, sample code is posted below:

aspx code:

<script language="javascript">
        function updateSelection(){

            var ddlChild = document.getElementById("ddlChild");
            var ddlParent = document.getElementById("ddlParent");

            var arrParent;
            var arrChild;

            arrParent = createSubArray(3,2);
            arrChild = createSubArray(6,3);

            arrParent[0][0] = "1";
            arrParent[0][1] = "Stationary";

            arrParent[1][0] = "2";
            arrParent[1][1] = "Books";

            arrParent[2][0] = "3";
            arrParent[2][1] = "Electronics";

            arrChild[0][0] = "1";
            arrChild[0][1] = "1";
            arrChild[0][2] = "Pen";

            arrChild[1][0] = "1";
            arrChild[1][1] = "2";
            arrChild[1][2] = "Pencil";

            arrChild[2][0] = "2";
            arrChild[2][1] = "1";
            arrChild[2][2] = "Ivor Horton C++";

            arrChild[3][0] = "3";
            arrChild[3][1] = "1";
            arrChild[3][2] = "Cell Phone";

            arrChild[4][0] = "3";
            arrChild[4][1] = "2";
            arrChild[4][2] = "Mouse";

            arrChild[5][0] = "3";
            arrChild[5][1] = "3";
            arrChild[5][2] = "Keyboard";

            var i=0;
            ddlChild.innerHTML="";
            for (var j=0;j<arrChild.length;j++){
                if (ddlParent.value == arrChild[j][0]) {
                    ddlChild[i++] = new Option(arrChild[j][2],arrChild[j][1]);
                }
            }

        }
        function createSubArray(parentArraySize,childArraySize){
            var a = new Array(parentArraySize);
            for(var i=0;i<a.length;i++){
                a[i] = new Array(childArraySize);
                for(var j=0;j<childArraySize;j++){
                    a[i][j]= i + "-" + j;
                }
            }
            return(a);
        }
        </script>


<form id="Form1" method="post" runat="server">
            <asp:dropdownlist id="ddlCurrencyFrom" style="Z-INDEX: 101; LEFT: 80px; POSITION: absolute; TOP: 32px"
                runat="server"></asp:dropdownlist>
            <asp:Label id="lblResult" style="Z-INDEX: 111; LEFT: 40px; POSITION: absolute; TOP: 200px"
                runat="server">Result</asp:Label>
            <asp:Button id="btnServerResult" style="Z-INDEX: 110; LEFT: 160px; POSITION: absolute; TOP: 240px"
                runat="server" Width="184px" Text="Get Values On Server Side"></asp:Button><SELECT id="ddlChild" style="Z-INDEX: 109; LEFT: 184px; WIDTH: 144px; POSITION: absolute; TOP: 200px"
                runat="server">
                <OPTION selected></OPTION>
            </SELECT><SELECT id="ddlParent" style="Z-INDEX: 108; LEFT: 184px; WIDTH: 144px; POSITION: absolute; TOP: 152px"
                onchange="javascript:updateSelection();" runat="server">
                <OPTION value="1" selected>Stationary</OPTION>
                <OPTION value="2">Books</OPTION>
                <OPTION value="3">Electronics</OPTION>
            </SELECT>
</body>
</html>

SERVER SIDE:

Private Sub btnServerResult_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnServerResult.Click
        lblResult.Text = ddlChild.SelectedIndex
    End Sub

you can use one hidden server side control and when user submit form, you can put selected value of dropdown to that hidden field in javascript, and at server side you can use value of that hidden field.

Avanish

Hi Avanish,

unfortunately its not that simple, no matter what I use at the server side, it gets modified when its posted back when the view state gets restored..

I tried your suggestion after your post too...

I found an article that is specific to this problem, but the way I see it, you have to make it a web user control in order for it to be feasable, otherwise you'd go implementing IPostbackDataHandler in all form classes

http://www.codeproject.com/aspnet/DblPanePickList.asp

Hi,

Danish here again, one of my collegues found that we can get the value of the control modified by javascript by using Request.Params.Key("<controlNameHere>")

Its just weird behavior I cant understand, we have javascript datepicker controls and they dont cause any problems, I dunno whats up with lists.... we usually run into problems with them whenever we modify the list values

Danish,

Unless you use ASP.NET server controls and populate them on the server side, you will definately see some strange things happen. However, there is nothing weird about their behavior. ASP.NET stores the states of its controls in the viewstate. If you are using HTML controls (<select...>) you won't necessarily get all the states saved properly. And you most certainly won't get desired behavior if you change certain controls thru javascript.

As you have found, you can call the request class and get the raw data from the posted form and work with it that way. But you risk having things break at some point because of the control hierarchy. An example is if you put your above code in a user control, the control IDs that get emitted to the HTML stream will be indeterminant so you have to take that into account.

I have made extensive use of the HTML hidden form input field to do lots of client-side manipulation of data and get it back reliably at the server. It can be done, you just have to know which controls to use and how they behave between the server and the client.

-Peter