Updating textbox with dropdown value doesn't work in IE [JavaScript]

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?

tradyblix · Accepted Answer · 2011-05-13 11:17:31Z

3

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.

answered May 13, 2011 at 11:17

tradyblix

7,5843 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Turnip Over a year ago

Thank you. Works perfectly. I new there must be a better way to do this than my cobbled together method.

Šime Vidas · Accepted Answer · 2011-05-13 11:20:09Z

1

I've spent 5 minutes trying to figure out why your code doesn't work, only to find out you forgot the = character in your OPTION start tags. Grrrr.... :)

Replace <option value"01"> with <option value="01"> for every OPTION start tag.

Here you go:

$('#hours').change(function() {
    $('#hours_text').val( this.value );
});

Live demo: http://jsfiddle.net/ubrcq/

answered May 13, 2011 at 11:20

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

1 Comment

Turnip Over a year ago

Haha. Wow. I really am an idiot. Adding the = actually fixed it. I guess the other browsers are a little more intelligent than IE.

chrisfrancis27 · Accepted Answer · 2011-05-13 11:55:09Z

0

I don't see why you'd blank the value property and then immediately append more text using +=, you could achieve the same thing by simply setting the value property to this.value in one go.

Also, you are targeting the 'hours_text' element in 2 different ways:

document.getElementById('hours_text')

and

document.forms['time_form'].elements['hours_text']

It would be a little bit cleaner to assign to a variable like so:

var hours_text = document.getElementById('hours_text');
hours_text.value = this.value;

edited May 13, 2011 at 11:55

answered May 13, 2011 at 11:20

chrisfrancis27

4,5361 gold badge26 silver badges32 bronze badges

1 Comment

Turnip Over a year ago

I'm still getting to grips with Js. I make silly mistakes. thanks for the input.

Mrchief · Accepted Answer · 2012-05-01 16:55:38Z

0

function ChangeValue()
{
    $("#hours_text").val($("#hours").val());
}

<select name="hours" id="hours" class="time" onchange="ChangeValue()">
      <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" />

edited May 1, 2012 at 16:55

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

answered May 13, 2011 at 11:48

Mahesh KP

6,47613 gold badges54 silver badges71 bronze badges

Collectives™ on Stack Overflow

Updating textbox with dropdown value doesn't work in IE [JavaScript]

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related