3

Estou fazendo um site que possui requisições ajax e área de login. O problema é que quando crio um formulário dentro de uma modal em bootstrap para o usuário fazer login, minhas requisições ajax param de funcionar.

Código do formulário dentro do modal

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Conteúdo -->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Digite os dados para fazer o login</h4>
            </div>
            <div class="modal-body">
                <form name='form1' class="form-horizontal" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="login">Login:</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="login" id="login" placeholder="Digite o login" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="senha">Senha:</label>
                        <div class="col-sm-4"> 
                            <input type="password" class="form-control" name="senha" id="senha" placeholder="Digite a senha" required>
                        </div>
                    </div>
                    <div class=text-right>
                        <div class="form-group">
                            <div class="col-sm-4">
                                <button type="submit" class="btn btn-primary">Acessar</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

Código que faz a requisição ajax:

function buscaEndereco(cep)
    function buscaEndereco(cep) {
    $.ajax({
        url: 'php/buscaEndereco.php',
        type: 'POST',
        async: true,
        dataType: 'json',
        data:
        {
            'cep': cep
        },

        success: function (result) {
            if (result != "") {
                document.forms[0]["rua"].value = result.logradouro;
                document.forms[0]["numero"].value = result.numero;
                document.forms[0]["bairro"].value = result.bairro;
            }
        },

        error: function (xhr, status, error) {
            alert(status + error + xhr.responseText);
        }
    });
}

Não consegui identificar o que uma coisa interfere na outra, caso eu tire o form do modal, volta a funcionar.

5
  • Em qual momento você chama a função buscaEndereco? 12/11/2017 às 14:11
  • Não vi a função buscaEndereço, quero saber também se ao clicar no submit os dados são enviados ?
    – Victor
    12/11/2017 às 14:15
  • O que aparece na consola do navegador? Tem algum erro ? O separador de rede mostra o pedido a ser feito ? Porque tem duas vezes a função function buscaEndereco(cep) ?
    – Isac
    12/11/2017 às 16:45
  • Eu chamo a função qnd está sendo digitado o CEP, através do evento "onkeyup", sim os dados são enviados, único problema eh que não preenche os campos que devem ser preenchidos, assim como descobrir se eu apago o formulário de login ele funciona. 13/11/2017 às 14:19
  • Você só tem esse html na página? Ele não vai preencher só com essas informações, document.forms[0] é o form de login, se tiver outro form na página, vai ter que chamar assim: document.forms[1] 13/11/2017 às 18:41

1 Resposta 1

1

Fiz alguns testes e acredito ter encontrado o problema

O problema se encontra dentro do seu if, na hora de encontrar os campos para preencher com o resultado da requisição ajax.

No if você utiliza:

document.forms[0]["rua"].value = result.logradouro;
document.forms[0]["numero"].value = result.numero;
document.forms[0]["bairro"].value = result.bairro;

Porém como você adicionou o form de login dentro da página, o form antigo passa a ser o segundo, para acessá-lo, basta trocar o índice de 0 para 1, deta forma:

document.forms[1]["rua"].value = result.logradouro;
document.forms[1]["numero"].value = result.numero;
document.forms[1]["bairro"].value = result.bairro;

Como não tenho todo o arquivo em mãos, fiz um exemplo com um segundo form na página e utilizando a API ViaCEP

$(document).ready(function() {
    $('.modal').modal();
    $('#cep').on('keyup', function() {
        var validacep = /^[0-9]{8}$/;
        var cep = event.target.value;
        if (validacep.test(cep)) {
            $.getJSON('https://viacep.com.br/ws/' + cep + '/json/', function(result) {
                if (result != "") {
                    document.forms[1]["rua"].value = result.logradouro;
                    document.forms[1]["cidade"].value = result.localidade;
                    document.forms[1]["bairro"].value = result.bairro;
                }
            });
        }
    });
});
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <meta charset="UTF-8" />
</head>

<body>
    <div class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Digite os dados para fazer o login</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form name='form1' class="form-horizontal" method="POST">
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="login">Login:</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="login" id="login" placeholder="Digite o login" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="senha">Senha:</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" name="senha" id="senha" placeholder="Digite a senha" required>
                        </div>
                    </div>
                    <div class=text-right>
                        <div class="form-group">
                            <div class="col-sm-4">
                                <button type="submit" class="btn btn-primary" id="access">Acessar</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" id="cep" placeholder="Cep">
        </div>
        <form>
            <div class="form-group">
                <label for="cidade">Cidade</label>
                <input type="cidade" class="form-control" name="cidade">
            </div>
            <div class="form-group">
                <label for="rua">Rua</label>
                <input type="text" class="form-control" id="rua">
            </div>
            <div class="form-group">
                <label for="bairro">Bairro</label>
                <input type="text" class="form-control" id="bairro">
            </div>
        </form>
    </div>
</body>

</html>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .