Code to add subcategories to a dropdown based on category dropdown selectio

[GlenRogers]

I have a page to add products. On this page is a 'categorey' dropdown and a 'subcategory' dropdown.
The subcategory dropdown should fill with the options based on the category dropdown selection.
The code I have so far does not fill the subcat dropdown, can anyone see a problem?

code

include 'connect.php':
if(isset($_POST['cat'])){
    $cat = intval($_POST['cat']);
    $query = "SELECT subcat_id, subcategory FROM `subcategories` WHERE cat_id = $cat";
    $result = $link->query($query) or die('error');
    $subcatOps = '';
    if(mysqli_num_rows($result)){
        while ($row = mysqli_fetch_assoc($result)) {
            $subcatOps .= "\n\t<option value='{$row['subcat_id']}'>{$row['subcategory']}</option>";
        }
    }
    echo $subcatOps;
}

annd the form

<form class='adminform1' action='add_products.php' method='post' enctype='multipart/form-data' name='image_upload_form' id='image_upload_form'>
                <?php
                   include '../inc/categorydropdown.php';
                    ?>
                   <span class='formheading'>Add Product</span><br /><br />
                   <p><b>Choose Image</b><br /><input name="image_upload_box" type="file" id="image_upload_box"  /></p>
                   <b>Name</b><br /><input type=text name="aname" /><br />
                   <b>Description</b><br /><textarea rows="12" cols="40" name="adescription"></textarea><br />
                   <b>Price</b><br /><input type=text name="aprice" /><br />
                   <b>Product Code</b><br /><input type=text name="acode" /><br />
                   <p><label for="cat">Category</label>
                   <select name="cat" id="cat">
                      <?php echo $op;?>   
                   </select><br />
                   <label for="subcat">Subcategory</label>
                  <select name="subcat" id="subcat"> </select></p>
                  <br />
                  <br />
                  <input type='submit' id='submit' name='submit' value='Add Product' />
                  <input type='hidden' value='new' /><br />

            </form>
           <script>
             //bind category dropdown change event
             $('#cat').change(function(){
                getSubCat();
             });
             //change subcat dropdown
            function getSubCat(){
               cat = $('#cat').val();
               $.post("../inc/subcat.php", { cat: cat }).done(function(data) {
                  $('#subcat').html(data);
               });
            }
            //run on page load
            getSubCat();
          </script>

Thanks for looking.

[broj1]

Line 13:

<?php echo $op;?>

should probably create the html for options for the categories dropdown. But I can't find where $op is defined. Have you checked the generated code for the categoties dropdown?

[paulkd]

I've posted some code on cats/subcats. Hope it helps. See last post.

Click Here

[GlenRogers]

$op comes from the include

<?php include '../inc/categorydropdown.php ?>

The category dropdown box works ok and is populated with the categories as it should be.
This is categorydropdown.php

<?php
   include 'connect.php';
   //populate form dropdown box
   $op = '';
   $r = "SELECT cat_id, category FROM categories ORDER BY cat_id";
   $result = $link->query($r);
   if (mysqli_num_rows($result)){
      while ($d = mysqli_fetch_assoc($result)){
         $op .= "\n\t<option value='{$d['cat_id']}'>{$d['category']}</option>";
      }
   }
?>

[broj1]

maybe the ajax part is playing up. Can you test it by inserting this between lines 31 and 32:

alert(data);

It should display an alert box with the html code for options.

You could also check the generated code for the subcategories dropdown with web developer add-on for Firefox (or similar dev tool).

If this is OK we'll go further.

[GlenRogers]

Theres no alert showing. im downloading that add on now.
Does it sound like an ajax problem then?

[GlenRogers]

Its all sorted now. I had deleted my the jquery link by mistake. When i put it back the alert worked, and told me i had : instead of ; somewhere! So simple but it had me baffled.

Thanks guys!

I know this is solved, but can't help thinking that ajax can be overused sometimes. If the data is pretty much static - thast is, you don't add many cats/subcats to the DB anymore, then you could use a pure js version - after retrieving the data on page load from php.

Here's an example I created a few months ago; http://diafol.blogspot.co.uk/2013/02/creating-linked-select-dropdowns-from.html

[Banderson]

@diafol I agree. In my development I can do without Ajax completely as PHP can do what Ajax can do if coded correctly, on the fly(eg: return errors()).

I'd also like to add that the more javascripts you add to a page the slower it can become for the client since these types are client side.
My verdict, if you want speed then code keep your "code => standards" and stay on the sever side as much as possible.