Autofill not working with auto complete in my form

[itsumarnazir]

I have small form where I am trying to select first input field by autofill, and later i am looking that when I autocomplete first input field, other fields should automatically fill out. here is my php code and javascript:

<form method="POST" action="abc.php">
                     <tr id="TRow" class="d-none">
                       <td>
                     <input type = "text" class="scode form-control text-end" name="scode[]" id="user_id"               onchange="GetDetail(this.closest('tr'))" onchange="Calc(this);">
                     <div id="countryList"></div>
                   
                           </td>
                              <td><input type="text" class="qty form-control text-end" name="qty[]"  id="ccc" onchange="Calc(this);"></td>
                           <td><input type="text" class="price1 form-control text-end"  name="price1[]"  id="ddd" onchange="Calc(this);"></td>
                           <td><input type="text" class="discunt form-control text-end" name="discunt[]"  id="eee" onchange="Calc(this);"></td>
                      </tr>
                    </form>
**Autocomplete java script code**
                        <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
                         <script>
                      $(document).ready(function() {
                     $('#user_id').keyup(function() {
                var query = $(this).val();
                if (query != '') {
                    $.ajax({
                        url: 'searchCountry.php',
                        method: 'POST',
                        data: {
                            query: query
                        },
                        success: function(response) {
                            $('#countryList').fadeIn();
                            $('#countryList').html(response);
                        }
                    });
                } else {
                    $('#countryList').fadeOut();
                    $('#countryList').html('');
                }
            });

            $(document).on('click', 'li', function() {
                $('#user_id').val($(this).text());
                $('#countryList').fadeOut();
            });

            $('#addCountryForm').submit(function(event) {
                event.preventDefault();
                var user_id = $('#user_id').val();
                $.ajax({
                    type: 'POST',
                    url: 'addCountry.php',
                    data: {
                        user_id: user_id
                    },
                    success: function(response) {
                        $('#countryList').hide();
                        $('#message').html(response).show();
                    }
                });
            });
        });
    </script>

Autofill code in Java script

 <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(".scode").value;
                      if (str.length == 0) {
                              row.querySelector(".qty").value = "";
                              row.querySelector(".price").value = "";
                              row.querySelector(".discunt").value = "";
                                   row.querySelector(".tot4").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];
                          row.querySelector(".discunt").value = myObj[2];   
                           row.querySelector(".tot4").value = myObj[3];
                            }
                              };

                      // xhttp.open("GET", "filename", true);
                       xmlhttp.open("GET", "gfg.php?user_id=" + str, true);

                         // Sends the request to the server
                          xmlhttp.send();
                           }
                             }
                    </script>

[m_hutley]

@itsumarnazir

onchange="Calc(this);"

so what’s Calc do?

[itsumarnazir]

well if we delete this code, it doesnt effect the script, this code is useless