Assigning a value to a hidden form field with JQuery in asp.net webforms

Question

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.

Anujith · Accepted Answer · 2013-01-16 18:15:10Z

2

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

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

answered Jan 16, 2013 at 18:15

Anujith

9,3686 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Over a year ago

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.

grey_hat · Accepted Answer · 2013-01-16 18:38:42Z

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 %>', '');
}

COLD TOLD · Accepted Answer · 2013-01-16 18:17:14Z

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>

answered Jan 16, 2013 at 18:17

COLD TOLD

13.6k3 gold badges37 silver badges53 bronze badges

1 Comment

Ben Over a year ago

I tried both; actually the asp control first. Neither are working for me.

Kevin · Accepted Answer · 2013-01-16 19:07:51Z

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

edited Jan 16, 2013 at 19:07

answered Jan 16, 2013 at 18:50

Kevin

2,8221 gold badge26 silver badges46 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:49:45Z

0

Add ClientIDMode="Static" on the hidden field.

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

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Mar 3, 2014 at 18:42

bluwater2001

7,9695 gold badges27 silver badges21 bronze badges

Collectives™ on Stack Overflow

Assigning a value to a hidden form field with JQuery in asp.net webforms

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related