Problems with Ajax

Asked

Viewed 135 times

3

I’m making a website that has requests ajax and login area. The problem is that when I create a form within a modal in bootstrap for the user to log in, my requests ajax stop working.

Form code within the 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>

Code that makes the ajax request:

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

I could not identify what one thing interferes with the other, in case I take the form of the modal, back to work.

javascript ajax twitter-bootstrap

  • When you call the function buscaEndereco?

  • I didn’t see the function buscaEndereço, also want to know if when clicking on Ubmit the data is sent ?

  • What appears on the browser console? Is there an error? The network tab shows the request to be made ? Because it has twice the function function buscaEndereco(cep) ?

  • I call the function qnd is being typed the zip code, through the event "onkeyup", yes data is sent, only problem eh that does not fill the fields that must be filled in, as well as find out if I delete the login form it works.

  • Do you only have this html on the page? It will not only fill with this information, document.forms[0] is the form login, if you have another form on the page, you will have to call it that: document.forms[1]

1 answer

1


I did some tests and I believe I found the problem

The problem lies within your if, when finding the fields to fill in with the result of the ajax request.

In the if you use:

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

But how did you add form login inside the page, the form old becomes the second, to access it, just change the index from 0 to 1, deta forma:

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

As I don’t have the whole file in hand, I made an example with a second form on the page and using the 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>

  • It worked out thanks, could this have something to do with my other problem? https://answall.com/questions/254256/login-no-modal-do-bootstrap

Browser other questions tagged javascript ajax twitter-bootstrap

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