0

I have a project I'm working on in webforms and I've run into a hitch trying to assign a value to a hidden form field and then accessing it from the code behind; which is resulting in a null value. I usually work on MVC applications, so I'm a bit confused.

This is the JQuery:

$('.button-submit').click(function () {
    var foo = 'bar';
    $('#hiddenField').val(foo);
});

This is my form:

<form id="form1" runat="server">

    <input type="hidden" id="hiddenField" value="" />

    <asp:Button ID="ButtonSubmit" runat="server" OnClick="ButtonSubmit_Click" Text="Add New"  class="button-submit" />

</form>

And this is in the code behind:

protected void ButtonSubmit_Click(object sender, EventArgs e)
{
    string hiddenFormValue = Request.Form["hiddenField"];
}

Request.Form["hiddenField"] is null. I also tried Request.Params and got a null. Any ideas on how I can either fix this code or recommended a better way to implement? I also tried to use an asp:HiddenField control, which was getting the assigned value (tested with alert($('#hiddenField').val()); but still ending up as an empty string in the code behind.

5 Answers 5

2

If you used asp:HiddenField control, js should be like this:

$('.button-submit').click(function () {
    var foo = 'bar';
    $('#<%=controlID.ClientID%>').val(foo);
});
1
  • I tried this and although the value gets assigned to the control (if I try alert($('#<%=controlID.ClientID%>').val()); I get the popup that says "bar", but if I insert a breakpoint in the code behind I'm still getting an empty string.
    – Ben
    Jan 16, 2013 at 18:32
1

The javaScript should use aspx reference like AV sujested

$('.button-submit').click(function () {
var foo = 'bar';
$('#<%=hiddenField.ClientID%>').val(foo);
});

And then you can access it directly

protected void ButtonSubmit_Click(object sender, EventArgs e) 
{
    string hiddenFormValue = hiddenField.Value; 
}

Although this may not be the best way to accomplish this

Perhaps try this instead:

<form id="form1" runat="server">

    <asp:hiddenfield  id="hiddenField" runnat="server" />

    <asp:Button ID="ButtonSubmit" runat="server" OnClick="javascript:FOO()" Text="Add New"   />

</form>

with the script

function FOO() {
    var foo = 'bar';
    $('#<%=hiddenFeild.ClientID %>').val(foo);
__doPostBack('<%=form1.ClientID %>', '');
}
0

I do not really get why you do not to use Asp hidden controll but even if you still want to do it your way I would recommend adding name

<form id="form1" runat="server">

    <input type="hidden" name="hiddenField" id="hiddenField" value="" />

    <asp:Button ID="ButtonSubmit" runat="server" OnClick="ButtonSubmit_Click" Text="Add New"  class="button-submit" />

</form>
1
  • I tried both; actually the asp control first. Neither are working for me.
    – Ben
    Jan 16, 2013 at 18:34
0

You need to tell it to run at the server in order for it to be accessible. You can access the value on the client side just fine, which is why alert($("#<%=hiddenField.ClientID%>").val()); will work. If you want to read the value on the server, then you need to run it at the server.

<input type="hidden" id="hiddenField" runat="server" value="" />

pretty sure this will solve your problem

0

Add ClientIDMode="Static" on the hidden field.

Refer to this link: https://stackoverflow.com/a/20903213/175111.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.