Passing a Javascript-updated value from to ASP.NET code behind

I’ve got a set of buttons in my ASP.NET webpage that look like this:

<input id="B1" type="button" onclick="return change(this)" value="A" runat="server" />

The Javascript function would allow the button value to change between a set of values when clicked.

function change(elem)
    {
        if (elem.value === "A")
            elem.value = "B";
        else if (elem.value === "B")
            elem.value = "C";
        else
            elem.value = "A";
    }

In the code behind, the button value is passed into a SQL query:

cmd.Parameters.AddWithValue("@b1", B1.Value);

Ideally, when the entire webpage form is submitted, the current button values should be passed to the code behind. When inspecting the change through inspecting the element, I can verify that the value does update to the next option, and so on. But it seems to only pass the hardcoded value found in the input tag, ie. value “A” is sent to the code behind, regardless of whether the user changed the value to the other options.

There are no issues with the SQL query, as the “default” button values are inserted into the database.

Any insights would help. Thanks in advance.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

when you use type=”button” changed value can’t be captured on post back, may be you could try using hidden input elements to achieve.

<script>
    function change(elem) {

        if (elem.value === "A")
            elem.value = "B";
        else if (elem.value === "B")
            elem.value = "C";
        else
            elem.value = "A";
        document.getElementById("<%=B1.ClientID%>").value = elem.value;

    }
</script>

HTML

 <input type="button" onclick="return change(this)" value="A" runat="server" />
<input id="B1" type="hidden" value="A" runat="server" />
<script

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0