helgatheviking helgatheviking - 17 days ago 5
jQuery Question

JQuery: Change value of hidden input field

I'm having a hella time setting the value of a hidden input.

I want to pass the HTML from between the option tags to the hidden field- end run it will the page title from wordpress'

wp_list_dropdowns()
. I've got it returning the text just fine, and on my change event it correctly adds some css (obviously unneeded on a hidden field, but I was trying to determine where things are breaking down). Works if I change the hidden input to a text input. I've seen in several places on SO that this is possible, (changing the value of a hidden input that is), but something is holding me up now and I can't see the answer.

Here's the JSFiddle:

JavaScript:

$(".selector").change(function() {
var $value = $(this).val();
var $title = $(this).children('option[value='+$value+']').html();
alert($title);
$('input#bacon').val($title).css('border','3px solid blue');
});


HTML:

<select class="selector" name="testselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</h3>

<input id="bacon" type="hidden" class="bacon" value="" name="testinput">

Answer

Your jQuery code works perfectly. The hidden field is being updated.