Not getting varibles value while using window.location.href in jquery using laravel

Question

code:

<script>
    $(document).ready(function(){
        $("#start-date-1").datepicker();
        $("#end-date-1").datepicker();
        $("#book_now").click(function(e){
            e.preventDefault();
            locations = $("#location").val();
            start_date = $("#start-date-1").val();
            end_date = $("#end-date-1").val();
            guests = $("#guests").val();
            if(locations=='' && start_date!='' && end_date!='' && guests!='')
            {
                $("#location").addClass("red_border");
            }
            else if(locations!='' && start_date!='' && end_date!='' && guests!='')
            {
                window.location.href="{{URL::to('s?location="+locations+"')}}";
            }
        });
    });
</script>

In this code I am simply getting value of locations, start_date, end_date, guests and all variables value are showing in an alert but when I click on book_now it redirects me with window.location.href but the value of locations in the query string is not showing correctly.

It is http://localhost/luxvacationrentalhomes.com/s?location="+locations+" and it should be http://localhost/luxvacationrentalhomes.com/s?location=2 .

How can I fix this?

Answer 1

   <script>
    $(document).ready(function(){
        $("#start-date-1").datepicker();
        $("#end-date-1").datepicker();
        $("#book_now").click(function(e){
            e.preventDefault();
            locations = $("#location").val();
            start_date = $("#start-date-1").val();
            end_date = $("#end-date-1").val();
            guests = $("#guests").val();
            if(locations=='' && start_date!='' && end_date!='' && guests!='')
            {
                $("#location").addClass("red_border");
            }
            else if(locations!='' && start_date!='' && end_date!='' && guests!='')
            {
                window.location.href="{{URL::to('s')}}" + "?location=" + locations;
            }
        });
    });
</script>

Answer 2

window.location.href="{{URL::to('s?location="+locations+"')}}";

You are mixing your frontend/backend frames of reference here. Everything inside {{}} is processed by your templating engine on the backend. You open a " in javascript and then close it in the templating engine, which doesn't work.

I have used javascript string substitution to solve a similar issue with using generating a url containing a placeholder using routing on the backend, but then substituting the actual value into url on the frontend with javascript.

window.location.href="{{URL::to('s?location=ReplaceMeWithLocation')}}"
    .replace('ReplaceMeWithLocation', location);

Alternatively you could use string templating rather than a placeholder, but the principle is the same.

window.location.href=`{{URL::to('s?location=${location}')}}`