根据下拉选择填充文本框

Question

I have this javascript function hoping to populate a textbox based on drop down selection. I am just using the first option (there are 7 more options, but this should illustrate the issue):

<script>
function TicketsQuantity(){
  if (document.getElementByID("RaffleDollars").value == 25){
    (document.getElementById("RaffleTickets").value = "1");
  }
}
</script>    

Here is the drop down box code:

<select size="1" name="RaffleDollars" id="RaffleDollars" 
onChange="javascript:TicketsQuantity();">               
<option selected value="0.00">------Select $ Amount------</option>
<option value="25">25.00</option>
</select>

Here is the text box code:

<input name="RaffleTickets" size="5" id="RaffleTickets">

When I select 25.00 from the drop down box, it is not populating textbox with 1. Is my syntax incorrect? Any help would be appreciated. Thanks.

Answer 1

You have an error: getElementByID is incorrect. Change it to: getElementById .

Please correct your code to use the below. Remove javascript: here:

onChange="TicketsQuantity();"

Since you are using jquery , I would give you a jQuery based solution:

$(function () {
  $("#RaffleDollars").change(function () {
    if ($(this).val() == "25")
      $("#RaffleTickets").val("1");
  });
});

Working Snippet

 <select size="1" name="RaffleDollars" id="RaffleDollars" onChange="TicketsQuantity();"> <option selected value="0.00">------Select $ Amount------</option> <option value="25">25.00</option> </select> <input name="RaffleTickets" size="5" id="RaffleTickets"> <script> function TicketsQuantity() { if (document.getElementById("RaffleDollars").value == 25) { document.getElementById("RaffleTickets").value = "1"; } } </script>