在提交表單上打開模態引導

-1

如何在用戶驗證表單時打開模式？ S'inscrire 在提交表單上打開模態引導

<div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
      <h3 class="modal-title">Merci !</h3> 
      </div> 
     </div> 
     </div> 
    </div>

來源

2017-09-05 DenisMasot

當你說驗證表單，你的意思時，他們已經提交了嗎？ –

可以使用模態id或class當用戶點擊提交打開它按鈕。比方說你有這個HTML

<form id="submit-button"> 
    //form components 
</form>

然後，你可以這樣寫jQuery代碼：

//trigger when form is submitted 
$("#submit-button").submit(function(e){ 
    $('#registration').modal('show'); 
    return false; 
});

的$('#registration').modal('show');將顯示模式和return false;防止形式發佈，這將在頁面停止數據重裝。或者，您也可以這樣做

$(document).ready(function() { 
    $('#submit-button').on('submit', function(e){ 
     $('#registration').modal('show'); 
     e.preventDefault(); 
    }); 
});

e.preventDefault();將停止頁面重新加載頁面。

來源

2017-09-05 12:08:04

這將無法正常工作，頁面將刷新提交。 –

有返回false將阻止頁面重新加載 –

當你的形式進行驗證，您可以到添加到您的功能：當您按下逃脫模式韓元

$('#registration').modal({ 
     show: 'false', 
     backdrop: 'static', 
     keyboard: false 
    });

鍵盤虛假手段't 消失了。
當人們用模型外部的鼠標點擊時，將背景設置爲靜態意味着。模態不會關閉。

編輯

if ($("form button").valid()) { 
     $('#registration').modal({ 
      show: 'false', 
      backdrop: 'static', 
      keyboard: false 
      }); 
};

來源

2017-09-05 12:02:48 Steven

它不起作用，每當頁面加載時它都是模式。 – DenisMasot

顯示我的代碼如何檢查表單是否有效。（$（「form button」）。valid（））{ $（'＃registration'）。modal（'show'）;如果您的驗證成功，您需要粘貼此文件 – Steven

。 } – DenisMasot

可以在驗證成功，補充一點：

$("#registration").modal('show');

來源

2017-09-05 12:05:30

我會使用Ajax解決方案來提交表單而不刷新頁面。

您甚至可以根據請求的結果更新模態響應。

$("#ajaxform").submit(function(e) { 
 

 
    var url = "path/to/your/script.php"; // the script where you handle the form input. 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    url: url, 
 
    data: $("#ajaxform").serialize(), // serializes the form's elements. 
 
    success: function(data) 
 
    { 
 
    //if request successful 
 
    $(".modal-title").text('Request successful'); 
 
    $('#registration').modal('show'); 
 
    }, 
 
    error: function(data) 
 
    { 
 
     //if request unsuccessful 
 
     $(".modal-title").text('Request failed'); 
 
     $('#registration').modal('show'); 
 
    } 
 
    }).done(function() { 
 
    //finally, reinitialise modal text back to default 'merci' 
 
    $(".modal-title").text('merci'); 
 
    }); 
 

 
    e.preventDefault(); // avoid to execute the actual submit of the form. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST" class="form-group"> 
 
    First Name: <input type="text" name="fname" value="" class="form-control"/> <br/> Last Name: <input type="text" name="lname" value="" class="form-control"/> <br/> Email : <input type="text" name="email" value="" class="form-control"/> <br/> 
 
    <button type="submit" class="btn btn-default">submit</button> 
 
</form> 
 

 
<div class="modal fade" id="registration" tabindex="1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <h3 class="modal-title">Merci !</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-09-05 12:27:32

在提交表單上打開模態引導

回答

相關問題