提交表单时阻止模态关闭

Question

I have a form inside a modal, I want to prevent the modal from closing and refreshing the page after submiting the form if there's errors on some fields and show error messages inside the modal, if everything is okay the modal shoud submit the form and refresh the page.

This is my code :

<div class="modal fade" id="addTeam">
<div class="modal-dialog rap-modal-thumb">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
        <h4 class="modal-title" id="myModalLabel">Add team</h4>
        </div>
        <div class="modal-body"><br>
              <div class="page-wrap">
                <form action= "<?php echo $action; ?>" enctype="multipart/form-data" method="post">
                  <div class="container">
                        <div class="row">                                                   
                          <div class="input-group input-group-icon">
                              <div class="col-third input-group-icon">
                                <input type="text" id="name" name="name" placeholder="Nom*" required="required">
                                <div class="input-icon"><i class="fa fa-users"></i></div>
                              </div>
                              <div class="col-third input-group-icon">
                                <input type="text" id="abreviation" name="abreviation" placeholder="Abréviation*" required="required">
                                <div class="input-icon"><i class="fa fa-flag-o"></i></div>
                                </div>
                        <br>
                        * Required fields
                        <br><br>
                        <?php
                            if (isset($error)) 
                                echo '<div style="color:#fff;" class="alert bg-danger" role="alert"><em class="fa fa-lg fa-warning">&nbsp;&nbsp;</em>',$erreur,'</div>';  
                        ?>
                        <button type="submit" id="addTeam" name="addTeam" class="btn btn-primary">Ajouter</button>
                    </div>
                </form>
            </div>
            <br>
        </div>
    </div>
</div>

In php if for example the name of the team is less than 6 characters then show the error message inside the modal without closing it. In my case here the message appear after the page is refreshed and the show button of the modal is clicked again.

if (isset($_POST['addTeam'])) {
    $name= $_POST['name'];
    if (strlen($name)<3){
        $error = 'Name must be atleast 6 characters';
    }
    else{
        $action = "uploadTeam.php";
    }
}

Anyway to do that ?

Answer 1

If your form is submited by default by the browser, it'll auto-refresh the page (to create a new HTTP POST request to the server)

You have to use AJAX to call the server on background and avoid reloading the content:

// Create an event listener to catch "when the form is submited"
$('.modal-body form').submit(function(event) {
    // to stop the form from submitting (and the page reloading, so the modal will not close)
    event.preventDefault(); 

    // Call server manually and send form data (see Mikey's comment)
    $.post('my.url.com/file.php', $(this).serialize(), function(err, result) {
      if (err) { 
        // Display error on form 
      } else {
        // Success... Redirect ?
        window.location = 'my.new.url/path.html'
      }
    })
});