PHP和Javascript中的多个类

Question

I'm new beginner in the php, html, css and working on a projekt(for my self). I got a form with dependent dropdown box, but i'm not allow to assign multiple classes, because it making conflict with my javascript. I would like to use the same class to keep my form similar. What i can do? if i choose to use multiple classes and then my javascript wouldn't work currecly. I got to dropdown box called "category" and "task_type" and i would like to use "form-control" class to keep my form similar in the javascript, i'm not allow to use form-control to times.

source code: https://www.allphptricks.com/dynamic-dependent-select-box-using-jquery-and-ajax/

Category: <select name="category" class="form-control" required>
    <option value="0">Select Category</option>
    <?php
    include('dbconnect.php');
    $sql = mysqli_query($DBcon,"SELECT * FROM category");
    while($row=mysqli_fetch_array($sql))
    {
        echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
    } ?>
</select>
<br/><br/>
Task Type:<select name="task_type" class="form-control" required>
    <option>Select Task Type</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".form-control").change(function()
        {
            var category_id=$(this).val();
            var post_id = 'id='+ category_id;

            $.ajax
            ({
                type: "POST",
                url: "ajax.php",
                data: post_id,
                cache: false,
                success: function(cities)
                {
                    $(".form-control").html(cities);
                }
            });

        });
    });
</script>

Answer 1

You can't use the form-control class for this, because you don't want the same action for both dropdowns. Give them IDs to distinguish them, and use the IDs in your selectors.

Category: <select id="category" name="category" class="form-control" required>
    <option value="0">Select Category</option>
    <?php
    include('dbconnect.php');
    $sql = mysqli_query($DBcon,"SELECT * FROM category");
    while($row=mysqli_fetch_array($sql))
    {
        echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
    } ?>
</select>
<br/><br/>
Task Type:<select id="task_type" name="task_type" class="form-control" required>
    <option>Select Task Type</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $("#category").change(function()
        {
            var category_id=$(this).val();
            var post_id = 'id='+ category_id;

            $.ajax
            ({
                type: "POST",
                url: "ajax.php",
                data: post_id,
                cache: false,
                success: function(cities)
                {
                    $("#task_type").html(cities);
                }
            });

        });
    });
</script>