Values lost on postback when changed by javascript

Question

I'm changing the ImageUrl of ImageButtons via Javascript when the user mouses over. On submit I want to inspect the ImageUrl property. However, the changed property is not reflected in the code behind. In fact, I'm also updating a span tag via javascript and its changed value is also not reflected on post back. These are all static html elements. I'm not creating any of these dynamically and am not doing any manipulation to them in the code behind.

HTML:

            <div style="margin: 20px 0 0 0; float: left;">
        <div class="divStars1" style="width: 130px; float: left;">
            <input type="image" name="ctl00$MainContent$ax1" id="MainContent_ax1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$ax2" id="MainContent_ax2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$ax3" id="MainContent_ax3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$ax4" id="MainContent_ax4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$ax5" id="MainContent_ax5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />

        </div>
        <div style="margin-top: 3px; width: 600px; float: left;">
            <span>axs</span>
        </div>
    </div>
    <div style="margin: 20px 0 0 0; float: left;">
        <div class="divStars2" style="width: 130px; float: left;">
            <input type="image" name="ctl00$MainContent$bx1" id="MainContent_bx1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$bx2" id="MainContent_bx2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$bx3" id="MainContent_bx3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$bx4" id="MainContent_bx4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            <input type="image" name="ctl00$MainContent$bx5" id="MainContent_bx5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
        </div>
        <div style="margin-top: 3px; width: 600px; float: left;">
            <span>bx blah blah</span>
        </div>
    </div>

Javascript:

        $(document).on("mouseover", "input.stars", function () {
        var score = 0;
        $("input.stars").each(function (index, element) {
            // element == this
            if ($(element).attr("src") == "style/FilledStar.png") {
                score = score + 1;
            };
        });
        score = score / 5;
        var n = score.toFixed(2);
        $("#MainContent_lblScore").text(n);
    });

btnSubmit_Click code:

        For Each ctrl As Control In Me.divSkill1.Controls
        If (TypeOf ctrl Is ImageButton) Then
            Dim imgCtl As ImageButton = TryCast(ctrl, ImageButton)
            Dim x As String = imgCtl.ImageUrl 'HERE'S THE PROBLEM... x always equals original static value!
        End If

    Next

Answer 1

The server does not know anything about changes on the client side for this type of controls. Possibly you will have to store the values ​​that have been changed by javascript in hidden field or hidden textbox and then collect this value on the server side.

Hope this helps

Edit:

If you only want to get the value of var n , you could do something like this:

// aspx;

<asp:HiddenField ID="HidScore" runat="server" />

/// javascript

$(document).on("mouseover", "input.stars", function () {
    var hid=$("#<%= HidScore.ClientID %>");


        var score = 0;
        $("input.stars").each(function (index, element) {
            // element == this
            if ($(element).attr("src") == "style/FilledStar.png") {
                score = score + 1;
            };
        });
        score = score / 5;
        var n = score.toFixed(2);
        $("#MainContent_lblScore").text(n);

    hid.val(n);
    });

and then in vb.net just grab the value : HidScore.value

Answer 2

Client side changes to server side controls will generally not be preserved or posted back to the server.

Consider creating a hidden field <asp:HiddenField /> control and have your JavaScript also updates that value. HiddenFields / <input type="hidden" /> will be returned to the server on a PostBack. Your code will then need to inspect the HiddenField for possible changes or updates and route those changes back to the ImageButton ImageUrl property.