'Redirect modal form (PHP-JS-HTML5)

I try to learn frontend and backend. I create a simple login form with bootstrap modal but i have this problem. When i submit the data the modal disappear and i see the message only if i click to the button of my modal. How can i prevenent this event? Sorry for my English. This is the code

PHP MODAL

    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog">
    <div class="modal-content" id="modalContent">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Login</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeForm"></button>
        </div>
       <div class="modal-body">
        <div id="errori" >
        <!-- controllo sui campi lasciati vuoi !-->
      <?php 
      if(!empty($_SESSION['errore'])){ ?> 

      <div class="alert alert-danger"><?=$_SESSION['errore'] ?> </div>
      <?php
      $_SESSION['errore']='';
      }
      ?>
  <!-- fine controllo !-->
    </div>

    <form action="signup.php" method="POST" id="formLogin">
    <div class="mb-3">
    <label for="email" class="form-label">Indirizzo email</label>
    <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Il tuo indirizzo email</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password">
  </div>
  <div class="mb-3 form-check">
    <input value="1" type="checkbox" class="form-check-input" id="remember" name="remember">
    <label class="form-check-label" for="exampleCheck1">Ricordami</label>
  </div>
  <div class="mb-3">
    <p> Non sei ancora Registrato? <a data-bs-toggle="modal" href="#regModal" data-bs-target="#regModal" onclick="clickreg()"> Clicca qui</a> per registrarti </p>
  </div>
  <button type="submit" id="regBtn" class="btn btn-primary">Invia</button>
    </form>
      </div>
      <div class="modal-footer">
          <!--
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
        !-->
      </div>
    </div>
  </div>
</div>

<?php include 'regModal.php'; ?>


<script>
function clickreg(){
    $('#loginModal').modal("hide");
    $('#regModal').modal("show");
}
</script>
<script>
$('#formLogin').on('submit', function() {
  $('#loginModal').addClass('modal fade show').css('display','block');

});
</script>

SIGNUP.PHP. This part of code check if the data insert in the form are blanck and save all in a session variable named "error"

    <?php 
if(!isset($_SESSION)) 
{ 
    session_start(); 
} 

$errore= '';
if(empty($_POST['email'])){
   $errore .= 'Email richiesta <br>';
}
if(empty($_POST['password'])){
    $errore .= 'Password richiesta';
}
    if(!empty($errore)){
    $_SESSION['errore'] = $errore;
    
}
javascriptphphtmljquerycss


Solution 1:[1]

That's exactly how it should behave. If you don't want the page to reload, then you should consider using ajax.

In case you're not willing to use ajax you can show the modal when an error is detected after the form is submitted like so.

<?php if(!empty($_SESSION['errore'])){ ?>
<script>
    $('#regModal').modal("show");
</script>
<?php } ?>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions