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.

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?

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

Click Here

$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>";
      }
   }
?>

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.

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

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!

Member Avatar
diafol

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

@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.