0

Good Day! :) I created a chained select using php and jQuery like on this page (http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/) and I created a javascript to add and delete select tags I get it somewhere on the internet but what happening is when I choose a category on the first row everything on the subcategory(all rows) will be enabled and same as on the product description. Just like this (http://i.stack.imgur.com/H9nfb.jpg) this is my code:

<html>
<head>
<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("select#type").attr("disabled","disabled"); 


        $("select#category").change(function(){
        $("select#type").attr("disabled","disabled");
        $("select#type").html("<option>wait...</option>");
        var id = $("select#category option:selected").attr('value');
        $.post("select_type.php", {id:id}, function(data){
            $("select#type").removeAttr("disabled");
            $("select#type").html(data);
        });

        });

        $("select#desc").attr("disabled","disabled");
        $("select#type").change(function(){
        $("select#desc").attr("disabled","disabled");
        $("select#desc").html("<option>wait...</option>");
        var id = $("select#type option:selected").attr('value');
        $.post("select_desc.php", {id:id}, function(data){
            $("select#desc").removeAttr("disabled");
            $("select#desc").html(data);
        });

        });
    $("form#select_form").submit(function(){
        var cat = $("select#category option:selected").attr('value');
        var type = $("select#type option:selected").attr('value');
        var descr = $("select#desc option:selected").attr('value');
        if(cat>0 && type>0 && descr>0)
        {
            var result = $("select#desc option:selected").html();
            $("#result").html('your choice: '+result);
        }
        else
        {
            $("#result").html("you must choose two options!");
        }
        return false;
    });
});
</script>

<script type="text/javascript">
        function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 2) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }




</script>
</head>
<body>
    <?php include "select.class.php"; ?>
    <form id="select_form">
        <input type="button" value="Add" onclick="addRow('tableID')" />

        <input type="button" value="Delete" onclick="deleteRow('tableID')"  
 />

    <table id="tableID">

    <tr>
        <td></td>
        <td>Category</td>
        <td>SubCategory</td>
        <td>Product Description</td>        
    </tr>


    <tr>

        <td><input type="checkbox" name="chkbox[]" /></td>
        <td>
        <select id="category" name="category[]">
            <?php echo $opt->ShowCategory(); ?>
        </select>
        </td>

        <td>
        <select id="type" name="type[]">
             <option value="0">choose...</option>
        </select>
        </td>

        <td>
        <select id="desc" name="desc[]">
             <option value="0">choose...</option>
        </select>
        </td>

    </tr>
    </table>

    <input type="submit" value="confirm" />
    </form>
    <div id="result" name="result[]"></div>
  </body>
</html>

help me how can I fix this and I want to put into the database all that I selected on the product description. This is for our thesis. :)

2
Contributors
1
Reply
13
Views
4 Years
Discussion Span
Last Post by LastMitch
0

help me how can I fix this and I want to put into the database all that I selected on the product description. This is for our thesis. :)

@xmangkan0rx

I think it's best if you have post this question to the author page because the author wrote that code.

Plus, the jQuery/javascript that you provide doesn't include an ajax code which you need to select info from the database.

You only provide how the dropdown list looks and works but not how you fetch the data.

As a thesis, this is not good because it looks incomplete.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.