I have an edit form modal with 3 input : name(text), category(select option), subcategory(select option)
I want the subcategory options updated when the category selection is changed. I have done this nested select option on the modal add before, and it works. But it doesn’t work when I’m trying to do the same at the edit modal. The Subcategory select option only displaying the subcategory’s value of the first row when I clicked the first row edit button. When I clicked the other row’s edit button, the subcategory select option in the form didn’t show anything.
On the add modal, I’m using jquery to set the subcategory value when category changed using .change event and make a request to get the subcategory data then I add and also set the id and the text from the subcategory data. Is there a way so the list of subcategory’s option in the edit form modal could be changed by the selected category? And should it using JS or there is any other simple way?
Here is the code
<!-- Table & Modal-->
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Category</th>
<th>Subcategory</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $ambilsemuadatastock = mysqli_query($conn, "SELECT n.idname, n.name, c.category, sc.category AS subcategory from name b JOIN category k ON n.idcategory = c.idcategory JOIN category sk ON n.idsubcategory=sc.idcategory");
$i = 1;
while ($data = mysqli_fetch_array($ambilsemuadatastock)) {
$idname = $data['idname'];
$name = $data['name'];
$category = $data['category'];
$subcategory = $data['subcategory'];
?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $name; ?></td>
<td><?php echo $category; ?></td>
<td><?php echo $subcategory; ?></td>
<td>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#edit<?= $idname; ?>">Edit</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete<?= $idname; ?>">Delete</button>
</td>
</tr>
<!-- The Edit Modal -->
<div class="modal fade modal-editname" id="edit<?= $idname; ?>">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Edit</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form method="POST">
<div class="modal-body">
<?php
$allcategory = mysqli_query($conn, "SELECT * FROM category WHERE parentcategory = 0");
$getdtname = mysqli_query($conn, "SELECT n.idname, n.name, n.idcategory, c.category, n.idsubcategory, sc.category AS subcategory, n.stock from name b JOIN category k ON n.idcategory = c.idcategory JOIN category sk ON n.idsubcategory=sc.idcategory WHERE idname = ('$idname')");
while ($dtname = mysqli_fetch_array($getdtname)) {
?>
<input type="text" id="nameedit" name="name" value="<?= $dtname['name']?>" class="form-control" required>
<br>
<select class="form-control" id="selopcatedit" name="category">
<?php foreach ($allcategory as $cat) { ?>
<option <?php if ($cat['idcategory'] == $dtname['idcategory']) {
echo "selected="selected"";
} ?> value="<?= $cat['idcategory']; ?>">
<?= $cat['category']; ?>
</option>
<?php } ?>
</select>
<br>
<select class="form-control" id="selopsubcatedit" name="subcategory">
<option value="">Choose Subcategory</option>
</select>
<br>
<input type="hidden" id="idnameedit" name="idname" value="<?= $dtname['name']?>">
<?php
}
?>
<button type="submit" class="btn btn-primary" name="updatename">Edit</button>
</div>
</form>
</div>
</div>
</div>
<?php
}
?>
</tbody>
</table>
</div>
Here is the JS
<!-- JS -->
<script>
$("#selopcatedit").change(function() {
var parentcat = $(this).val();
console.log(parentcat);
$.ajax({
url: 'getCatValue.php',
type: 'post',
data: {
parentcat: parentcat
},
dataType: 'json',
success: function(response) {
var len = response.length;
console.log(response);
$("#selopsubcatedit").empty();
for (var i = 0; i < len; i++) {
var idcategory = response[i]['idcategory'];
var category = response[i]['category'];
$("#selopsubcatedit").append("<option value='" + idcategory + "'>" + category + "</option>");
}
},
error: function(req, err) {
console.log('my message : ' + err);
}
});
});
</script>
I also make an event when the modal is showed, to do the same thing like the event change script above (set the subcategory’s value).
