douqian6194
2018-01-08 15:15
浏览 267

提交表单时阻止模态关闭

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 ?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douliao8760 2018-01-08 15:18
    已采纳

    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'
          }
        })
    });
    
    点赞 打赏 评论
  • dragon4587 2018-01-08 15:20

    You will need to override some client behavior for this. In fact, it will be easier for you to do your validation all on the client side (if possible). Override the form's default behavior, validate, and then return true or false based on the results of your validation function:

    <script>
        $('form').on('submit', function(e) {
            if (validate()) { //your validation function here
                return true;
            }
            return false;
        });
        function validate() {
            if (!$('input[name=name]').val() || $('input[name=name]').val().length < 3) {
                return false;
            }
            return true;
        }
    </script>
    
    点赞 打赏 评论

相关推荐 更多相似问题