Error finding cep with jquery via cep

Asked

Viewed 227 times

0

Speak personal, I am developing an edition page where on this screen contains the user data, in the same, we have a new address button, when clicking it opens a modal with the address fields (zip, street, neighborhood etc)but this modal is formed in jquery by clicking the new address button:

$('#add-row-address').click(function (e) {
        e.preventDefault();
        var codigo = $(this).data("codigo");
        var title = "Cadastro de endereço";
        var body = '<form autocomplete="on" class="form-address" id="form-address" action="ctb-address"> <div class="row-f">\
                            <div class="row-f">\
                                <label>\
                                    Rua\
                                </label>\
                                <input id="logradouro" class="inpt-null" name="rua_end" type="text"/>\
                            </div>\
                            <div class="row-f">\
                                <div class="row-m">\
                                    <label>\
                                        Cep\
                                    </label>\
                                    <input id="cep" class="inpt-null" name="cep_end" type="text"/>\
                                </div>\
                                <div class="row-m">\
                                    <label>\
                                        Estato\
                                    </label>\
                                    <input value="SP" id="uf" class="inpt-null" name="estado_end" type="text"/>\
                                </div>\
                            </div>\
                            <div class="row-f">\
                                <div class="row-m">\
                                    <label>\
                                        Cidade\
                                    </label>\
                                    <input value="São Paulo" id="localidade" class="inpt-null" name="cidade_end" type="text"/>\
                                </div>\
                                <div class="row-m">\
                                    <label>\
                                        Bairro\
                                    </label>\
                                    <input id="bairro" class="inpt-null" name="bairro_end" type="text"/>\
                                </div>\
                            </div>\
                            <div class="row-f">\
                                <div class="row-m">\
                                    <label>\
                                        N° Casa\
                                    </label>\
                                    <input id="numero" class="inpt-null" name="num_end" type="number"/>\
                                </div>\
                                <div class="row-m">\
                                    <label>\
                                        Complemento\
                                    </label>\
                                    <input class="inpt-null" name="complemento_end" type="text"/>\
                                </div>\
                            </div>\
                            <div class="footer-box">\
                                <input name="id_cont_end" value="' + codigo + '" type="hidden"/>\
                                <button id="btn-form-address" class="btn-green btn-default" type="submit"><span class="lnr lnr-checkmark-circle"></span> Salvar endereço</button>\
                            </div>\
                        </div></form>';

        ModalForm(title, body);
    });

I do not know if this is why the search does not work, I put the zip code and not search, I put the street and also not search, but in the registration form that is on another page works perfectly, I am using a code via ZIP adapted by a member of the forum:

var inputsCEP = $('#logradouro, #bairro, #localidade, #uf, #ibge');
    var inputsRUA = $('#cep, #bairro, #ibge');
    var validacep = /^[0-9]{8}$/;

    function limpa_formulario_cep(alerta) {
        if (alerta !== undefined) {
            alert(alerta);
        }

        inputsCEP.val('');
    }

    function get(url) {
        $.get(url, function (data) {
            if (!("erro" in data)) {
                if (Object.prototype.toString.call(data) === '[object Array]') {
                    var data = data[0];
                }
                $.each(data, function (nome, info) {
                    $('#' + nome).val(nome === 'cep' ? info.replace(/\D/g, '') : info).attr('info', nome === 'cep' ? info.replace(/\D/g, '') : info);
                });
            } else {
                limpa_formulario_cep("CEP não encontrado.");
            }
        });
    }

    $('#logradouro, #localidade, #uf').on('blur', function (e) {

        if ($('#logradouro').val() !== '' && $('#logradouro').val() !== $('#logradouro').attr('info') && $('#localidade').val() !== '' && $('#localidade').val() !== $('#localidade').attr('info') && $('#uf').val() !== '' && $('#uf').val() !== $('#uf').attr('info')) {

            inputsRUA.val('...');
            get('https://viacep.com.br/ws/' + $('#uf').val() + '/' + $('#localidade').val() + '/' + $('#logradouro').val() + '/json/');
        }
    });

    $('#cep').on('blur', function (e) {
        var cep = $('#cep').val().replace(/\D/g, '');
        if (cep !== "" && validacep.test(cep)) {
            inputsCEP.val('...');
            get('https://viacep.com.br/ws/' + cep + '/json/');

        } else {
            limpa_formulario_cep(cep === "" ? undefined : "Formato de CEP inválido.");
        }
    });

Anyone there? Help!!

  • You’ve seen this example: https://viacep.com.br/exemplo/jquery/

  • In the same, the function I use is just an adaptation to search by street also, in the first form that is in html, works perfectly, now in the second not, if you want to give some kind of error!

  • You checked if you’re not duplicating the id in the DOM? Exmeplo: has more than one $("#locality"), $("#patio") and etc...

  • has, but on different pages, it implies?

1 answer

0

Using the viacep two forms in the same file can not because the return of Json is defined as Street, Neighborhood, City and UF and to get the return you need these id’s that will be equal in the two forms. I still could not refactor this Json to be able to fill the separate forms within the same file, the idea would be to refactor the return with different id’s for each form. Separated into two files would be no problem because each one makes their call and return separately. If someone succeeds it would be nice to post here

Browser other questions tagged

You are not signed in. Login or sign up in order to post.