javascript - 在搜索和显示结果上显示相同的按钮

Question

我想创建在初始阶段隐藏的名为企业和个人的按钮，一旦用户输入搜索按钮，企业和个人应该变得可见，并且应该搜索为该特定按钮分类的内容。我怎样才能做到这一点？以下是我的 HTML 代码：

1. 我的搜索按钮将检索以下内容（PHP 中的 SELECT 查询）。
2. 检索后，将显示“业务”和“个人”按钮。

3. 可见后，此人可以单击“企业”或“个人”，然后单击其中一个按钮，将检索一些数据

   if(isset($_POST["submit"]))
   {
       $category_name=$_POST['category'];
           if(isset($_POST['sub_category'])){
               $sub_category=$_POST['sub_category'];
               $sql_c="SELECT sub_category_id FROM sub_category WHERE sub_category_name='".$sub_category."'";
                   $res_c=$mysqli->query($sql_c);
                   if(!$res_c)
                   {
                       echo "Error: (" . $mysqli->errno . ") " . $mysqli->error;
                   }
                   $row_c=$res_c->fetch_assoc();
                   $sub_category_id=$row_c["sub_category_id"];
           }
       $city_name=$_POST['city'];
           $sql_a="SELECT category_id FROM category WHERE category_name='".$category_name."'";
           $res_a=$mysqli->query($sql_a);
           if(!$res_a)
           {
               echo "Error: (" . $mysqli->errno . ") " . $mysqli->error;
           }
           $row_a= $res_a->fetch_assoc();
           $category_id=$row_a["category_id"];
   
           $sql_b="SELECT city_id FROM cities WHERE city_name='".$city_name."'";
           $res_b=$mysqli->query($sql_b);
           if(!$res_b)
           {
               echo "Error: (" . $mysqli->errno . ") " . $mysqli->error;
           }
           $row_b=$res_b->fetch_assoc();
           $city_id=$row_b["city_id"]; 
   }?>
   

   分类： "> 子分类："> 位置： "> 企业个人搜索

标签： javascriptjqueryhtmlcss

Answer 1

type="submit"将刷新您的页面，因此我建议您将其更改type="button"

为按钮样式并添加一些类：

<button type="button" name="submit" class="success-btn display" style="display:none">Business</button>
<button type="button" name="submit" class="success-btn display" style="display:none">Individual</button>

并点击搜索显示它们：

<button type="button" name="submit" class="success-btn" onclick="displayBtn()">
Search</button>

在你的脚本中

function displayBtn(){
var btns=document.grtElementByClassName('display');
btns[0].style.display = 'block'; 
btns[1].style.display = 'block'; 
}

或者通过 Jquery：

function displayBtn(){
  $('.display').show();
}

在此function您可以像我对按钮所做的那样进行搜索和显示/隐藏结果