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?

Alex
  • 11,115
  • 12
  • 51
  • 64
framomo86
  • 1,205
  • 2
  • 14
  • 17
  • 5
    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. – Brian Webster Jun 29 '12 at 18:52
  • Would it help if you give the input field an initial value? (even if it is an empty string) – Jasper De Bruijn Jan 21 '10 at 13:08

11 Answers11

26

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());
})
Fermin
  • 34,961
  • 21
  • 83
  • 129
  • 17
    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". – jjmontes May 31 '11 at 12:56
  • there is this weird thing when you need to clone hidden input http://jsfiddle.net/YvBfP/ – max4ever Dec 28 '12 at 14:32
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.

Brad Mace
  • 27,194
  • 17
  • 102
  • 148
framomo86
  • 1,205
  • 2
  • 14
  • 17
  • 1
    I recommend using a dev tool like firebug for firefox to see dynamic source code more easily. – David Hellsing Jan 21 '10 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. – Brad Mace Oct 12 '12 at 15:42
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

Jacob Tomlinson
  • 3,341
  • 2
  • 31
  • 62
  • 3
    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. – Hoàng Long Dec 20 '11 at 08:15
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)

Stevie G
  • 41
  • 1
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.

Samuel Harmer
  • 4,264
  • 5
  • 33
  • 67
Remo Harsono
  • 469
  • 9
  • 15
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

Andrew G. Johnson
  • 26,603
  • 30
  • 91
  • 135
  • héhé ... I had two the same id's in two forms, and your answer made me think about checking this ... thanks ! – citraL Jun 06 '12 at 15:33
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") });
Giridhar Karnik
  • 2,213
  • 4
  • 27
  • 47
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.

mtom
  • 151
  • 1
  • 7
  • 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. – Erik Kalkoken Nov 27 '17 at 22:52
0

None of the above solutions worked for me.

I had to do the following to make it work:

$('#foo').val(data).blur();
Venkatesh Nannan
  • 1,667
  • 1
  • 15
  • 25
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.

Noris
  • 157
  • 1
  • 6
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();
doublejosh
  • 5,548
  • 4
  • 39
  • 45