Textbox value updated from javascript isn't present when code executes from behind

Question

I have a case where the value of textbox is fetched from database on page load. On button clicks, I update the textbox using javascript. But when I try to save the value to database, the new value updated doesn't exist. How do I save the information updated through javascript. Please help me out.

Below javascript function adds information to textbox ApproverListObj. On page load, I populate all requirement from database using select query.

    function AddButtonApproverList() {
        var ApproverListObj = document.getElementById("<%=ApproverList.ClientID%>");
        var ApproverListDDObj = document.getElementById("<%=ApproverListDD.ClientID%>");
        var output;

        if (ApproverListObj.value.includes(ApproverListDDObj.options[ApproverListDDObj.selectedIndex].text) == false) {
            document.getElementById("<%=ChangesMade.ClientID%>").value = "1";
            output = ApproverListObj.value.concat(ApproverListDDObj.options[ApproverListDDObj.selectedIndex].text, "; \n");
            ApproverListObj.value = output;
        }
        return false;
    }

Once I update the code using javascript, on submit button, I update the database as below.

    protected void SubmitClaim_Click(object sender, EventArgs e)
    {
        string cmdString = null, approverList = null;
        DisposeConnIfRequired();
        Conn = new SqlConnection(LoginDbCS);

        approverList = "[" + ClaimTypeDD.SelectedItem.Text + "ApproverList]";
        cmdString = ("UPDATE dbo.AdminDetails SET " + approverList + "=@ApproverList");

        SqlCommand cmd = new SqlCommand(cmdString, Conn);
        try
        {
            cmd.Parameters.Add("ApproverList", SqlDbType.NVarChar).Value = ApproverList.Text;
            if (Conn.State.Equals(ConnectionState.Closed))
            {
                Conn.Open();
                cmd.ExecuteNonQuery();
                Conn.Close();
            }
        }
        catch (Exception Ex)
        {
            if (Conn != null)
                Conn.Dispose();

            Application["TheException"] = Ex;
            Response.Redirect("ErrPage.aspx", false);
            return;
        }
    }

But when I inspect ApproverList, the changes made using javascript isn't there. I am not sure what's happening here.

Answer 1

To achieve this, I had to remove disable or readonly property of the textbox. Instead wrote javascript to return false on the following events onkeypress, onkeydown and onkeyup. This will block user from editing the textbox using keyboard. Since I had already disabled right right click functionality, I didn't have to bother about that.