Button Submit closing modal

Asked

Viewed 120 times

-1

Hello! I created a modal to call the login inputs. But when I click "Login" on the Ubmit button, if it is empty or with incorrect information, it closes the modal and does not show me error message as expected... I’m starting to learn php and javascript, so I don’t know what I’m doing wrong, if you can help me I appreciate!

Code I’m using in my index.php to call the modal:

    <!-- Trigger button do modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginmodal">Login</button>

<!-- Modal -->
<div class="modal fade" id="loginmodal" tabindex="-1" role="dialog" aria-labelledby="loginlabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginlabel">Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <?php include 'loginform.php';?> <!-- Aqui vc chama a sua página -->
      </div>
    </div>
  </div>
</div>

My login page "loginform.php":

<?php
session_start();
?>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<?php
                    if(isset($_SESSION['nao_autenticado'])):
                    ?>
                    <div class="notification is-danger">
                      <p>ERRO: Usuário ou senha inválidos.</p>
                    </div>
                    <?php
                    endif;
                    unset($_SESSION['nao_autenticado']);
                    
?>
<div class="box">
    <form action="login.php" method="POST">
        <div class="field">
            <div class="control">
                <input name="usuario" name="text" class="input is-large" placeholder="Seu usuário" autofocus="">
            </div>
        </div>
  
        <div class="field">
            <div class="control">
                <input name="senha" class="input is-large" type="password" placeholder="Sua senha">
            </div>
        </div>
        



        <button type="submit" name="login" class="button btn btn-secondary" >Login</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>        


    </form>
  </div>

</body>
php javascript html css login

  • I forgot to mention that the modal only closes when it has some incorrect login information. When it works it redirects me to the desired page. After giving Submit and opening the modal again, the error is there appearing...

  • Forgot to inform where you are creating $_SESSION['nao_authenticated']

  • What’s the difference between login.php and loginform.php? What does login.php do?

1 answer

1

You’ll have to use Ajax. The problem is that when Click on the Submit button the form action property redirects Submit to the same page, which gives the impression that closed the modal. But not really any more. uses like this:

$("form#CriaUmIDparaEle").submit(function(){
let obj = {
url:"login.php",
method: "post",
data: this.serialize(),
complete: function(retorno){
//retorno pode ser echo "1" ou echo json_e();
},
error: function(){
//404, 503 entre outro erros do servidor
}
}
$.ajax(obj);
});

  • Thank you!

Browser other questions tagged php javascript html css login

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