带有ajax,sql和php的动态下拉列表

时间:2020-07-22 14:31:27

标签: php html jquery ajax

通过组合config.php,index.php和ajax.php获得动态下拉列表,但是当我修改代码并将其用于另一个包含config.php,sales.php和ajax.php文件的文件时,我不会没有得到下拉列表。 我有2个文件夹folder_1包含config.php,index.php和ajax.php,这提供了我想要的所需下拉列表。 但是在folder_2中,我有config.php,sales.php和ajax.php,但没有得到下拉列表。 我将确切的代码从folder_1复制粘贴到folder_2,但是代码不起作用。

config.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<?php
$con=mysqli_connect("localhost","root","","db_cafeteria");
?>
</body>
</html>

index.php

<html>
<head>
<?php include "config.php"; ?>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script>
$(document).ready(function(){
  $('#category').change(function(){
 var categoryid = $(this).val();
$('#food').find('option').not(':first').remove();
  // AJAX request
     $.ajax({
       url: 'ajax.php',
       type: 'post',
       data: { categoryid: categoryid},
       dataType: 'json',
       success: function(response){
         var len = response.length;
        for( var i = 0; i<len; i++){
           var id = response[i]['id'];
           var name = response[i]['name'];
             $("#food").append("<option value='"+id+"'>"+name+"</option>");
             }
       }
     });

  });
});  
</script>
</head>
<body>
<table>
  <tr>
    <td>category</td>
    <td>
       <!-- Country dropdown -->
       <select id='category' >
          <option value="" >---Select---</option>
          <?php 
          ## Fetch countries
          $sql=mysqli_query($con,"SELECT * FROM tbl_category ORDER BY categoryname");
          while($row=mysqli_fetch_assoc($sql))
          {
            echo "<option value='".$row['category_id']."'>".$row['categoryname']."</option>";
          }
          ?>
       </select>
    </td>
  </tr>

  <tr>
    <td>food</td>
    <td>
      <select id='food' >
         <option value="" >---Select---</option>
      </select>
    </td>
  </tr>

    
</table>
</body>
</html>

sales.php

<?php
include("header.php");
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script>
  
$(document).ready(function(){
  $('#category').change(function(){
 var categoryid = $(this).val();
$('#food').find('option').not(':first').remove();
  // AJAX request
 
     $.ajax({
       url: 'ajax.php',
       type: 'post',
       data: {categoryid: categoryid},
       dataType: 'json',
       success: function(response){
         var len = response.length;
         if( len >0 ){
             $("#food").empty();
             $("#food").html('<option value="">---select---</option>');
        for( var i = 0; i<len; i++){
           var id = response[i]['id'];
           var name = response[i]['name'];
             $("#food").append("<option value='"+id+"'>"+name+"</option>");
             }
         }
         else
         {
             $('#food').html('<option value="">No food available</option>');
             }
       }
       
     });

  });
});
</script>
</head>
<body>
<?php
include("config.php");
?>
<form action="stock_reg_action.php" method="post" enctype="multipart/form-data">
<div class="container" style="margin-left:106px; margin-bottom:10%;padding-left:130px; box-shadow: 2px 2px 10px #1b93e1; border-radius: 4px; top: 14px; padding-top: 5%;">
        <h2 style="text-align: center;margin-top: 6%;font-family: fantasy; padding-right:13%"> ADD PRODUCT STOCK</h2>


    <br>
    <div class="row">
     <div class="col-md-3" style="text-align:right; padding-top:8px;">
        <label>Date</label>
      </div>
      <div class="col-md-6">
        <input type="date" class="form-control" name="stock_date" style="width:500px;" required autofocus>
      </div>
    </div>
    <br>
    <div class="row">
     <div class="col-md-3" style="text-align:right; padding-top:8px;">
        <label>Category</label>
      </div>
      <div class="col-md-6">
        
         <select required name="category_id" id="category" class="form-control" style="width:500px;" required autofocus>
         </div>
    </div>
    <br>
    <div class="row">
     <div class="col-md-6">
         <option selected disabled value="">---select---</option>
         <?php
         
         $sql=mysqli_query($con,"SELECT * FROM tbl_category ORDER BY categoryname");
         while($row=mysqli_fetch_assoc($sql))
         {
           echo "<option value='".$row['category_id']."'>".$row['categoryname']."</option>";
         }
          ?>
          </select>
      </div>
    </div>
    <br>
    <div class="row">
     <div class="col-md-3" style="text-align:right; padding-top:8px;">
        <label>Food</label>
      </div>
      <div class="col-md-6">
        <select  name="food_id" id="food" class="form-control" style="width:500px;" required autofocus>
        <option selected disabled value="">---select---</option>
      </select>
      </div>
    </div>
    <br>
    <div class="row">
     <div class="col-md-3" style="text-align:right">
        <label>Stock Status</label>
      </div>
      
  <label style="margin-left:15px">
  <input type="radio" name="radio" value="1" />
  
      <span>ADD</span>

  </label>

  <label style="margin-left:30px">
    <input type="radio" name="radio" value="0" />
 
      <span>REMOVE</span>

  </label>

    </div>
     <br>
    <div class="row">
     <div class="col-md-3" style="text-align:right; padding-top:8px;">
        <label>Quantity</label>
      </div>
      <div class="col-md-6">
        <input type="text" class="form-control" name="quantity" style="width:500px;" placeholder="Enter Quantity" required autofocus>
      </div>
    </div>
     <br>
     <div class="row">
     <div class="col-md-3" style="text-align:right; padding-top:8px;">
        <label>Description</label>
      </div>
      <div class="col-md-6">
        <input type="textarea" class="form-control" name="stock_description" style="width:500px;" placeholder="Enter Description" required autofocus>
      </div>
    </div>
    <br>
     <div class="row">
      <input type="submit" name="submit" value="SAVE" class="btn btn-primary" style="margin-left:38%">
    </div>
    <br>
     </div>
</form>
</body>
</html>
<?php
include("footer.php");
?>

ajax.php

<?php

include "config.php";


// Fetch food list by categoryid

   $categoryid = $_POST['categoryid'];

   $response = array();

   $sql=mysqli_query($con,"SELECT * FROM tbl_food WHERE category_id='".$_POST["categoryid"]."' ORDER BY food_name");
         while($row=mysqli_fetch_array($sql))
         {
            $id=$row["food_id"];
            $name=$row["food_name"];

            $response[] = array("id" => $id, "name" => $name);
         }
   echo json_encode($response);
   exit;
   ?>

0 个答案:

没有答案