Button Redirect not working on WordPress

Question

I have an issue. The website I have has a "Make a booking" option but when I click onthe button the button doesn't redirect. However, when I click on our fleet button. The search filter is applied. I just want the button to redirect to our fleet page.

The website is wordpress website. I looked into the function and this is what I found, can anyone please have a look, I think something wrong here;

add_action('woocommerce_after_single_product','add_popup_search_form',15);

if(! function_exists('add_popup_search_form')){
function add_popup_search_form(){
    $action = get_permalink('2778');
    $html = <<<HTML
<div id="search_form_popup" class="modal" role="dialog">
<div class="modal-backdrop fade in"></div>
<div class="modal-dialog"> 

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Reserver A RENTAL CAR</h4>
        </div>
        <div class="modal-body">
            <form action="$action" class="booking-form" method="post">
                <div class="col-lg-3">
                    <h4 class="step-title">Pick-up Location:</h4>
                    <input class="home_search_input_location" name="car_location" placeholder="Select car location" type="text" autocomplete="off">
                    <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw search_input_spin"></i>
                    <div class="home_search_auto_sugg">
                        <ul>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3">
                    <input name="location_tax" value="city" type="hidden">
                    <span class="checkbox-input show_return_loc active" style="display: none;">
                        <input id="return-car-to-different-location" name="return_location" checked="checked" type="checkbox">
                        <label for="return-car-to-different-location">Return car to a different location</label>
                    </span>
                    <div class="return-car" style="display: block;">
                        <h4 class="step-title">Return Location:</h4>
                        <input class="home_search_input_retutn_location" name="car_return_location" placeholder="Select return location" type="text" autocomplete="off"><i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw search_return_spin"></i>
                        <div class="home_search_auto_sugg_retutn">
                            <ul>
                            </ul>
                        </div>
                        <input name="return_location_tax" value="return_location" type="hidden">
                    </div>
                </div>
                <div class="col-lg-3">
                    <h4 class="step-title">Pick-up Date:</h4>
                    <span class="calendar-input popup-relative">
                        <input type="text" id="datepicker" name="pickUpDate" placeholder="Pick Up Date" autocomplete="off"/>
                        <i class="fa fa-calendar popup-location"></i> </span> </div>
                <div class="col-lg-3">
                    <h4 class="step-title">Return Date:</h4>
                    <span class="calendar-input popup-relative">
                        <input id="datepicker1" name="returnDate" placeholder="Return Date" type="text" autocomplete="off" >
                        <i class="fa fa-calendar popup-location"></i> </span> </div>
                <div style="clear: both;"></div>
                <div class="cta-button"> <a href="/rental-option">
                        <button class="search_popup_btn home_page_custom_button">Make reservation now!</button>
                    </a> </div>
            </form>
        </div>
    </div>
</div>
 </div> HTML;
    echo $html;
   }
   }

http://tylozrentacar.com/ is my website link.

JS code:

 $('.reservation-form').submit(function(){

var type = $('.reservation ul.horizontal-tab li.active a').data("rel");     
var searchFormData = $(this).serializeArray();
var dataObj = {};
var search_page_id = $('#search-page-id').val();


$(searchFormData).each(function(i, field){
  dataObj[field.name] = field.value;
});

var createSearchBar = '';

if(dataObj.car_location != '' && dataObj.car_location != undefined){
    createSearchBar += 'location='+dataObj.car_location+'&';
    if(dataObj.location_tax != '' && dataObj.location_tax != undefined){
        createSearchBar += 'locationTax='+dataObj.location_tax+'&';
    }
}

if(dataObj.car_return_location != '' && dataObj.car_return_location != undefined){
    createSearchBar += 'returnLocation='+dataObj.car_return_location+'&';
    if(dataObj.return_location_tax != '' && dataObj.return_location_tax != undefined){
        createSearchBar += 'returnLocationTax='+dataObj.return_location_tax+'&';
    }
}

if(dataObj.car_type != '' && dataObj.car_type != undefined){
    createSearchBar += 'carType='+dataObj.car_type+'&';
    if(dataObj.car_type_tax != '' && dataObj.car_type_tax != undefined){
        createSearchBar += 'carTypeTax='+dataObj.car_type_tax+'&';
    }
}   

if(dataObj.pickUpDate != '' && dataObj.pickUpDate != undefined){
    createSearchBar += 'pickUpDate='+dataObj.pickUpDate+'&'; 
}

if(dataObj.returnDate != '' && dataObj.returnDate != undefined){
    createSearchBar += 'returnDate='+dataObj.returnDate+'&'; 
}

window.location.href = dataObj.search_page+'#/?'+'type='+type+'&'+createSearchBar;

return false;

});

Redirect in your case should be implemented with the JavaScript, show us the js code you have tried. — Ivnhal, Aug 26 '18 at 07:32
Hi @IvnH, Thank you for looking and replying back. I have added the JS code down. :) Thanks Again! :) — sundasmunir, Aug 27 '18 at 10:08
Before `return` add the `console.log( dataObj.search_page );` and check what is in in browser console? — Ivnhal, Sep 04 '18 at 17:59
Added that, one ) was missing and I fixed that. But still it shows 404 error. There are other errors in the console but nothing to the specific js file. I am kind of lost, the user input entries are stored for sure but redirection is the issue. — sundasmunir, Sep 05 '18 at 05:45
Can you point out the value of `dataObj.search_page` before redirection is performed? — Ivnhal, Sep 05 '18 at 08:57
I guess yes, the values are shown in the link. Sorry, I am not clear what you asked. — sundasmunir, Sep 05 '18 at 09:44
In the JavaScript code there is `window.location.href`. This is responsive for redirection. So you need to check what is after `= ` - is the redirection URL prepared correctlty — Ivnhal, Sep 05 '18 at 09:48

Ivnhal · Answer 1 · 2018-08-29T10:16:56.247

In your JavaScript code the form submit event is handled. But in your case you need to handle button click event:

jQuery( function ($) {
  jQuery('.home_page_custom_button').click(function() {

    var type = $('.reservation ul.horizontal-tab li.active a').data("rel");     
    var searchFormData = $(this).serializeArray();
    var dataObj = {};
    var search_page_id = $('#search-page-id').val();


    $(searchFormData).each(function(i, field){
      dataObj[field.name] = field.value;
    });

    var createSearchBar = '';

    if(dataObj.car_location != '' && dataObj.car_location != undefined){
        createSearchBar += 'location='+dataObj.car_location+'&';
        if(dataObj.location_tax != '' && dataObj.location_tax != undefined){
            createSearchBar += 'locationTax='+dataObj.location_tax+'&';
        }
    }

    if(dataObj.car_return_location != '' && dataObj.car_return_location != undefined){
        createSearchBar += 'returnLocation='+dataObj.car_return_location+'&';
        if(dataObj.return_location_tax != '' && dataObj.return_location_tax != undefined){
            createSearchBar += 'returnLocationTax='+dataObj.return_location_tax+'&';
        }
    }

    if(dataObj.car_type != '' && dataObj.car_type != undefined){
        createSearchBar += 'carType='+dataObj.car_type+'&';
        if(dataObj.car_type_tax != '' && dataObj.car_type_tax != undefined){
            createSearchBar += 'carTypeTax='+dataObj.car_type_tax+'&';
        }
    }   

    if(dataObj.pickUpDate != '' && dataObj.pickUpDate != undefined){
        createSearchBar += 'pickUpDate='+dataObj.pickUpDate+'&'; 
    }

    if(dataObj.returnDate != '' && dataObj.returnDate != undefined){
        createSearchBar += 'returnDate='+dataObj.returnDate+'&'; 
    }

    window.location.href = dataObj.search_page+'#/?'+'type='+type+'&'+createSearchBar;

    return false;

}

}

So I just have to add this code in place of " window.location.href" or after that? I am sorry I am not experienced with JS. — sundasmunir, Aug 28 '18 at 08:50
Thank you so much. I have edited the code but there are no changes on the website, the page is not redirecting to the search page. As far I understand the entries are saved as when the search fields are filled and make a booking is clicked, nothing happens on the websits. But when Our fleet page is clicked, the products are filtered according the Search field entries. Is it possible to directly redirct Make a Booking button to our fleet page? — sundasmunir, Aug 29 '18 at 09:38
Thank you very much. I have added the code in my JS file. Now the problem is that it goes to 404 error. Any possible solutions to this? — sundasmunir, Sep 02 '18 at 10:59

score 0 · Answer 2 · answered Aug 28 '18 at 09:07

0

Try window.location = ... instead window.location.href = ...

answered Aug 28 '18 at 09:07

Dmitry

347
1
9

Hi Dmitry, I replace the window.location.href= to window.location= but it doesn't effect the website. Thank you for trying :) – sundasmunir Sep 02 '18 at 11:01

Button Redirect not working on WordPress

2 Answers2