如何正确提交搜索表单并在独立页面中显示结果

时间：2016-11-28 作者：L. Leo

我在我的WordPress网站上有部分搜索功能，它使用动态相关的选择框。

但是，现在我有以下问题：

If only select the first one box, or select the first two boxes, and click the Search button, it successfully jumps to the result page.

However, if continuously select the third box, it jumps to a page with the same URL as the result page but the content of the homepage.

I check the Chrome Console and see this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

我有下面所有的相关代码。

1. font-end part of the select boxes:

<form class="select-boxes" action="<?php echo site_url("/part-search-result/"); ?>" method="POST" target="_blank">
    <?php include(__DIR__.\'/inc/part-search.php\'); ?>
</form>

2. part-search.php

<?php
    include( __DIR__.\'/db-config.php\' );
    $query = $db->query("SELECT * FROM ps_manufact WHERE status = 1 ORDER BY manufact_name ASC");
    $rowCount = $query->num_rows;
?>

<select name="manufacturer" id="manufact" onchange="manufactText(this)">
    <option value="">Select Manufacturer</option>
    <?php
        if($rowCount > 0){
            while($row = $query->fetch_assoc()){
                echo \'<option value="\'.$row[\'manufact_id\'].\'">\'.$row[\'manufact_name\'].\'</option>\';
            }
        }else{
            echo \'<option value="">Manufacturer Not Available</option>\';
        }
    ?>
</select>
<input id="manufacturer_text" type="hidden" name="manufacturer_text" value=""/>
<script type="text/javascript">
    function manufactText(ddl) {
        document.getElementById(\'manufacturer_text\').value = ddl.options[ddl.selectedIndex].text;
    }
</script>

<select name="type" id="type" onchange="typeText(this)">
    <option value="">Select Manufacturer First</option>
</select>
<input id="type_text" type="hidden" name="type_text" value=""/>
<script type="text/javascript">
    function typeText(ddl) {
        document.getElementById(\'type_text\').value = ddl.options[ddl.selectedIndex].text;
    }
</script>

<select name="year" id="year" onchange="yearText(this)">
    <option value="">Select Type First</option>
</select>
<input id="year_text" type="hidden" name="year_text" value=""/>
<script type="text/javascript">
    function yearText(ddl) {
        document.getElementById(\'year_text\').value = ddl.options[ddl.selectedIndex].text;
    }
</script>

<select name="model" id="model" onchange="modelText(this)">
    <option value="">Select Year First</option>
</select>
<input id="model_text" type="hidden" name="model_text" value=""/>
<script type="text/javascript">
    function modelText(ddl) {
        document.getElementById(\'model_text\').value = ddl.options[ddl.selectedIndex].text;
    }
</script>

<input type="submit" name="search" id="search" value="Search">


<script type="text/javascript">
    jQuery(function($) {
        $(\'#manufact\').on(\'change\',function(){
            var manufactID = $(this).val();
            if(manufactID){
                $.ajax({
                    type:\'POST\',
                    url:\'<?php echo home_url(\'wp-content/themes/myTheme/inc/ajax-data.php\') ?>\',
                    data:\'manufact_id=\'+manufactID,
                    success:function(html){
                        $(\'#type\').html(html);
                        $(\'#year\').html(\'<option value="">Select Type First</option>\');
                    }
                });
            }else{
                $(\'#type\').html(\'<option value="">Select Manufact First</option>\');
                $(\'#year\').html(\'<option value="">Select Type First</option>\');
            }
        });

        $(\'#type\').on(\'change\',function(){
            var typeID = $(this).val();
            if(typeID){
                $.ajax({
                    type:\'POST\',
                    url:\'<?php echo home_url(\'wp-content/themes/myTheme/inc/ajax-data.php\') ?>\',
                    data:\'type_id=\'+typeID,
                    success:function(html){
                        $(\'#year\').html(html);
                        $(\'#model\').html(\'<option value="">Select Year First</option>\');
                    }
                });
            }else{
                $(\'#year\').html(\'<option value="">Select Type First</option>\');
                $(\'#model\').html(\'<option value="">Select Year First</option>\');
            }
        });

        $(\'#year\').on(\'change\',function(){
            var yearID = $(this).val();
            if(yearID){
                $.ajax({
                    type:\'POST\',
                    url:\'<?php echo home_url(\'wp-content/themes/myTheme/inc/ajax-data.php\') ?>\',
                    data:\'year_id=\'+yearID,
                    success:function(html){
                        $(\'#model\').html(html);
                    }
                });
            }else{
                $(\'#model\').html(\'<option value="">Select Year First</option>\');
            }
        });
    });
</script>

3. ajax-data.php

<?php

include( __DIR__.\'/db-config.php\' );

if(isset($_POST["manufact_id"]) && !empty($_POST["manufact_id"])){
    $query = $db->query("SELECT * FROM ps_type WHERE manufact_id = ".$_POST[\'manufact_id\']." AND status = 1 ORDER BY type_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo \'<option value="">Select Type</option>\';
        while($row = $query->fetch_assoc()){
            echo \'<option value="\'.$row[\'type_id\'].\'">\'.$row[\'type_name\'].\'</option>\';
        }
    }else{
        echo \'<option value="">Type Not Available</option>\';
    }
}

if(isset($_POST["type_id"]) && !empty($_POST["type_id"])){
    $query = $db->query("SELECT * FROM ps_year WHERE type_id = ".$_POST[\'type_id\']." AND status = 1 ORDER BY year_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo \'<option value="">Select Year</option>\';
        while($row = $query->fetch_assoc()){
            echo \'<option value="\'.$row[\'year_id\'].\'">\'.$row[\'year_name\'].\'</option>\';
        }
    }else{
        echo \'<option value="">Year Not Available</option>\';
    }
}

if(isset($_POST["year_id"]) && !empty($_POST["year_id"])){
    $query = $db->query("SELECT * FROM ps_model WHERE year_id = ".$_POST[\'year_id\']." AND status = 1 ORDER BY model_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo \'<option value="">Select Model</option>\';
        while($row = $query->fetch_assoc()){
            echo \'<option value="\'.$row[\'model_id\'].\'">\'.$row[\'model_name\'].\'</option>\';
        }
    }else{
        echo \'<option value="">Model Not Available</option>\';
    }
}

?>
一
<?php

include( __DIR__.\'/db-config.php\' );

if(isset($_POST["manufact_id"]) && !empty($_POST["manufact_id"])){
    $query = $db->query("SELECT * FROM ps_type WHERE manufact_id = ".$_POST[\'manufact_id\']." AND status = 1 ORDER BY type_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo \'<option value="">Select Type</option>\';
        while($row = $query->fetch_assoc()){
            echo \'<option value="\'.$row[\'type_id\'].\'">\'.$row[\'type_name\'].\'</option>\';
        }
    }else{
        echo \'<option value="">Type Not Available</option>\';
    }
}

if(isset($_POST["type_id"]) && !empty($_POST["type_id"])){
    $query = $db->query("SELECT * FROM ps_year WHERE type_id = ".$_POST[\'type_id\']." AND status = 1 ORDER BY year_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo \'<option value="">Select Year</option>\';
        while($row = $query->fetch_assoc()){
            echo \'<option value="\'.$row[\'year_id\'].\'">\'.$row[\'year_name\'].\'</option>\';
        }
    }else{
        echo \'<option value="">Year Not Available</option>\';
    }
}

if(isset($_POST["year_id"]) && !empty($_POST["year_id"])){
    $query = $db->query("SELECT * FROM ps_model WHERE year_id = ".$_POST[\'year_id\']." AND status = 1 ORDER BY model_name ASC");

    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo \'<option value="">Select Model</option>\';
        while($row = $query->fetch_assoc()){
            echo \'<option value="\'.$row[\'model_id\'].\'">\'.$row[\'model_name\'].\'</option>\';
        }
    }else{
        echo \'<option value="">Model Not Available</option>\';
    }
}

?>
 我认为在WordPress中不正确使用POST可能会有问题，我找到了一个教程：Handling POST Requests the WordPress Way
但是，我已经使用action 跳转到结果页，我不知道如何解决我的问题。
2 个回复
SO网友:Johansson

要创建自己的独立搜索功能，请执行以下步骤。

1- 您需要一个表单来为您发送数据。这是一个简单的表单，可以为您做到这一点：

<form method="post" name="car-select" action="<?php echo site_url(\'/my-page/\'); ?>">
    <select name="make">
        <option value="benz">Benz</option>
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </select>
    <select name="type">
        <option value="sedan">Sedan</option>
        <option value="coupe">Coupe</option>
    </select>
    <input type="submit" value="Find my dream car!"/>
</form>
其中/my-page/ 是我们稍后将创建的页面的slug。

2- 处理搜索结果的函数。看看这个基于输入值搜索汽车的基本功能：

function my_custom_search() {
    $car_make = $_POST[\'make\'];
    $car_type = $_POST[\'type\'];
    $car_query = new WP_Query ( array (
        \'post_type\' => \'post\',
        \'tax_query\' => array(
            \'relation\' => \'AND\',
            array (
                \'taxonomy\' => \'car_make\',
                \'field\' => \'slug\',
                \'terms\' => $car_make,
            ),
            array (
                \'taxonomy\' => \'car_type\',
                \'field\' => \'slug\',
                \'terms\' => $car_type,
            ),
         ),
    ));
    if ($car_query->have_posts) {
        while($car_query->have_posts()){
            $car_query->the_post();
            get_template_part(\'WHATEVER TEMPLATE YOU WANT TO USE\');
        }
    }
    // Pagination goes here
}
3- 显示搜索结果的页面。还记得第一个要求中的slug吗？在模板的目录中创建一个页面，并将其命名为page-my-search-template.php. 然后，在新页面模板中包括此功能，无论您想在哪里：

my_custom_search();

然后，您应该创建一个带有my-page slug（表单操作中的一个），使用刚刚创建的模板。

现在，每次提交表单都会触发搜索查询，并在您自己的搜索模板中显示结果！

WAIT !! I want my pagination !!

您可以在搜索功能中实现自己的分页，但我建议使用WP-PageNavi 对于那些没有足够技能编写分页脚本的人。安装插件，并按如下方式设置查询：

wp_pagenavi(array( \'query\' => $car_query ));

这样你就可以为你的自定义搜索页面分页了，很好也很简单。

SO网友:Nate

您不需要任何mySQL查询。WordPress的默认搜索是提交带有URL的“s”。您可以使用带有隐藏输入的简单表单来完成它。

<form role="search" method="get" action="<?php echo $_SERVER[\'REQUEST_URI\']; ?>">
  <input type="hidden" name="action" value="careers_search">
  <input type="text" name="search-career" value="Search...">
  <input type="submit" class="form-submit" value="Submit">
</form>
此表单将在同一URL上提交。提交后，这就是应该发生的事情-

<?php
  if( isset( $_GET[\'careers_search\'] ) ) {
    // Your code goes here...
  }
?>

标签： php   search   mysql   forms   select   小码农  

相关推荐

如何使用unction.php更改登录URL？

我想更改我网站的登录URLhttp://example.com/wp-admin 到http://example.com/example.我不想使用插件来实现这一点，所以我可以从函数中实现这一点。php？