Question

I have this asp:hiddenField control:

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

I would like to trigger its (server side) value changed event using Jquery:

Protected Sub AuxHiddenField_Changed(ByVal sender As Object, ByVal e As System.EventArgs) Handles AuxHiddenField.ValueChanged
    'some logic here      
End Sub

I tried:

$('#AuxHiddenField').val("Mohaha!!");   

Jquery fails to find the element and nothing happens.
How do I solve this?

Answer 1

ASP.net uses an algorithm to generate ClientID. By default it is based on the naming container’s the control is contained in successively.

It’s likely the ID in generated HTML is not AuxHiddenField but something like ctl00_AuxHiddenField.

Either set the ClientIDMode:

<asp:HiddenField ID="AuxHiddenField" runat="server" ClientIDMode="Static" />

Or in jquery, using attirute selectors:

$('input[id$=AuxHiddenField]')  // id ends with AuxHiddenField

I personnaly don’t like the <%= Field.ClientID %> way of doing this because if your javascript is in a separate file, it won’t be processed by asp.net.

Further reading:

• ClientID property
• All about ClientID mode in asp.net 4

---

Changing programmatically a value with javascript does not fire the change event, you have to trigger it manually:

$('input[id$=AuxHiddenField]').val("any val").change(); // or .trigger('change');

In action here.

---

About the ValueChanged event

Unfortunately, the HiddenField does not have the AutoPostBack property (makes sense afterall).
I think you will have to trigger a postback programmatically after changing the value.
If you are working ajax, use __doPostBack(), otherwise, submit your form document.forms[0].submit().

Another solution would be to replace the HiddenField by an invisible TextBox:

<asp:TextBox runat="server" ID="mytextbox" Value="" Style="display:none;" AutoPostBack="true" OnTextChanged="mytextbox_TextChanged"></asp:TextBox>

Changing the value programmatically will raise the event server-side.
Please note that for hiding the textbox, you should not use Visible="false because then it is not rendered in final html, use the Style="display:none;" property (css).