CODEWITHSUNDEEP
javascript
Anne Mah Li'en
Anne Mah Li'en

Reputation: 69

Populating selected value from dropdownlist into textbox

I'am following an example from http://jsfiddle.net/ubrcq/
But I cant seem to get it up. below are my codes

<html>
<head>
 <script type="text/javascript">

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

</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>

<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>
</select>

<input type="text" id="hours_text" name="hours_text" value="01">

 </body>
</html>

Upvotes: 3

Views: 2364

Answers (3)

james
james

Reputation: 1

You have to include a jQuery for it 

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">

  </style>



<script type="text/javascript">//<![CDATA[ 
$(function(){
$('#hours').change(function() {
    $('#hours_text').val( this.value );
});
});//]]>  

</script>


</head>
<body cz-shortcut-listen="true">
  <select name="hours" id="hours" class="time">
    <option value="01" selected="">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>
</select>

<input type="text" id="hours_text" name="hours_text" value="01">

</body></html>

Upvotes: 0

Talha
Talha

Reputation: 19252

put your code in document.ready function

 $(document).ready(function () {
  $('#hours').change(function() {
   $('#hours_text').val( $(this).val() );
 });​
});

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83356

Your problem is that your script is in your document's head section, and is being run prior to the dom being ready. As a result, $('#hours') is not selecting anything, and so no event handler is being wired up.

Wrap that code in a document.ready handler:

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

Or, you could move this entire script to the very end of your document's body, causing it to be parsed after the body has been processed, and available.

Upvotes: 2

Related Questions