Autofill without classes

I posted earlier with classes as there was issue dynamic rows, but below script which i am sharing is showing the same issue which is (autofil stil not working with dependent lists) and here no dynamic rows involved so classes not needed in place of IDs but still not working

```
// add depdent list code
<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>  
    
<Select  class="state form-control text-end" name="state[]" id = "state">
<option value="">select Service</option></select>       
        
<Select  class="city form-control text-end" name="city[]" id = "city"   onchange="GetDetail(this.value)" >
<option value="">Select Machine</option></select>
//add input fields which will take autofill values          
                
<label>First Name:</label> <input type="text" name="first_name"  id="first_name" class="form-control">
<label>Last Name:</label><input type="text" name="last_name"  id="last_name" class="form-control" >
</html></body>      
Now here is script code for both autofill and dependent drop down  list :

             <script>
        // onkeyup event will occur when the user
        // release the key and calls the function
        // assigned to this event
        function GetDetail(str) {
            if (str.length == 0) {
                document.getElementById("first_name").value = "";
                document.getElementById("last_name").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
                        
                        document.getElementById
                            ("first_name").value = myObj[0];
                        
                        // Assign the value received to
                        // last name input field
                        document.getElementById(
                            "last_name").value = myObj[1];
                    }
                };

                // xhttp.open("GET", "filename", true);
                xmlhttp.open("GET", "gfg.php?city=" + str, true);
                
                // Sends the request to the server
                xmlhttp.send();
            }  }
//script for depdent list handling
 $(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);
                      }  }); });     });
```
back end script files for databse
```
// Here is response.php file which handle dependent 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;
?>
```

So you’re saying GetDetail isnt working. What does the networking tab say?

  1. What does it say your Javascript sent to the server? (Check the Request)
  2. What does it say your PHP send back to the Javascript? (Check the Response)

yes problem start when Get detail event have to trigger, First drop down list showing value correctly, 2nd list follow it and even 3rd follow second and working fine, after that problem start which is that

First and Last name do not appear in auto fill fields after selecting value from the 3rd list

Okay… and what does it say after you choose an option for City?

afterI choose an option for City then network tab

So if that’s after you’ve selected a dropdown for City, then the request was never sent to the server. Does the console tab show an error?

no, nothing in console tab, is there any issue with code ??? does I mis anything or wrongly wrote ?

Okay… lets step backward then to find where the problem is…

Change this

 function GetDetail(str) {
            if (str.length == 0) {

to this:

 function GetDetail(str) {
            console.log("GetDetail: "+str);
            if (str.length == 0) {

save, load the page, select a city dropdown, and check the console again.

after your recommended changes console tab saying following
network tab1

So it runs the function, and has a value… where does the code go then…

xmlhttp.send();
console.log(xmlhttp);

same test; check the console.

XMLHttp Request index:112

its showing as (which mean its also working ???

And you’re 100% sure that the request hasnt appeared in the networking window?

I dont… see how we get here in the code without the request going out.

What does xmlhttp.readyState say if you put it into that log line?

123
sorry , i forgot to refresh on before,
when i modified this then above pic message appear
xmlhttp.send();
console.log(xmlhttp);

following message display, sorry i forgot to refresh before

123

so that says the request was sent. The Network tab should show the outgoing request…

network tab

okay, so there it is at the bottom. If you click on the gfg.php line, it should give you the details of the request and the response (i can see it has status 200, meaning it returned). What does the Response to the request say?

gfg.php file showing following
gfg

and response .php is showing nothing but just blank white page

so your PHP is returning bad (or rather, no) data.

We’ve at least ruled out the Javascript for now. So thats progress.

Is your query in gfg.php valid? Does your database have a record in table machine1 for user_id 1?