Populate text box based on drop down selection

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>