Question

I’m trying to update the text in a textbox when a value is selected from a dropdown form element using onchange().

This works fine in Firefox, Safari, Chrome but not in Internet Explorer.

Here’s the stripped down code:

<script type="text/javascript">
$(document).ready(function(){
   document.forms['time_form'].elements['hours'].onchange = function(){
   document.getElementById('hours_text').value = '';     // Clear the current value
   document.forms['time_form'].elements['hours_text'].value += this.value;              
   };
});
</script>

<select name="hours" id="hours" class="time">
      <option value"01">01</option>
      <option value"02">02</option>
      <option value"03">03</option>
      <option value"04">04</option>
      <option value"05">05</option>
      <option value"06">06</option>
      etc...
</select>
<input type="text" id="hours_text" name="hours_text" value="01" />

The current text is cleared as it should be but not updated with the new value.
Any ideas what’s going on? Is this my error or IE’s?

Answer 1

Change your code to something like:

$(document).ready(function(){
    // apply a change event
    $('#hours').change(function() {
        // update input box with the currently selected value
        $('#hours_text').val($(this).val());
    });
});

You are using jQuery already so make use of it’s abilties to control the events of an element and write your code the jQuery way. Do not mix code such as onchange on this (although it may work) but it’s better to make things consistent.