如何强制等待jQuery更改的第二个选择

Question

I have one text box and one select box

<input type="text" name="TourDate"  id="TourDate" class="date form-control input-sm" value="">
<select name="TourID" id="TourID" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>

After I enter the date (via boostrap calendar) and select the tour I would like to refresh the page

$(function(){
    $('.form-control').on('change',function(){
        keyword = '_kfnTourID:equal:'+$('#TourID').val()+'|';
        keyword += '_kfdTourDate:equal:'+$('#TourDate').val();
        window.location.href = "{{ url('bookings?search=') }}"+keyword ;
    })
})

But it refreshes the page after I select the date can you please show me how to force to wait for the second selection? also while is refreshed I would like to show loading... on the screen until the refreshing is finished. I am new at this would appreciate your help.

Answer 1

You need to validate each fields having class form-control if one of them is not set then just exit using return .Like below.

$(function(){
    $('.form-control').on('change',function(){
       if($('#TourDate').val()=="" || $('#TourID').val()==0){
            return;///it exit the execution of code below it
          }
        keyword= '_kfdTourDate:equal:'+$('#TourDate').val();
        keyword+= '_kfnTourID:equal:'+$('#TourID').val()+'|';

        window.location.href = "{{ url('bookings?search=') }}"+keyword ;
    });
});

 $(function(){ $('.form-control').on('change',function(){ if($('#TourDate').val()=="" || $('#TourID').val()==0){ return;///it exit the execution of code below it } keyword= '_kfdTourDate:equal:'+$('#TourDate').val(); keyword+= '_kfnTourID:equal:'+$('#TourID').val()+'|'; window.location.href = "{{ url('bookings?search=') }}"+keyword ; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="TourDate" id="TourDate" class="date form-control input-sm" value=""> <select name="TourID" id="TourID" class="form-control"> <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> </select>