Can't set hidden input field's value using jQuery

L

11

35

I have a simple input field inside a form tag:

<body>
  <form action="#">
      <label>Input</label>
      <input type="hidden" id="foo" name="foo" />

  </form>
</body>

I tried to set this value from a js file:

$(document).ready(function(){
    $('#foo').val('foo')
})

but in the html source the attribute isn't set at all. If I try to set the input type to "button" or anything else, it works. I just can't do it with a hidden input field. What am I doing wrong?

Laryngoscope answered 21/1, 2010 at 13:2 Comment(2)

Would it help if you give the input field an initial value? (even if it is an empty string) – Redfaced 21/1, 2010 at 13:8

The accepted answer does not answer the actual question, despite being helpful in leading to a solution. It's probably better to accept an actually correct answer seeing as this question gets 10k+ views per year. – Roof 29/6, 2012 at 18:52

A

25

Can you retrieve the value from the hidden field if you set the val tag?

e.g.

<input type="hidden" id="foo" name="foo" value="bar" />

$(document).ready(function(){
  alert($('#foo').val());
})

Aphanite answered 21/1, 2010 at 13:9 Comment(2)

Just to clarify: author was trying to see the modified value using "See Source Code". Note changes done to DOM dynamically are not visible through "See Source Code". – Millen 31/5, 2011 at 12:56

there is this weird thing when you need to clone hidden input jsfiddle.net/YvBfP – Stegall 28/12, 2012 at 14:32

L

25

I figured it out. The value was set by jQuery but when I viewed the source the new value wasn't shown. I tried this (thanks to Fermin):

$('#foo').val('poo')
alert($('#foo').val())

and it displayed the modified value.

Laryngoscope answered 21/1, 2010 at 13:18 Comment(2)

I recommend using a dev tool like firebug for firefox to see dynamic source code more easily. – Meraree 21/1, 2010 at 13:23

Firefox's Web Developer plugin also has a 'View Generated Source' tool which will show the source with all the javascript changes applied. – Lenity 12/10, 2012 at 15:42

Z

22

The best answer I found was in the form http://forum.jquery.com/topic/passing-value-to-hidden-form-field.

Instead of $('#Data').val(data); Where the hidden field ID is 'Data'

Use $('input[name=Data]').val(data);

Works perfectly for me

Zonate answered 19/10, 2011 at 13:53 Comment(1)

it works because the "Data" here is the "name" of the input, not id. Anyway, an up-vote from me because I forgot that as well. – Graft 20/12, 2011 at 8:15

P

4

I have also been struggling with this. If you set an initial value say '0', and then watch the DOM using something like Firebug you will notice that the DOM then updates. For some reason if the initial value is set to null or an empty string, the DOM does not update, but the value is actually still stored.

You can test this by alerting the val after you have set it (as suggested in earlier posts)

Pistol answered 15/10, 2010 at 11:9 Comment(0)

B

2

I've had this problem when POST-ing my form and my PHP script couldn't get POST-ed value. I used this:

$('#elemId').attr("name", theValue);

Hope it helps.

Bandbox answered 17/5, 2011 at 10:40 Comment(0)

E

1

I'd need to see the whole file but my guess is either you aren't including the jQuery.js source file or you have multiple elements with an ID of foo

Ecthyma answered 21/1, 2010 at 13:9 Comment(1)

héhé ... I had two the same id's in two forms, and your answer made me think about checking this ... thanks ! – Discussant 6/6, 2012 at 15:33

D

1

I had the same problem with a hidden input field. Id i set the initial value on 0, it works fine, but sometimes i didn't want to have an initial value of 0. So i tested with value=" ", a whitespace, and it works for me too. If you fill the value dynamic from PHP you could do value="<?= $val+0; ?>" if 0 is fine for you, or value="<?= $val; ?> " if a whitespace is fine.

Determine answered 20/10, 2010 at 9:51 Comment(1)

can confirm. When initializing the hidden input field with "", I have trouble updating it alter with jQuery. When initializing it with 0 it worked for me. – Mesomorph 27/11, 2017 at 22:52

T

1

I know that it's to late but still this might help someone.... If none of the above solutions work, just do this...

$(document).ready(function() {
$('#foo').attr("value","foo") });

Telephony answered 19/11, 2015 at 3:39 Comment(0)

R

0

None of the above solutions worked for me.

I had to do the following to make it work:

$('#foo').val(data).blur();

Rasheedarasher answered 19/7, 2013 at 4:55 Comment(0)

P

0

Rather then initialising your value attribute with an string initialise your input like this.

<input type="hidden" name="foo" id="foo" value="${foo}">

"foo" will contain the new value you set it too.

Purdum answered 12/2, 2015 at 9:37 Comment(0)

B

0

I've confirmed that setting the value of a hidden field does not work with a jQuery selector like this...

$('[name="my_field"]').val('Something');

Will not update a hidden field... kinda shocking.

<input type="hidden" name="my_field" id="my_field">

Was forced to use a CSS hidden field instead.

<input type="text" name="my_field" id="my_field" style="display:none">

Apparently there are other issues with using the id of a hidden field as well... Set value of hidden field in a form using jQuery's ".val()" doesn't work

Note: be sure to obtain the value in the console and not by inspecting.

$('[name="my_field"]').val();

Bynum answered 19/4, 2018 at 1:59 Comment(0)

Recommended topics

Hot tags