Question

我有一个问题。我拥有的网站具有“进行预订”选项，但是当我单击按钮时，该按钮不会重定向。但是，当我单击“舰队”按钮时。将应用搜索过滤器。我只希望按钮重定向到我们的舰队页面。

该网站是wordpress网站。我调查了函数，这就是我发现的结果，任何人都可以看看，我认为这里有问题；

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/是我的网站链接。

JS代码：

 $('.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;

});

Answer 1

在您的JavaScript代码中，将处理表单提交事件。但是在您的情况下，您需要处理按钮单击事件：

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;

}

}

Answer 2

尝试使用window.location = ...代替window.location.href = ...

按钮重定向不适用于WordPress

2 个答案: