i am using autofill feature in my form, it was working fine when there was one drop down list. But when I hav to use multiple dependent list, then its stop taking values automatically from gfg.php. here is my complete code. (Auto fill in Form working fine when there is one depednt list (Select Machine) ) but when I added two parents list, (Service and Type) with reponse.php file then autofil stop working. here is my code : (some people saying autofill cant work with depednt drop down list, if that true then guide me)
<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)) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php
}
} ?> </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" onchange="GetDetail(this.closest('tr'))">
<option value="">Select Machine</option></select></td>
</td>
<td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" onfocus="Calc(this);"></td>
<td><input type="text" class="price form-control text-end" name="price1[]" id="ddd" onfocus="Calc(this);" ></td>
<td class="NoPrint"><button type="button" class="btn btn-success" style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
</tr> </tbody> </table>
// code for depednt drop down list
<script>
$(document).ready(function() {
$("#country").on('change', function() {
var countryid = $(this).val();
$.ajax({
method: "POST",
url: "response.php",
data: {
id: countryid
},
datatype: "html",
success: function(data) {
$("#state").html(data);
$("#city").html('<option value="">Select Machine</option');
}
});
});
$("#state").on('change', function() {
var stateid = $(this).val();
$.ajax({
method: "POST",
url: "response.php",
data: {
sid: stateid
},
datatype: "html",
success: function(data) {
$("#city").html(data);
}
});
});
});
</script>
// code for autofill in the form
<script>
// onkeyup event will occur when the user
// release the key and calls the function
// assigned to this event
function GetDetail(row) {
let str = row.querySelector(".city").value;
if (str.length == 0) {
row.querySelector(".qty").value = "";
row.querySelector(".price").value = "";
return;
} else {
// Creates a new XMLHttpRequest object
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
// Defines a function to be called when
// the readyState property changes
if (this.readyState == 4 &&
this.status == 200) {
// Typical action to be performed
// when the document is ready
var myObj = JSON.parse(this.responseText);
// Returns the response data as a
// string and store this array in
// a variable assign the value
// received to first name input field
row.querySelector(".qty").value = myObj[0];
row.querySelector(".price").value = myObj[1];
}
};
// xhttp.open("GET", "filename", true);
xmlhttp.open("GET", "gfg.php?user_id=" + str, true);
// Sends the request to the server
xmlhttp.send();
}
}
</script>
// Response .php file which handle dependent drop down list
<?php
include_once("db.php");
if (!empty($_POST["id"])) {
$id = $_POST['id'];
$query = "select * 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>';
}
}
} elseif (!empty($_POST['sid'])) {
$id = $_POST['sid'];
$query1 = "select * 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>';
}
}
}
//gfg.php to get autofill values from database
<?php
// Get the user id
$user_id = $_REQUEST['user_id'];
// Database connection
$con = mysqli_connect("localhost", "root", "", "hmis");
if ($user_id !== "") {
// Get corresponding first name and
// last name for that user id
$query = mysqli_query($con, "SELECT qty1, uprice FROM machine1 WHERE user_id ='$user_id'");
$row = mysqli_fetch_array($query);
// Get the first name
$ccc = $row["qty1"];
$ddd = $row["uprice"];
}
// Store it in a array
$result = array("$ccc", "$ddd");
// Send in JSON encoded form
$myJSON = json_encode($result);
echo $myJSON;
?>