Complete next field without user having to give TAB

Question

By clicking the button next to UF the user opens a table with the states of Brazil, and from the choice of the state the other fields are completed, until then all well I was able to do, but I have to click inside the input and then elsewhere or give TAB, To complete the fields, is there any way that I can adapt my function to complete the field immediately, without having to give TAB or anything like ? To make the user’s life easier

index php.

<script type="text/javascript">
$(document).ready(function(){
    $("input[name='estado']").on("change", function(){
        var $nome_estado = $("input[name='nome_estado']");
        var $aliq_base_icms = $("input[name='aliq_base_icms']");
        var $aliq_icms = $("input[name='aliq_icms']");
        var $icms_subst_sn = $("input[name='icms_subst_sn']");
        var $insc_est_subst = $("input[name='insc_est_subst']");
        var $aliq_icms_subst = $("input[name='aliq_icms_subst']");
    
        $.getJSON('function_est.php',{
                estado: $ ( this ).val()
        },function( json ){
                $nome_estado.val ( json.nome_estado );
                $aliq_base_icms.val ( json.aliq_base_icms );
                $aliq_icms.val ( json.aliq_icms );
                $icms_subst_sn.val ( json.icms_subst_sn );
                $insc_est_subst.val ( json.insc_est_subst );
                $aliq_icms_subst.val ( json.aliq_icms_subst );
        });
    });   
});
</script>

<div class="col-lg-12">  
    <div class="col-lg-3 input-group" style="padding-left:16px;"><!-- Inicio Input ID -->
        <label for="ex1">UF: </label>
        <input type="text" class="form-control estado" name="estado">
        <span class="input-group-btn">
            <button class="btn btn-secondary" style="margin-top:25px;" type="button" data-toggle="modal" data-target="#Modal">...</button>
        </span><br>
    </div><br>
</div>

<div class="col-lg-12">
    <div class="col-lg-5"><!-- Inicio Input ID -->
        <label for="ex1">Estado: </label>
        <input type="text" class="form-control" name="nome_estado"><br>
    </div>
</div>

<div class="col-lg-12">
    <div class="col-lg-3"><!-- Inicio Input ID -->
        <label for="ex1">Alíquota Base do ICMS: </label>
        <input type="text" class="form-control" name="aliq_base_icms"><br>
    </div>
</div>

<div class="col-lg-12">  
    <div class="col-lg-3"><!-- Inicio Input ID -->
        <label for="ex1">Alíquota do ICMS: </label>
        <input type="text" class="form-control"  name="aliq_icms"><br>
    </div>
</div>

                <script>
                        $(document).on('click', '.get-estado', function() {
                            var value = $(this).text();
                            $('.close').trigger('click');
                            $('.estado').val(value);
                        });
                        $(document).on('click', '.get-nome_estado', function() {
                            var value = $(this).siblings('.get-estado').text();
                            $('.close').trigger('click');
                            $('.estado').val(value);
                        });
                </script>

function_est.php

<?php

include_once("conn.php");

function retorna($estado, $conn){

    $result = "SELECT * FROM estados WHERE estado = '$estado' ";

    $resultado = mysqli_query($conn, $result);

    // DECLARA A VARIAVEL
    $valores = array();

    if($resultado){

        $row = mysqli_fetch_assoc($resultado);
        $valores['nome_estado'] = $row['nome_estado'];
        $valores['aliq_base_icms'] = $row['aliq_base_icms'];
        $valores['aliq_icms'] = $row['aliq_icms'];
        $valores['icms_subst_sn'] = $row['icms_subst_sn'];
        $valores['insc_est_subst'] = $row['insc_est_subst'];
        $valores['aliq_icms_subst'] = $row['aliq_icms_subst'];

    } else {
        return json_encode(array( 'error' => mysqli_error($conn) ));        
    }

        return json_encode($valores);

}

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

Answer 1

You are using the function through the Event Handler onblur (or just Blur jquery). That is, it will be executed whenever the field loses its focus state (onfocus).

In this case, change your javascript function to use an event like onchange:

$('select').on('change', function() {
    alert( this.value );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="">-- selecione --</option>
    <option value="Valor 1">Valor 1</option>
    <option value="Valor 2">Valor 2</option>
</select>

Update

There was a detail that went unnoticed. This detail is the way your code inserts the selected value in the modal for the input. Unfortunately, the event onchange is only fired (Triggered) when a user interaction occurs. Your input is having an interaction via code. Through the following excerpt:

$('.estado').val(value);

This way, you have two options, move the update code into the Javascript code or perform Trigger event manually. I find the second most simple option.

Simply, where you enter the value, also enter the event call change:

$('.estado').val(value).change();

Answer 2

Adds a Listener in the document which will verify the value in input estado when there are clicks on the page (when you choose an option in the modal). If there are changes in the said input, the function is called:

$(document).ready(function(){
    var estado_form = $('input[name=estado]'); // armazeno o elemento numa variável
    var estado_val = estado_form.val(); // pego o valor original
    $(document).on("click", function(){
        if(estado_val != estado_form.val() && estado_form.val() != ""){ // verifico se o valor é diferente e não pode estar vazio
            estado_val = estado_form.val(); // atribuo valor atual

            var $nome_estado = $("input[name='nome_estado']");
            var $aliq_base_icms = $("input[name='aliq_base_icms']");
            var $aliq_icms = $("input[name='aliq_icms']");
            var $icms_subst_sn = $("input[name='icms_subst_sn']");
            var $insc_est_subst = $("input[name='insc_est_subst']");
            var $aliq_icms_subst = $("input[name='aliq_icms_subst']");

            $.getJSON('function_est.php',{
                    estado: estado_form.val()
            },function( json ){
                $nome_estado.val ( json.nome_estado );
                $aliq_base_icms.val ( json.aliq_base_icms );
                $aliq_icms.val ( json.aliq_icms );
                $icms_subst_sn.val ( json.icms_subst_sn );
                $insc_est_subst.val ( json.insc_est_subst );
                $aliq_icms_subst.val ( json.aliq_icms_subst );
            });
        }
    });
});