Change input value on change and on page load

October 10, 2023

The following code works on change of the select box but not on page load.

I tried wrapping the following jQuery with $( document ).ready(function() { //code// }); but that didn’t work.

jQuery:

function hotelCheck(that) {
if (that.value == "1") {
        $('#decimal').val('0.00');
        $("#decimal").prop('disabled', true);
    } else {
        $("#decimal").prop('disabled', false);
    }
}

HTML:

<select onchange="hotelCheck(this);">
    <option value="2">Hotel 1</option>
    <option value="3">Hotel 2</option>
    <option value="4">Hotel 3</option>
    <option value="1" selected>No Hotel</option>
</select>

Can anyone help?

Thanks.

function hotelCheck(that) {
if (that.value == "1") {
        $('#decimal').val('0.00');
        $("#decimal").prop('disabled', true);
    } else {
        $("#decimal").prop('disabled', false);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select onchange="hotelCheck(this);">
    <option value="2">Hotel 1</option>
    <option value="3">Hotel 2</option>
    <option value="4">Hotel 3</option>
    <option value="1" selected>No Hotel</option>
</select>

    <input type="text" id="decimal">

>Solution :

You need to trigger the select onchange first time when page load.

$(document).ready(function() {
  $('select').trigger('change');
});

Working snippet:

$(document).ready(function() {
  $('select').trigger('change');
});

function hotelCheck(that) {
  if (that.value == 1) {
    $('#decimal').val('0.00');
    $("#decimal").prop('disabled', true);
  } else {
    $("#decimal").prop('disabled', false);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select onchange="hotelCheck(this);">
  <option value="2">Hotel 1</option>
  <option value="3">Hotel 2</option>
  <option value="4">Hotel 3</option>
  <option value="1" selected>No Hotel</option>
</select>

<input type="text" id="decimal">