[英]Bootstrap Modal before form Submit
我是Modals的新手,我有一個表格,當用戶點擊提交時,它會顯示一個模態確認用戶是否想要提交,該模式還包含來自表單字段的用戶輸入。 我搜索了整個互聯網,但找不到合適的我的需求。 我只看到他們將click事件標記為在鏈接上打開模態。 我有一個輸入類型提交。 你能舉出例子或想法嗎? 謝謝! 這是我的樣本表格。
<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" />
<div class="form-group">
<label>Last Name</label><span class="label label-danger">*required</span>
<input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
</div>
<div class="form-group">
<label>First Name</label><span class="label label-danger">*required</span>
<input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
</div>
<input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
<input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>
因此,如果我做對了,單擊按鈕,您需要打開一個模式,列出用戶輸入的值,然后提交它。
為此,首先將input type="submit"
更改為input type="button"
並添加data-toggle="modal" data-target="#confirm-submit"
以便在單擊時觸發模態:
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
接下來,模態對話框:
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
</div>
<div class="modal-body">
Are you sure you want to submit the following details?
<!-- We display the details entered by the user here -->
<table class="table">
<tr>
<th>Last Name</th>
<td id="lname"></td>
</tr>
<tr>
<th>First Name</th>
<td id="fname"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="#" id="submit" class="btn btn-success success">Submit</a>
</div>
</div>
</div>
</div>
最后,一點點jQuery:
$('#submitBtn').click(function() {
/* when the button in the form, display the entered values in the modal */
$('#lname').text($('#lastname').val());
$('#fname').text($('#firstname').val());
});
$('#submit').click(function(){
/* when the submit button in the modal is clicked, submit the form */
alert('submitting');
$('#formfield').submit();
});
您尚未指定validateForm()
函數的功能,但基於此,您應該限制表單的提交。 或者您可以在表單的按鈕#submitBtn
上運行該函數,然后在檢查驗證后加載模式。
$('form button[type="submit"]').on('click', function () {
$(this).parents('form').submit();
});
我注意到一些答案沒有觸發HTML5 required
屬性(因為在點擊操作上執行的東西而不是表單發送的操作,導致在輸入為空時繞過它):
<form id='xform'></form>
帶有一些帶有必需屬性的輸入,並在最后放置一個<input type='submit'>
。 <input type='text' name='xconf' value='' required>
modal_1_accept
添加到accept按鈕。 modal_2_accept
添加到accept按鈕。 m2_Txt
添加到顯示的文本持有者。 在發送表單之前攔截JS:
$("#xform").submit(function(e){ var msg, conf, preventSend; if($("#xform").attr("data-send")!=="ready"){ msg="Error."; //default error msg preventSend=false; conf=$("[name='xconf']").val().toLowerCase().replace(/^"|"$/g, ""); if(conf===""){ msg="The field is empty."; preventSend=true; }else if(conf!=="ok"){ msg="You didn't write \\"ok\\" correctly."; preventSend=true; } if(preventSend){ //validation failed, show the error $("#m2_Txt").html(msg); //displayed text on modal_2_errMsg $("#modal_2_errMsg").modal("show"); }else{ //validation passed, now let's confirm the action $("#modal_1_confirm").modal("show"); } e.preventDefault(); return false; } });
`9。 從模態中單擊按鈕時還有一些東西:
$("#modal_1_accept").click(function(){
$("#modal_1_confirm").modal("hide");
$("#xform").attr("data-send", "ready").submit();
});
$("#modal_2_accept").click(function(){
$("#modal_2_errMsg").modal("hide");
});
重要說明:因此,如果您添加額外的方式來顯示模態,請注意,只需單擊“接受”按鈕$("#modal_1_accept")
將假定驗證已通過,並將添加"ready"
屬性:
$("#modal_1_confirm").modal("show");
僅在通過驗證時顯示,因此在未首先驗證表單的情況下,無法訪問$("#modal_1_accept")
。 您可以使用瀏覽器默認提示窗口。 而不是基本的<input type="submit" (...) >
嘗試:
<button onClick="if(confirm(\'are you sure ?\')){ this.form.submit() }">Save</button>
它很容易解決,只創建一個隱藏的提交:
<button id="submitCadastro" type="button">ENVIAR</button>
<input type="submit" id="submitCadastroHidden" style="display: none;" >
使用jQuery,您單擊提交:
$("#submitCadastro").click(function(){
if($("#checkDocumentos").prop("checked") == false){
//alert("Aceite os termos e condições primeiro!.");
$("#modalERROR").modal("show");
}else{
//$("#formCadastro").submit();
$("#submitCadastroHidden").click();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.