Fill in next fields from a populated PHP input or select

Question

I’m new here and beginner in PHP, but I’m doing a project where I need to fill some form input with data coming from the database from an input or select already filled previously.

My user database contains 4 columns: ip, user, sector and homeOffice

Already my form (index.php) has:

<form action="#" method="POST">
  <div class="form-row justify-content-center">
      <div class="form-group col-md-3">
          <label for="inputWlan">Wlan</label>
          <input type="text" name="inputWlan" class="form-control" id="inputWlan"
              placeholder="192.168.1." disabled>
      </div>
      <div class="form-group col-md-1">
          <label for="inputIp">IP</label>
          <input type="text" name="inputIp" class="form-control" id="inputIp"
              placeholder="IP">
      </div>
      <div class="form-group col-md-5">
          <label for="inputUsuario">Usuário</label>
          <input type="text" name="inputUsuario" class="form-control"
              id="inputUsuario" disabled>
      </div>
  </div>
  <div class="form-row justify-content-center">
      <div class="form-group col-md-4">
          <label for="inputSetor">Setor</label>
          <input type="text" name="inputSetor" class="form-control"
              id="inputSetor" disabled>
      </div>
      <div class="form-group col-md-3">
          <label for="inputHomeOffice">Home Office</label>
          <input type="text" name="inputHomeOffice" class="form-control"
              id="inputHomeOffice" disabled>
      </div>
  </div>
</form>

I made some attempts with Javascript but always gave error saying $.getJSON is not a function, as follows the following JS code

Custom File Name.js

$(document).ready(function () {
    $("input[name='inputIp']").blur(function () {
        var $usuario = $("input[name='inputUsuario']");
        var $setor = $("input[name='inputSetor']");
        var $homeOffice = $("input[name='inputHomeOffice']");
        var ip = $(this).val();
        $.getJSON("functionUsuario.php", { ip },
            function (retorno) {
                $usuario.val(retorno.usuario);
                $setor.val(retorno.setor);
                $homeOffice.val(retorno.homeOffice);
            });
    });
});

And in the PHP code (functionUsuario.php) I collected the database data returning a JSON to that same Javascript

<?php

include_once("../../../config/conexaodb.php");

function retorna($ip, $conn) {
    $search = mysqli_query($conn, "SELECT * FROM usuario WHERE ip = '$ip' LIMIT 1"); 
    if($search->num_rows) {
        $row_usuario = mysqli_fetch_assoc($search);
        $valores['usuario'] = $row_usuario['usuario'];
        $valores['setor'] = $row_usuario['setor'];
        $valores['homeOffice'] = $row_usuario['homeOffice'];
    } else {
        $valores['usuario'] = 'Informações não encontradas';
    }

    return json_encode($valores);
}

if(isset($_GET['inputIp'])) {
    echo retorna($_GET['inputIp'], $conn);
}

mysqli_close($conn)

Someone could help me solve this case?

Answer 1

you have already included the jquery file in your main page, preferably before the custom.js, if not yet, add the line below in before any Javascript in your HTML.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>