Selecting categories and subcategories at inserting data into books table

0

votes

I have three tables in bookstore site. categories,subcategories and books I want to select categories and related subcategories at the time of inserting data into books table but subcategories cannot get id from category and did not show any subcat in list my code is as:

<th scope="col">Select Category</th>
<th scope="col"><select name="cat">
<?php
include("config.php");
$catsql = "SELECT * FROM categories;";
$catres = mysql_query($catsql);
while($catrow= mysql_fetch_assoc($catres)) {
echo "<option value='" . $catrow['id']
. "'>" . $catrow['cat'] . "</option>";
}
?>

</select></th>
</tr>
<tr>
<th scope="col">Select Subcategory
</th>
<th scope="col"><select name="subcat">
<?php
$cat=$catrow['id'];
$subsql="select * from subcat where catid=$cat;";
$subrs=mysql_query($subsql);
while($subrow=mysql_fetch_array($subrs)){
echo "<option value='" . $subrow['id']
. "'>" . $subrow['subcat'] . "</option>";

}
?>
</select>
</th>

phpmysqlselect

0

votes

You Should use Ajax call when user selects any category to fill subcategory drop down.

0

votes

I have done this using java script:

    <?php
    $db = new mysqli('localhost','root','','sha');
    $query = "SELECT * FROM categories;";
    $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $categories[] = array("id" => $row['id'], "val" => $row['cat']);
  }

  $query = "SELECT id, catid, subcat FROM subcat";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']);
  }

  $jsonCats = json_encode($categories);
  $jsonSubCats = json_encode($subcats);


?>

<!docytpe html>
<html>

  <head>
    <script type='text/javascript'>
      <?php
        echo "var categories = $jsonCats; \n";
        echo "var subcats = $jsonSubCats; \n";
      ?>
      function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
        for(var i = 0; i < categories.length; i++){
          select.options[i] = new Option(categories[i].val,categories[i].id);          
        }
      }
      function updateSubCats(){
        var catSelect = this;
        var catid = this.value;
        var subcatSelect = document.getElementById("subcatsSelect");
        subcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subcats[catid].length; i++){
          subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
        }
      }
    </script>

  </head>

  <body onload='loadCategories()'>
  <form action="storebooks.php" method="post"><table><tr><th scope="col">Select Category</th>
    <th scope="col"><select id='categoriesSelect' <select name="cid">
    </select></th>
  </tr>
<tr>
    <th scope="col">Select Subcategory
    </th>
    <th scope="col">
    <select id='subcatsSelect' name="subcatid">
    </select></th>
  </tr>
  <tr>
    <th scope="col"><p>Title</p></th>
    <th scope="col"><input name="title" type="text" /></th>
  </tr>
  <tr>
    <th scope="col">Author</td>
    <th scope="col"><input type="text" name="author" id="author" /></td>
  </tr>
  <tr>
    <td>description</td>
    <td><textarea name="bookdesc" cols="30" rows="15"></textarea></td>
  </tr>
  <tr>
    <th scope="col"><p>keywords</p></th>
    <th scope="col"><input name="keywords" type="text" /></th>
  </tr>
   <tr>
    <th scope="col"><p>Image</p></th>
    <th scope="col"><input name="image" type="text" /></th>
  </tr>
  <tr>
    <th scope="col"><p>Order</p></th>
    <th scope="col"><input name="order" type="text" /></th>
  </tr>
    <tr>
    <td></td>
    <td><input name="submit" type="submit" value="submit" id="submit" /></td>
  </tr>
</table>
</form>

</body>
</html>

Selecting categories and subcategories at inserting data into books table

2 Answers