Getting the value of a hidden field

Question

I have an ASP.NET page with three hidden fields. (Just one would do if I can get it to work. Just showing that I've tried several things.)

<input type="hidden" id="hiddenSkillId1" runat="server" />
<input type="hidden" id="hiddenSkillId2" />
<asp:HiddenField ID="hiddenSkillId3" runat="server"/>    

I also have a JavaScript function that is being called by an AJAXControlToolKit.AutoCompleteExtender.OnClientItemSelected event:

<script type="text/javascript">
function SkillPartialMatchSelected(source, eventArgs ) {
    document.getElementById("ctl00_Content_hiddenSkillId1").Value = eventArgs.get_value();
    document.getElementById("hiddenSkillId2").Value = eventArgs.get_value();
    document.getElementById("ctl00_Content_hiddenSkillId3").Value = eventArgs.get_value();
}
</script>

Using a break point and inspecting the values, I have confirmed that the vales are being set on the Client side.

Finally I have C# code behind for the page that is connected to a LinkButton OnClick event.

protected void AddSkillToProspect(object sender, EventArgs e)
{
   string selectedKey1 = Request.Form[hiddenSkillId1.ClientID];
   string selectedKey2 = Request.Form["hiddenSkillId2"];
   string selectedKey3 = Request.Form[hiddenSkillId3.ClientID];
   string selectedItem = SkillNameBox.Text.Trim();   
   ...
}

All three selectedKey values are null but the selectedItem value from the ASP.NET Text Edit has a value.

From what I've read, one of these should work. Am I missing something? What can I do to get the value from a JavaScript function on the client side back to the server side?

Answer 1

The problem is related to case-sensitivity in JavaScript. Although you have set the .Value for these fields, that is not the same as the .value. Change your javascript to set the .value and you should be all set.

<script type="text/javascript">
function SkillPartialMatchSelected(source, eventArgs )     
{
    document.getElementById("ctl00_Content_hiddenSkillId1").value = eventArgs.get_value();
    document.getElementById("hiddenSkillId2").value = eventArgs.get_value();
    document.getElementById("ctl00_Content_hiddenSkillId3").value = eventArgs.get_value(); 
} 
</script> 

Answer 2

your hiddens controls have runat=server on them means they are server control and you can access them by their id in your code behind

this way the difference will hiddenSkillId1 is a htmlserver control, hiddenSkillId2 normal html control and this one hiddenSkillId3 is an asp.net control

string selectedKey1 = hiddenSkillId1.Value;
string selectedKey3 = hiddenSkillId3.Text;
string selectedKey2 = Request.Form[hiddenSkillId2];

So please try using it this way