为什么不点击我的按钮做任何事情?

时间:2018-05-27 14:02:50

标签: javascript php html ajax

我想在用户完成2个输入时从db获取数据,这些是两个日期,1是开始日期,另一个是结束日期。当用户单击该按钮时,它应该在给定输入时从数据库中检索数据。但是当我点击我的按钮时,它什么也没发生。有人知道我的错误在哪里吗?这是我的两个文件。

neutest.php

<html>
   <head>
      <title>Trapeze Stop Point Protocol</title>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- jQuery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
         crossorigin="anonymous">
      <!-- fontawesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
         crossorigin="anonymous">
      <!-- datatables -->
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
      <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
      <!-- style sheet -->
      <style>
         body
         {
         margin:0;
         padding:0;
         background-color:#f1f1f1;
         }
      </style>
   </head>
   <body>
      <div class="container box">
         <h1 align="center">Trapeze Stop Point Protocol</h1>
         <br />
         <?php
            //require('search.php');    
            $conn = oci_connect('IPA_admin','P0o9i8u7','localhost/IPADB');
            If (!$conn)
                echo 'Failed to connect to Oracle';
            else
                echo 'Connected to Database (Dropdown)';
            $stid = oci_parse($conn,'SELECT DISTINCT STOPPOINT_NAME FROM STOPPOINT_NAMES');
            oci_execute($stid);
            ?>
         <div class="table-responsive">
            <br />
            <div class="row">
               <div align="center" class="col-md-3">
                  <p>PLEASE SELECT BUSSTATION</p>
                  <select name="station" id="station"</select>>
                  <option value="">---Station Wählen---</option>
                  <?php
                     while (($row = oci_fetch_array($stid, OCI_BOTH)) !=false) {
                     ?>             
                  <option value="<?php echo $row['STOPPOINT_NAME']; ?>"
                     <?php
                        if($row['STOPPOINT_NAME']){
                        }
                        ?> >
                     <?php 
                        echo $row['STOPPOINT_NAME'];
                        ?> 
                  </option>
                  <?php
                     }

                     ?>

                  </select>
               </div>
               <div class="input-daterange">
                  <div align="col-md-6">
                     <p>VON</p>
                     <input type="date" name="start_date" id="start_date" max="3000-12-31" min="1000-01-01" class="form-control">
                  </div>
                  <div align="col-md-6">
                     <p>BIS</p>
                     <input type="date" name="end_date" id="end_date" min="1000-01-01" max="3000-12-31" class="form-control">
                  </div>
               </div>
               </br>
               <div align="center" class="col-md-3">
                  <input type="button" name="filter" id="filter" value="Search" class="btn btn-info" />
               </div>
            </div>
            </br>
            <table id="order_data" class="table table-bordered table-striped">
               <thead>
                  <tr>
                     <th>STOPPOINT ID</th>
                     <th>STOPPOINT NAME</th>
                     <th>DATUM</th>
                     <th>DISTANCE</th>
                  </tr>
                  </thead>
                  <tbody>

                  <?php
                    $conn = oci_connect('IPA_admin','*******','localhost/IPADB');
                    If (!$conn)
                         echo 'Failed to connect to Oracle';
                    else
                         echo 'Connected to Database (SHOW)';
                    $stid2 = oci_parse($conn, 'SELECT * FROM STOPPOINT_NAMES ORDER BY DATUM');
                    oci_execute($stid2);
                    while(($row = oci_fetch_array($stid2, OCI_BOTH)) != false)
                       {
                    ?>  


                  <tr>
                     <td><?php echo $row["STOPPOINTID"]; ?></td>
                     <td><?php echo $row["STOPPOINT_NAME"]; ?></td>
                     <td><?php echo $row["DATUM"]; ?></td>
                     <td><?php echo $row["DISTANCE"]; ?></td>
                  </tr>
                  <?php  
                     }  
                     ?>
                     </tbody>     
            </table>
         </div>
      </div>
      <script> 
      $(document).ready(function(){  
           $.datepicker.setDefaults({  
            dateFormat: 'dd-mm-yyyy'   
           });  
           $(function(){  
                $("#from_date").datepicker();  
                $("#to_date").datepicker();  
           });  
           $('#filter').click(function(){  
                var from_date = $('#from_date').val();  
                var to_date = $('#to_date').val();  
                if(from_date != '' && to_date != '')  
                {  
                     $.ajax({  
                          url:"search.php",  
                          method:"POST",  
                          data:{from_date:from_date, to_date:to_date},  
                          success:function(data)  
                          {  
                            $('#order_table').html(data);  
                          }  
                     });  
                }  
                else  
                {  
                    alert("Please Select Date");  
                }  
           });  
      });  

      </script>
   </body>
</html>

这是按钮点击的代码:

<?php  
 //search.php
 //require('neutest.php');  
 if(isset($_POST["from_date"], $_POST["to_date"]))  
 {  
    $conn = oci_connect('IPA_admin','*******','localhost/IPADB');    
    $query = oci_parse($conn,'SELECT * FROM STOPPOINT_NAMES WHERE DATUM BETWEEN '.$_POST["from_date"].' AND '.$_POST["to_date"].'');  
    oci_execute($query);
    $output .='
        <table class="table table-bordered">  
            <tr>  
            <th>STOPPOINT ID</th>  
            <th>STOPPOINT NAME</th>  
            <th>DATUM</th>  
            <th>DISTANCE</th>    
            </tr>  
        ';
      if(oci_num_rows ($query) > 0)  
      {  
        while(($row = oci_fetch_array($query, OCI_BOTH)) != false)  
           {  
                $output .= '  
                     <tr>  
                          <td>'. $row["STOPPOINTID"] .'</td>  
                          <td>'. $row["STOPPOINT_NAME"] .'</td>  
                          <td>'. $row["DATUM"] .'</td>  
                          <td>'. $row["DISTANCE"] .'</td> 
                     </tr>  
                ';  
           }  
      }  
      else  
      {  
           $output .= '  
                <tr>  
                     <td colspan="5">No Stops Found</td>  
                </tr>  
           ';  
      }  
      $output .= '</table>';  
      echo $output;  
 }  
 ?>

1 个答案:

答案 0 :(得分:0)

将表单添加到html,并将btn更改为提交到同一页面(如果搜索的php代码在同一页面中)。

HTML:

    <from method="post" id="myForm">
        <div class="input-daterange">
                      <div align="col-md-6">
                         <p>VON</p>
                         <input type="date" name="start_date" id="start_date" max="3000-12-31" min="1000-01-01" class="form-control">
                      </div>
                      <div align="col-md-6">
                         <p>BIS</p>
                         <input type="date" name="end_date" id="end_date" min="1000-01-01" max="3000-12-31" class="form-control">
                      </div>
        </div>
        </br>
               <div align="center" class="col-md-3">
                  <input type="submit" name="filter" id="filter" value="Search" class="btn btn-info" />
               </div>
    </form>

JS:

$('#myForm').submit(function (event) {
event.preventDefault();
$.ajax({
    url: "urlToPhpFile",
    type: "POST",
    dataType: 'json'
    data: $(this).serialize(),
    success: function(result){

        }
    }
});
});