douqian6194 2018-01-08 15:15
浏览 305
已采纳

提交表单时阻止模态关闭

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'
          }
        })
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果