I was in lot of trouble in solving the above subject issue, But finally found very fine solution from @ Drummin Sir! Which work as follow
AS long as all names in the DB fields and code match, all the first selects should work and populate the select options. Once you add anything in the JS that is not recognized it will fail. Even parts that you think are not “called”. This is also why I wanted to know where qty and price are defined. I made a small DB table called assets just I could have those valid fields to play with and so where you see that in the code this is why. ADJUST or add a city id you will be able to find for testing.
assets.zip (733 Bytes)
When working with JS comment out most of it and take things one step at a time, using alert() to check values being passed.
Start with just that first country JS.
<script>
$(document).ready(function () {
$(document).on("change", ".country", function(){
// Get the current row element
let row = $(this).closest("tr");
// Get the country id from the current select element
let country_id = $(this).val();
// Use AJAX to send a request to the server-side script
$.ajax({
method: "POST",
url: "response.php",
data: {
id: country_id
},
datatype: "html",
success: function(data) {
// Find the state select element in the same row and update its options
row.find(".state").html(data);
// Find the city select element in the same row and clear its options
row.find(".city").html('<option value="">Select Machine</option>');
row.find('.qty').val('');
row.find('.price').val('');
}
});
});
// When the user changes the value of the state select element
$(document).on("change", ".state", function(){
// Get the current row element
let row = $(this).closest("tr");
// Get the state id from the current select element
let state_id = $(this).val();
// Use AJAX to send a request to the server-side script
$.ajax({
method: "POST",
url: "response.php",
data: {
sid: state_id
},
datatype: "html",
success: function(data) {
// Find the city select element in the same row and update its options
row.find(".city").html(data);
row.find('.qty').val('');
row.find('.price').val('');
}
});
});
$(document).on("change", ".city", function(){
// Get the current row element
let row = $(this).closest("tr");
// Get the state id from the current select element
let city_id = $(this).val();
if (city_id.length == 0) {
row.find('.qty').val('');
row.find('.price').val('');
//return;
} else {
// Use AJAX to send a request to the server-side script
$.ajax({
url: 'response.php',
type: 'POST',
dataType: 'JSON',
data: {cid: city_id} ,
success: function(response) {
row.find('.qty').val(response.qty);
row.find('.price').val(response.price);
}
});
}
});
});
</script> ~~~
My version of `response.php` uses individualized IF conditions instead of `} else {` and I use the same DB connection as in the form query. If you are using `db.php` for all that’s cool. Change my version…
You will notice I call for just the needed fields. Using prepared statements would be better but for now this is my version.
<?php
include_once 'db1.php';
if (!empty($_POST["id"])) {
$id = $_POST['id'];
$query = "SELECT id, state FROM state WHERE country_id=$id";
$result = mysqli_query($con, $query);
if ($result->num_rows > 0) {
echo '<option value="">Select Service</option>';
while ($row = mysqli_fetch_assoc($result)) {
echo '<option value="' . $row['id'] . '">' . $row['state'] . '</option>';
}
}
}
if (!empty($_POST['sid'])) {
$id = $_POST['sid'];
$query1 = "SELECT id, city FROM city WHERE state_id=$id";
$result1 = mysqli_query($con, $query1);
if ($result1->num_rows > 0) {
echo '<option value="">Select Machine</option>';
while ($row = mysqli_fetch_assoc($result1)) {
echo '<option value="' . $row['id'] . '">' . $row['city'] . '</option>';
}
}
}
if(!empty($_POST['cid'])){
$city_id = $_POST['cid'];
$query_asset = "SELECT qty, price FROM assets WHERE city_id=$city_id";
$result_asset = mysqli_query($con, $query_asset);
if ($result_asset->num_rows > 0) {
$row_asset = mysqli_fetch_assoc($result_asset);
$response = array('qty' => $row_asset['qty'], 'price' => $row_asset['price']);
}
echo json_encode($response);
exit;
}
?>
//Hopefully you can make the country selection and the states will be populated. If there are any problems stop and compare the query fields and table name to the database. If all good then add the next JS within the same `$(document).ready(function () {` as the first one.//
// in the end its form table
<table class="table table-bordered">
<thead class="table-success" style="background-color: #3fbbc0;">
<tr>
<th width="15%"><center>Type</th>
<th width="15%"><center>Service</th>
<th width="15%"><center>Machine</th>
<th width="5%"><center>Qty</th>
<th width="10%"><center>Rate</th>
<th width="5%"></th>
<button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" class="d-none">
<td>
<Select class="country form-control text-end" name="country[]" id = "country" >
<option value=""> Select Type</option>
<?php
include('db1.php');
$query = "select * from country";
// $query = mysqli_query($con, $qr);
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo '<option value="'.$row['id'].'">'.$row['name'].'</option>'."\r";
}
}
?>
</select>
</td>
<td>
<Select class="state form-control text-end" name="state[]" id = "state">
<option value="">select Service</option>
</select>
</td>
<td>
<Select class="city form-control text-end" name="city[]" id = "city">
<option value="">Select Machine</option>
</select>
</td>
<td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" value="" /></td>
<td><input type="text" class="price form-control text-end" name="price1[]" id="ddd" value="" /></td>
<td class="NoPrint"><button type="button" class="btn btn-success" style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
</tr>
</tbody>
</table>