Passing JavaScript-obtained variables to modal popup textBox in ASP.NET

Question

How can I pass a variable obtained through JavaScript to a textbox on a modal popup? I've tried using a hidden field and even a textbox on the parent page, inside or outside an update panel, but when I click on the link button that opens the modal popup, their values are reset to default. Despite trying various approaches, I can't seem to succeed.

I have a table in a repeater, and I need to determine the cells selected by the user: the start and ending cell of the selection. I achieve this with the provided JavaScript code. When the user selects one or more cells, I have the start/end values stored in two elements with runat="server" attributes. This is the javascript function:

$(function () {
            var mouse_down = false;
            var row, col;    // starting row and column
            var $tr;

            $("#tblPersonale td")
                .mousedown(function () {
                    $("#col_to").html('?');
                    mouse_down = true;

                    // clear last selection for a fresh start
                    $(".highlighted").removeClass("highlighted");
                    $(this).addClass("highlighted");

                    $tr = $(this).parent();
                    row = $tr.parent().find("tr").index($(this).parent());
                    col = $tr.find("td").index($(this));

                    $("#row").html(row);
                    $("#col_fr").html(col - 1);
                   
                    

                    return false; // prevent text selection
                })

                .mouseover(function () {
                    if (mouse_down) {
                        $("#col_to").html('?');
                        if ($tr[0] === $(this).parent()[0]) {
                            var col2 = $(this).parent().find("td").index($(this)); // current column
                            var col1 = col;
                            if (col > col2) { col1 = col2; col2 = col; }

                            $("#col_fr").html(col1-1);
                            $("#col_to").html(col2 - 1);
                            
                            // clear all selection to avoid extra cells selected
                            $(".highlighted").removeClass("highlighted");

                            // then select cells from col to col2
                            for (var i = col1; i <= col2; i++) {
                                if (col1>1){
                                    $tr[0].cells[i].className = "highlighted";}
                            }
                        }

                    }
                })
                .bind("selectstart", function () {
                    return false; // prevent text selction in IE
                })

            $(document)
                .mouseup(function () {
                    mouse_down = false;
                });
        });

So, when user selects one or more cells I have the start/end value in here:

<span id="col_fr" runat="server" enableviewstate="true">?</span>
<span id="col_to" runat="server" enableviewstate="true">?</span>

The link button I'm using to trigger the modal popup is as follows:

<asp:LinkButton runat="server" ID="lnkAddDip"  OnClick="lnkAddDip_Click">

I need assistance in ensuring that when the link button is clicked, the values obtained by JavaScript are preserved and can be utilized to populate a textbox within the modal popup. Any insights or solutions would be greatly appreciated.

Answer 1

Finally I did what I want by tuning the original javascript function. I added 3 hiddenfield on the page and then I add this bit

var hdncol_fr = document.getElementById("hdncol_fr").value;
var hdncol_to = document.getElementById("hdncol_to").value;
var hdnrow = document.getElementById("hdnrow").value;
if (hdncol_fr = '?'){
   document.getElementById("hdncol_fr").value = col - 1;
   document.getElementById("hdncol_to").value = col2 - 1;
   document.getElementById("hdnrow").value = row;
}

This way the hidden fields values are set only when user actively select some cells, when there is a postback event the javascript function returns '?' for the 3 values, so with the added code the hidden field maintains the previous values until user select something else.