Open modal bootstrap and ask for password confirmation, if password is right, call another modal

Question

I am asking the confirmation of a password for the user, in case the password is right, call another modal with other options, wrong case, display that the password is wrong.

I don’t think I know how to use jQuery.

1. The variable $senha is coming from the database.
2. I am using bootstrap version 4

Modal confirm password:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#confirm_senha" >
    Quero editar
</button>

<!-- Modal confirmar senha -->
<div class="modal fade" id="confirm_senha" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Confirme a sua senha antes de começar</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="POST" action="">

        <div class="form-row">
          <div class="col">
            <label for="recipient-name" class="col-form-label">Senha:</label>
            <input type="password" class="form-control" name="senha">
          </div>

          <div class="col">
            <label for="recipient-name" class="col-form-label">Confirmar senha:</label>
            <input type="password" class="form-control" name="senha_2" maxlength="50">
          </div>
        </div> 

        <hr> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        <button type="submit" name="confirmar_senha" class="btn btn-primary">Continuar</button>
      
        <?php
        if(isset($_POST['confirmar_senha'])){
        $senha_confirm = $_POST['senha'];
        $senha_confirm_2 = $_POST['senha_2'];

        if ($senha_confirm == $senha && $senha_confirm_2 == $senha) { ?>
                <script>
                  $('#confirm_senha').on('hidden.bs.modal', function (e) { // Fecha essa modal (confirmar senha)
                  $("#edit_user").modal('show');})                   // Abre modal (editar dados)
                </script> 
                
        <?php }else{ echo "As senhas não concidem"; }  } // End IF ?>

      </form>
    </div>
  </div>
</div>
<!-- ./Modal confirmar senha -->

Another modal:

 <!-- Modal edit dados usuário -->
    <div class="modal fade" id="edit_user" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Editar dados do usuário</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
           ...
         </div>
       </div>
     </div>
   </div>
   <!-- ./Modal edit user -->

I think the logic is right, thank you for any kind of help.

The problem is that you are not opening the modal if the password is right.

The console is pointing error in this line: $('#myModal').on('hidden.bs.modal', function (e) { // Fecha essa modal (confirmar senha)

If I change that line from IF by a echo "As senhas estão certas"; is displayed normally.

EDIT: I can’t open the other modal through a button inside a <form>, just outside. I tried to put the IF outside the <form> but also nothing (it opens by button, but not by jQuery), I don’t know what else to do.

Answer 1

After a while researching, I managed to solve thus:

if($senha_confirm == $senha && $senha_confirm_2 == $senha) { 
    echo"  
       <script>
          $(document).ready(function() {
          $('#confirm_senha').modal('hide'); 
          $('#edit_user').modal('show');})   
       </script>";
             
}else{ 
     echo"
       <script>
          alert('Você digitou a senha errada! Estamos reiniciando a página.');
          setTimeout(function() {window.location.href = 'minha_conta.php'; }, 1000);
       </script>";
}