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

StackOverflow https://stackoverflow.com/questions/2109322

  •  22-09-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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());
})

OTHER TIPS

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.

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

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)

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.

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

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.

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") });

None of the above solutions worked for me.

I had to do the following to make it work:

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

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.

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();
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top