On Load

Front-end JavaScript
, , , ,
#1

Olá, tenho o seguinte script:

<script type="text/javascript">
    $(document).ready(function () {
        $('#estado').on('change', function () {
            var id_estado = $(this).val();
            if (id_estado == '') {
                $('#cidade').prop('disabled', true);
            } else {
                $('#cidade').prop('disabled', false);
                $.ajax({
                    url: "<?php echo base_url('cidade'); ?>",
                    type: "POST",
                    data: {'id_estado': id_estado},
                    dataType: 'json',
                    success: function (data) {
                        $('#cidade').html(data);
                   },
                    error: function () {
                        alert('Ops! Algo deu errado, tente novamente!');
                    }
                });
            }
        });
    });
   </script>

Quando eu escolho um estado ele torca a cidade, porém eu quero deixar um estado fixo e que as cidades sejam carregadas automaticamente quando eu começar a preencher o campo endereço.

Poderiam me auxiliar a fazer isso, não entendo muito de JS e JQ.

Obrigado.

#2

Ideal seria você separar esse bloco do else numa função assim:

function loadCidades(id_estado) {
    $.ajax({
        url: "<?php echo base_url('cidade'); ?>",
        type: "POST",
        data: {'id_estado': id_estado},
        dataType: 'json',
        success: function (data) {
            $('#cidade').html(data);
        },
        error: function () {
            alert('Ops! Algo deu errado, tente novamente!');
        }
    });
}

Depois no else assim…

if (id_estado == '') {
    $('#cidade').prop('disabled', true);
} else {
    $('#cidade').prop('disabled', false);
    loadCidades(id_estado);
}

Tendo a função pronta, no keypress ou keyup do endereço você pode…

<input type="text" name="endereco" 
     onkeyup="loadCidades(document.getElementById('estado').value);">

Tenha em mente que cada letra, espaço etc ele irá chamar a função… mostrei assim apenas para você ter uma base, mas o ideal é criar outra função e controlar o tamanho do endereço para só assim buscar no servidor via ajax…

E para deixar um estado fixo esses exemplos vão ajudar…

#3

Opa, obrigado pela ajuda, funcionou parcialmente.

if (id_estado == '') {
    $('#cidade').prop('disabled', true);
} else {
    $('#cidade').prop('disabled', false);
    loadCidades(id_estado);
}

Eu não consegui descobrir o porque, mas não está desabilitando o disabled.

#4

Tenta

$(’#cidade’).prop(‘disabled’, ‘disabled’);

#5

Nâo, mesma coisa, por enquanto deixei livre para teste. Obrigado

#6

Combos (select) se não me engano não podem ser bloqueados/desbloqueados, mas nesse caso suas options sim, tente…

$('#cidade').find('option').prop('disabled', true); // false. etc...
#7

Muito obrigado pela ajuda.