如何创建一个提交按钮,根据下拉列表中的选定输入显示结果

I am using PHP and MySQL database on WordPress.

I had created 4 dropdown list in a table where each one includes data retrieved from the database and I created a submit button.

What I need is to make the submit button takes the selected input from each dropdown list and make a query to return the required data and display the results in a table or a grid.

code:

        <?php
    /*
    Template Name: search info
    */

    get_header();
    ?>

    <?php
    // code for submit button ation
    if(isset($_POST['submit']))
    {
    //needed code
    $site_name=$_POST['site_name'];
    $owner_name=$_POST['owner_name'];
    $company_name=$_POST['Company_name'];
    $Subcontractor_name=$_POST['Subcontractor_name'];
    ?>
    <table width="30%" >
        <tr>
           <td>Site Name</td>
           <td>Owner Name</td>
           <td>Company Name</td>
           <td>Subcontractor Name</td>
         </tr>
         <tr>
            <td><?php echo $site_name ; ?></td>
            <td><?php echo $owner_name ; ?></td>
            <td><?php echo $company_name ; ?></td>
            <td><?php echo $Subcontractor_name ; ?></td>
         </tr>
    </table>
    <?php }  ?>

    <!--create  dropdown list site names-->

    <form method = "POST" action = ''>
        <table width="30%">
            <tr>
               <td>Site Name</td>
               <td>Owner Name</td>
               <td>Company Name</td>
               <td>Subcontractor Name</td>
             </tr>
             <tr>
               <td><select id="site_name"  name = 'site_name'>

                 <?php
                     $query_site_name =$wpdb->get_results ("select DISTINCT siteNAME  from site_info");
                      foreach($query_site_name as $site_name)
                      {
                       $site_name = (array)$site_name;
                       echo "<option value = '{".$site_name ['siteNAME']."}'>".  $site_name['siteNAME']."</option>";
                      } 
                 ?>

                <!--create  dropdown list owner names-->
                </select></td>

                <td><select id="owner_name"  name = 'owner_name'>
                <?php
                      $query_owner_name =$wpdb->get_results ("select DISTINCT ownerNAME  from owner_info");
                      foreach($query_owner_name as $owner_name)
                      {
                         $owner_name = (array)$owner_name;
                         echo "<option value = '{".$owner_name ['ownerNAME']."}'>".  $owner_name['ownerNAME']."</option>";
                      } 
                  ?>
                </select></td>

                <!--create  dropdown list Company names-->
                </select></td>

                <td><select id="Company_name"  name = 'Company_name'>
                <?php 
                     $query_Company_name =$wpdb->get_results ("select DISTINCT companyNAME  from company_info");
                     foreach($query_Company_name as $Company_name)
                     {
                       $Company_name = (array)$Company_name;
                       echo "<option value = '{".$Company_name ['companyNAME']."}'>".  $Company_name['companyNAME']."</option>";
                     }  
                 ?>
                </select></td>

                <!--create  dropdown list Subcontractor names-->
                </select></td>

                <td><select id="Subcontractor_name"  name = 'Subcontractor_name'>
                <?php 
                    $query_Subcontractor_name =$wpdb->get_results ("select DISTINCT subcontractorNAME  from subcontractor_info");
                     foreach($query_Subcontractor_name as $Subcontractor_name)
                     {
                       $Subcontractor_name = (array)$Subcontractor_name;
                       echo "<option value = '{".$Subcontractor_name ['subcontractorNAME']."}'>".  $Subcontractor_name['subcontractorNAME']."</option>";
                      } 
                   ?>
                </select></td>
            <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>
            <input type = "submit" name="submit" value = "Search">

        </td>
       </tr>

        </table>
    </form>
<?php
    get_footer();
    ?>

If anyone can help me to continue the code in order to:

  • use the selected data from the dropdown list in the PHP code
  • display the result in a table or grid

After updating the code the page looks like : web page based on the @Prateek Verma code

Please put the table structure inside the tag & then perform the submit action.

Please find your updated code below:

<?php
    /*
    Template Name: search info
    */

    get_header();
    ?>

    <?php
    // code for submit button ation
    global $wpdb,$_POST;
    if(isset($_POST['query_submit']))
    {
    //needed code
    if(isset($_POST['site_name'])) { $site_name=$_POST['site_name']; } else { $site_name=""; }
if(isset($_POST['owner_name'])) { $owner_name=$_POST['owner_name']; } else { $owner_name=""; }
if(isset($_POST['Company_name'])) { $company_name=$_POST['Company_name']; } else { $company_name=""; }
if(isset($_POST['Subcontractor_name'])) { $Subcontractor_name=$_POST['Subcontractor_name']; } else { $Subcontractor_name=""; }
    ?>
    <table width="30%" >
        <tr>
           <td>Site Name</td>
           <td>Owner Name</td>
           <td>Company Name</td>
           <td>Subcontractor Name</td>
         </tr>
         <tr>
            <td><?php echo $site_name ; ?></td>
            <td><?php echo $owner_name ; ?></td>
            <td><?php echo $company_name ; ?></td>
            <td><?php echo $Subcontractor_name ; ?></td>
         </tr>
    </table>
    <?php }  ?>

    <!--create  dropdown list site names-->

    <form method ="post" action ="" name="submit_form">
        <table width="30%">
            <tr>
               <td>Site Name</td>
               <td>Owner Name</td>
               <td>Company Name</td>
               <td>Subcontractor Name</td>
             </tr>
             <tr>
               <td><select id="site_name"  name = "site_name">

                 <?php
                     $query_site_name =$wpdb->get_results ("select DISTINCT siteNAME  from site_info");
                      foreach($query_site_name as $site_name)
                      {
                       $site_name = (array)$site_name;
                       echo "<option value = '{".$site_name ['siteNAME']."}'>".  $site_name['siteNAME']."</option>";
                      } 
                 ?>

                <!--create  dropdown list owner names-->
                </select></td>

                <td><select id="owner_name"  name ="owner_name">
                <?php
                      $query_owner_name =$wpdb->get_results ("select DISTINCT ownerNAME  from owner_info");
                      foreach($query_owner_name as $owner_name)
                      {
                         $owner_name = (array)$owner_name;
                         echo "<option value = '{".$owner_name ['ownerNAME']."}'>".  $owner_name['ownerNAME']."</option>";
                      } 
                  ?>
                </select></td>

                <!--create  dropdown list Company names-->
                </select></td>

                <td><select id="Company_name"  name ="Company_name">
                <?php 
                     $query_Company_name =$wpdb->get_results ("select DISTINCT companyNAME  from company_info");
                     foreach($query_Company_name as $Company_name)
                     {
                       $Company_name = (array)$Company_name;
                       echo "<option value = '{".$Company_name ['companyNAME']."}'>".  $Company_name['companyNAME']."</option>";
                     }  
                 ?>
                </select></td>

                <!--create  dropdown list Subcontractor names-->
                </select></td>

                <td><select id="Subcontractor_name"  name ="Subcontractor_name">
                <?php 
                    $query_Subcontractor_name =$wpdb->get_results ("select DISTINCT subcontractorNAME  from subcontractor_info");
                     foreach($query_Subcontractor_name as $Subcontractor_name)
                     {
                       $Subcontractor_name = (array)$Subcontractor_name;
                       echo "<option value = '{".$Subcontractor_name ['subcontractorNAME']."}'>".  $Subcontractor_name['subcontractorNAME']."</option>";
                      } 
                   ?>
                </select></td>
            <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>
            <input type ="submit" name="query_submit" value ="Search" />

        </td>
       </tr>

        </table>
    </form>

    <?php get_footer(); ?>

Hope, this may be helpful you.

This code is in PHP only however you can use javascript/jquery also to submit the form. Anyway On click of submit button I would like to give you two options.

  1. You can put all of your dropdown in a form tag and for that form tag in action attribute of form you can define new page where you can get all values by $_REQUEST or get or post and than either submit this data to database if you want or redirect to another page by carrying this array of data.

  2. You can write a simple jquery/ javascript code to submit the code with ajax. I am not gonna write the code but If you need, let me know I will give you more brief on this.

If you do not want to submit the data and on click of submit button want to display selected data in a table. Then create a table where you want to display data and make it hidden using css. After that by using javascript/jquery get selected index/value of dropdown and show them in that grid or table.

Hope it would help.