2015-04-02 97 views
0

我想要創建表格html + php。我的數據庫中有2個表格。2表格(select) - 1依賴於2

  1. 分類: id_category,類
  2. 乳業: id_dairy,id_category,PRODUCT_NAME

現在是問題。我如何用2個select下拉列表創建1個表格。沒有AJAX的PHP可以做到嗎?

我的意思是 - 我想要選擇類別,然後選擇沒有刷新頁面的產品。

代碼:

<form role="form" action="kalorie.php" method="post"> 
     <div class="form-group"> 
     <label for="kategoria">Kategoria:</label> 
     <select class="form-control" name="kategoria"> 
      <option>Wybierz kategorie</option> 
      <?php 
       $sql_1 = "SELECT * FROM produkty"; 
       $result_1 = mysqli_query($conn, $sql_1); 

       while($row_1 = mysqli_fetch_assoc($result_1)) { 
       echo '<option>'.$row_1["produkt"].'</option>'; 
       } 

       $kat = $_POST['kategoria']; 
      ?> 
     </select> 
     <select class="form-control" name="produkt"> 
      <option>Wybierz produkt</option> 
      <?php 
       $sql_2 = "SELECT * FROM $kat"; 
       $result_2 = mysqli_query($conn, $sql_2); 

       while($row_2 = mysqli_fetch_assoc($result_2)) { 
       echo '<option>'.$row_2["produkty"].'</option>'; 
       } 
      ?> 
     </select> 
     </div> 
     <button type="submit" class="btn btn-default" name="oblicz">Wyślij</button> 
    </form> 
+1

如果你不想刷新你需要AJAX.It做頁面的無刷新頁面可能以獨特的方式從服務器發送/獲取數據。 – abaracedo 2015-04-02 16:46:50

+0

您至少需要Javascript/jQuery才能完成此操作。 – CodeGodie 2015-04-02 16:50:02

+0

+1以上已經說過。沒有ajax的唯一方法是使用onchange或onselect事件,但會刷新頁面並預先填充下一個選擇列表。 – 2015-04-02 16:53:25

回答

0

Ajax是這個最好的解決方案。 但是,如果你想要一個替代方案,你可以使用「iframe」並在該框架中提交ypur形式。

0

非Ajax解決方案:

加載你的產品子類成類別ID鍵入一個JavaScript對象。在類別選擇列表中更改類別時,請將產品列表中的選項換出。

<script> 
var produkts = { 
<?php 
$sql_2 = "SELECT * FROM $kat"; 
$result_2 = mysqli_query($conn, $sql_2); 

$id_category = 0; 
list($delim1, $delim2) = array('', ''); 
while($row_2 = mysqli_fetch_assoc($result_2)) { 
    $delim2 = '"'; 
    $row_2 = $row['value']; 
    if ($id_category != $row_2['id_category']) { 
     $id_category = $row_2['id_category']; 
     echo $delim1 . $id_category . ': "'; 
     $delim1 = '", '; 
    } 
    echo '<option>' . $row_2['produkty'] . '</option>'; 
} 
echo $delim2; 

?> 
}; 
// example: {1: "<option>cheese</option><option>butter</option>", 2: "<option>ice cream</option>"} 
</script> 

<form role="form" action="kalorie.php" method="post"> 
    <div class="form-group"> 
    <label for="kategoria">Kategoria:</label> 
    <select class="form-control" name="kategoria"> 
     <option>Wybierz kategorie</option> 
     <option value="1">Me</option> 
     <option value="2">You</option> 
     <?php 
      $sql_1 = "SELECT * FROM produkty"; 
      $result_1 = mysqli_query($conn, $sql_1); 

      while($row_1 = mysqli_fetch_assoc($result_1)) { 
      echo '<option>'.$row_1["produkt"].'</option>'; 
      } 

      $kat = $_POST['kategoria']; 
     ?> 
    </select> 
    <select class="form-control" name="produkt"> 
     <option>Wybierz produkt</option> 
    </select> 
    </div> 
    <button type="submit" class="btn btn-default" name="oblicz">Wyślij</button> 
</form> 

<script> 

document.querySelector('select[name=kategoria]').addEventListener('change', function (evt) { 
    var kat = evt.target; 
    var kat_sel = kat.options[kat.selectedIndex].value 
    document.querySelector('select[name=produkt]').innerHTML = produkts[kat_sel]; 
}) 

</script> 

Mocked up JSFiddle demo.