ajax jQuery auto reload data when browser page refresh

Question

how can i use ajax jquery to autoreload data from selected field related data to input field? it's only working when i am using $("#id_books").change(function() ! but i want to load data when browser page refresh or on page load....

create-form.html

<select name="books" class="form-control" id="id_books">
  <option value="1" selected="">haxer</option>
  <option value="2">django</option>
  <option value="3">HCV</option>
  <option value="4">python</option>
  <option value="5">CBC</option>
</select>

<div class="form-group col-sm-2 text-center">
    <input class="form-control" type="text" name="price" id="priceData" readonly>
</div>

<script>
    $("#id_books").load(function () {
        var id = $(this).val();
        $.ajax({
            url: `http://localhost:8000/report/${id}`,
            data: { 'id': id },
            dataType: 'json',
            success: function (response) {
                if (response != null) {
                    $('#priceData').val(response.price);
                }
            }
        });
    });
</script>

Answer 1

Try using $(document).ready() , which will fire on page load. eg:

$(document).ready(function() {
      alert("Page has loaded!");
});

You'll most likely need to refactor your code as $(this).val(); won't work (as 'this' is no longer '#id_books')

I've not tested the following (but it should give you an idea), try the following:

<script>
     $(document).ready(function() {
        loadData()
    });

    $("#id_books").change(function () {
        loadData()
    });

    function loadData()
    {
        var id = $("#id_books").val();
        $.ajax({
            url: `http://localhost:8000/report/${id}`,
            data: { 'id': id },
            dataType: 'json',
            success: function (response) {
                if (response != null) {
                    $('#priceData').val(response.price);
                }
            }
        });
    }
</script>