Setting the value of an input through javascript

Question

What I'm trying to do is to change a behind-the-code C# veriable's value through javascript. My code:

HTML & JS -

function SetPostbackValues() {
    document.getElementById("hiddenControl").value = "Employer";
}
function SetPostbackValues2() {
    document.getElementById("hiddenControl").value = "Employee";
}

<!-- it's all inaide a form tag  -->
<div id="left">
  <div id="background" style="background: url(paper.gif); background-size: cover;" onclick="chg();SetPostbackValues();"><img id="man" style="right:16px;" src="https://www.watertankfactory.com.au/wp-content/uploads/2015/08/Smiling-young-casual-man-2.png" />    <div id="desc">employer</div>
  </div>
    <div id="trying"></div>
  </div>
  <div id="right">
    <div id="background2" style="background: url(paper.gif); background-size: cover;" onclick="chg();SetPostbackValues2();"><img id="man2" style="right:16px;" src="https://www.watertankfactory.com.au/wp-content/uploads/2015/08/Smiling-young-casual-man-2.png" /><div id="desc2">employee</div>
  </div>
</div>
    <input id="hiddenControl" type="hidden" runat="server" />

C# -

protected void RegisterUser()
        {
        //this will run when the client presses on the 'register' button
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Record Inserted Successfully')", true);
        u.Email = Email.Text;
        u.Password = Password.Text;
        u.Firstname = Firstname.Text;
        u.Lastname = Lastname.Text;
        u.Gender = Gender.SelectedItem.Text;
        //relevant bit:
        u.Type = hiddenControl.Value;
        u.Birthday = Birthday.SelectedDate.ToString("dd/MM/yyyy");
        u.Country = Country.Text;
        u.City = City.Text;
        u.Address = Address.Text;

        if (Pfp.HasFile)
        {
            string path = Server.MapPath("pics/");
            Pfp.SaveAs(path + Pfp.FileName);
            u.Pfp = Pfp.FileName;
        }
        s.AddClient(u);
    }

So when the client first enters the site, they'll press on either background or background2 which are supposed to set a value to the hidden input, which will be used in the registration function behind the code. When I set a breakpoint, I saw the value always was just an empty string - "" throughout all my iterations (tried setting a To.String() to it in C#, and removing the "" around the value in javascript, and nothing worked). I can't figure out why it won't set a value...

Thanks for any help!

Answer 1

Found the solution, it was the ID...

In your code, the ASP elements' ID is server-side. But when you run the code, the ASP element's ID in the client-side is different. In the javascript script, the functions are looking for an element matching the server-side ID, which they will never find, hence why the hidden element's value will stay an empty string.

TLDR - write it like this to prevent the script from detecting a (seemingly) nonexistent element in the client-side's code:

function SetPostbackValues() {
        document.getElementById('<%= hiddenControl.ClientID %>').value = "Employer";
    }
function SetPostbackValues2() {
        document.getElementById('<%= hiddenControl.ClientID %>').value = "Employee";
    }