URL perpetually reloading in jquery

Question

I am trying to pass parameters like page and date_filter to the controller. However, when I create and load a new url with the newly created parameter using JQuery, the page reloads perpetually.

Here is my html code

  <input type="text" class="form-control date_range_set change_url" id="MM/yy" placeholder="MM/yy">

jquery code

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
    return false;
};

$(".change_url").change(function(){
  var param = getUrlParameter('date_filter');
  var page = getUrlParameter('page');
  var url = window.location.href;
  var date_filter = $(this).val();
  // console.log(date_filter)
  
  var pathname = window.location.pathname;
  var url      = window.location.href;
  var origin   = window.location.origin;
  
  var new_url = origin+pathname+"?page="+page+"&date_filter="+date_filter;
  // reload continuously
  window.location.href = new_url;
});

Answer 1

I got solution myself

I was using daterangepicker so, JQuery is different for it so,

$('#date-range').on('apply.daterangepicker', (e, picker) => {
         let date = $("#date-range").val();
         let replace_date = date.replaceAll(/\s/g,'');
         window.location = "{{ request()->url() }}"+"?date_range="+replace_date;
       });