Complete next field without user having to give TAB

Question

Complete next field without user having to give TAB

Navigation

#1 by (3 votes)
#2 by (2 votes)

3

By clicking on the button next to UF the user opens a table with the states of Brazil, and from the state selection the other fields are completed, so far so good I could do, however I have to click inside the input and then somewhere else or give TAB, to complete the fields, is there any way I can adapt my function to complete the field immediately, without having to give TAB or anything like that? To make life easier for the user

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);
}
?>

php javascript

asked by anonymous 17.10.2017 / 20:59

2 answers

2

Adds a listener to document that will check the value in input estado when there are clicks on the page (when you choose a modal option). If there are changes in 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 );
            });
        }
    });
});

17.10.2017 / 22:34

How to replicate master upgrade to branches in Team Foundation Server? Check if multiple columns contain a value?

score 3 · Accepted Answer

You are using the function through the event handler onblur (or just blur in jquery). That is, it will run whenever the field loses the focus state ( onfocus ).

In this case, change your javascript function to use algua 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><optionvalue="">-- selecione --</option>
    <option value="Valor 1">Valor 1</option>
    <option value="Valor 2">Valor 2</option>
</select>

Update

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

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

In this way, you have two options, either to move the update code into JavaScript code or to manually trigger the trigger event. I find the second option simpler.

Just where you enter the value, also insert the call of the event change :

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