Jquery - Autocomplete ViaCEP in multiple lines

Question

Jquery - Autocomplete ViaCEP in multiple lines

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm using ViaServ's WebService to do the street autocomplete in my registration form, however it's a form where 20 lines, each line contains: ZIP + STATE OF THE CONDO when filling in the zip it has to autocomplete the street only referring to that cep of the same line, I tried using $("cep").next("rua").val(dados.lougradouro) and I could not.

// HTML

<table>
<tbody>
    <tr>
        <td><input type="text" name="cep_streetcond[]"></td>
        <td><input type="text" name="street_streetcond[]"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep_streetcond[]"></td>
        <td><input type="text" name="street_streetcond[]"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep_streetcond[]"></td>
        <td><input type="text" name="street_streetcond[]"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep_streetcond[]"></td>
        <td><input type="text" name="street_streetcond[]"></td>
    </tr>
</tbody>

// JQUERY

$(document).ready(function() {
    var cep_cond = $("input[name='cep_streetcond[]']");
    var rua_cond = $("input[name='street_streetcond[]']");

    cep_cond.blur(function() {
        var cep_replace = $(this).val().replace(/\D/g, '');

        rua_cond.val("Buscando...");

        $.getJSON("https://viacep.com.br/ws/" + cep_replace + "/json/?callback=?", function(dados) {
            if (!("erro" in dados)) {
                $("input[name='cep_streetcond[]']").next().val(dados.logradouro);

            } else {
                alert("CEP não encontrado");
            }
        });
    });
});

javascript jquery ajax json

asked by anonymous 26.10.2018 / 05:35

2 answers

0

The code below is a working example, let us understand.

All our cep fields are given the "name" attribute: "cep".

We have added an event on all elements with name = cep.

When the event is triggered we get the value typed in "cep" and save it in the variable "cep" after the replace.

We saved the element that will receive the street of cep informed, to arrive at the same it was necessary to use the parents () looking for the tr's and taking the first one that would be the one that contains the same, after that we used the .find and found the element name "street"

With the code that the question author added to the search, we modified only to set the element "eRua" after checking whether it exists or not.

$(() => {
  $('[name="cep"]').on('focusout',function() {
    var cep = this.value.replace(/\D/g, '');
    var eRua = $($(this).parents('tr')[0]).find('[name="rua"]');
    $.getJSON("https://viacep.com.br/ws/" + cep + "/json/?callback=?", function(dados) {
      if (!("erro" in dados)) {
        eRua.val(dados.logradouro)
      } else {
        alert("CEP não encontrado");
      }
    });
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tbody><tr><td><inputtype="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
    <tr>
        <td><input type="text" name="cep"></td>
        <td><input type="text" name="rua"></td>
    </tr>
</tbody>
</table>

References:

FIND

PARENTS

GETJSON

26.10.2018 / 07:06

check date up to 2 months to current TypeError: string indices must be integers - PYTHON

score 0 · Accepted Answer

.next() will not find the input from the street, because next returns the next element, which in the case is none, since the CEP input is the only element within the <td> .

To find input from the street, you need to return to the common predecessor of the two inputs, which in this case is <tr> , with $(this).closest('tr') , after that you can find the street input with .find("input[name='street_streetcond[]']") .

$(document).ready(function() { 
    var cep_cond = $("input[name='cep_streetcond[]']"); 
    var rua_cond = $("input[name='street_streetcond[]']");

    cep_cond.blur(function() {
        var cep_replace = $(this).val().replace(/\D/g, '');
        var logadouro = $(this).closest('tr').find("input[name='street_streetcond[]']");

        logadouro.val("Buscando...");

        $.getJSON("https://viacep.com.br/ws/" + cep_replace + "/json/?callback=?", function(dados) {
            if (!("erro" in dados)) {
                logadouro.val(dados.logradouro);

            } else {
                alert("CEP não encontrado");
            }
        });
    });  
});