Not able to add text to hidden Input field

Question

Hi, I have the following HTMl:

<input id="brandID" name="brandID" type="hidden" value="" />

<select id="selectList" class="textfield70pc" name="selectList">
    <option selected="" value="221">A</option>
    <option value="4673">B</option>
</select>

Upon changing the value of a select box, I need to populate this input field. I've tried something like this, but it's not working.

      jQuery('#selectList').change(function(){
        jQuery('#brandID').attr('value', '123123');
      });

Suggestions anyone?

Update
This works though:

document.getElementById('brandID').value = '123'

But I would like to use jQuery.

Answer 1

jQuery('#selectList').live('change', function(){
  jQuery('#brandID').value = '123123';
});

And remember that IE won't fire the onchange event until the select loses focus.

Answer 2

Does this work?

jQuery('#selectList').bind('change', function(){
  jQuery('#brandID').val('123123');
});

EDIT:

From the jquery Live() documentation page:

Added in jQuery 1.3: Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events. Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

Answer 3

Change is not supported in jQuery live

Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

If you want to use live, use live query

---

EDIT: Your code above should work as it is, so maybe your selectList is formatted improperly?

This basic HTML made the above function work for me:

<select id="selectList">
 <option>1</option>
 <option>2</option>
</select>

Hmmm maybe you're just not seeing it update the HTML, but it does update the DOM (are you using firebug?) I added an alert to show the value and it showed the correct value

$(document).ready(function(){
 jQuery('#selectList').change(function(){
  jQuery('#brandID').attr('value', '123123');
  alert($('#brandID').val());
 });
})

Answer 4

just at first glace:

$(document).ready(function()
{
    $('#selectList').change(function() { $('#brandID').val('123123'); });
});

my assumptions: selectList is a valid ID somewhere.

IF this is an actual select list (implied by the name only), do you care what is selected?

$(document).ready(function()
{
    $('#selectList').change(function() { 
        mychoice = $('#selectList option:selected').text();
        $('#brandID').val(mychoice); 
    });
});

Answer 5

After reading all these good responses that haven't worked for you I have to ask the basic question -- are you running this Javascript within $(document).ready() or in a <script> tag after the <select> element? It has to be one or the other so that the DOM tree to contain the element before you set its properties.