34

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">
Flip
  • 4,701
  • 5
  • 32
  • 63
helgatheviking
  • 22,590
  • 11
  • 82
  • 134
  • 1
    Your fiddle works for me in firefox. I checked with Firebug whether the value of the hidden input changed and it does change when I select a different value in the dropdown. Maybe I don't understand the question, though :-) – StefanS Mar 13 '11 at 12:46
  • Works fine for me: The hidden input is changed in value in Chrome 9. In what browser(s) does it not work for you, and what method do you use to verify it? – Pekka Mar 13 '11 at 12:46
  • Why do you think it isn't working properly? Your fiddle seems to do exactly what you are telling it to do. – Aaron Mar 13 '11 at 12:47
  • 2
    Here is a [vegetarian option](http://jsfiddle.net/S9mUL/4/) (SCNR :) – Pekka Mar 13 '11 at 12:47
  • Why do you think it does not work? It seems the value is set: http://jsfiddle.net/S9mUL/6/ – Felix Kling Mar 13 '11 at 12:48
  • 1
    thanks everyone. you are all right and it does work. go me for writing functioning code. fail, on the not seeing that it works part. just goes to show that sometimes a break is the best course of action! and lol @pekka for the veggie option. – helgatheviking Mar 13 '11 at 14:23

4 Answers4

37

It's simple as:

$('#action').val("1");

#action is hidden input field id.

tomrozb
  • 23,522
  • 30
  • 89
  • 110
Yasir Aslam
  • 457
  • 1
  • 5
  • 9
  • Double quotes in val is not useful here, anyway if you pass a number : $('#action').val(1); – Medhi Apr 27 '20 at 13:21
24

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

alex
  • 438,662
  • 188
  • 837
  • 957
  • 3
    @max4ever You're reading the serialised HTML, where the `value` attribute will reflect its original value. One of the many reasons why you shouldn't use `innerHTML` related methods blindly. – alex Dec 29 '12 at 00:12
6

Seems to work

$(".selector").change(function() {

    var $value = $(this).val();

    var $title = $(this).children('option[value='+$value+']').html();

    $('#bacon').val($title);

});

Just check with your firebug. And don't put css on hidden input.

Santosh Linkha
  • 13,692
  • 17
  • 72
  • 113
  • 1
    does seem to work now. i was putting the CSS as a very crude jquery debugging tool... to see in firebug whether i'd used the right selector. i must've needed a break. fresh eyes and a full stomach have resolved what apparently wasn't broken (for once). – helgatheviking Mar 13 '11 at 14:20
0

If you're doing this in Drupal and use the Form API to change the #type from text to 'hidden' in hook_form_alter (for example), be advised that the output HTML will have different (or omitted) DIV wrappers, IDs and class names.

Joe Hyde
  • 959
  • 7
  • 17