表单提交前的Bootstrap Modal

我是Modals的新手，我有一个表格，当用户点击提交时，它会显示一个模态确认用户是否想要提交，该模式还包含来自表单字段的用户输入。 我搜索了整个互联网，但找不到合适的我的需求。 我只看到他们将click事件标记为在链接上打开模态。 我有一个输入类型提交。 你能举出例子或想法吗？ 谢谢！ 这是我的样本表格。

  
 Last Name*required  
 
 First Name*required  
    

Answer 1

因此，如果我做对了，单击按钮，您需要打开一个模式，列出用户输入的值，然后提交它。

为此，首先将input type="submit"更改为input type="button"并添加data-toggle="modal" data-target="#confirm-submit"以便在单击时触发模态：

接下来，modal dialog：

 
 
 
 
 Confirm Submit 
 
 Are you sure you want to submit the following details?  
 
 
Last Name
 
 
 
 
First Name
 
 
 
 
 
 Cancel Submit 
 
 
  

最后，一点点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()函数的function，但基于此，您应该限制表单的提交。 或者您可以在表单的按钮#submitBtn上运行该函数，然后在检查validation后加载模式。

DEMO

Answer 2

 $('form button[type="submit"]').on('click', function () { $(this).parents('form').submit(); }); 

Answer 3

我注意到一些答案没有触发HTML5 required属性（因为在点击操作上执行的东西而不是表单发送的操作，导致在输入为空时绕过它）：

1. 使用带有必需属性的输入
   

   ，并在结尾放置 。

2. 输入“ok”的确认输入
3. 在你的html中添加一个modal_1_confirm （以确认发送的forms）。
4. （在modal_1_confirm上）将id modal_1_accept添加到accept按钮。
5. 将第二个modal_2_errMsg添加到您的html（以显示表单validation错误）。
6. （在modal_2_errMsg上）将id modal_2_accept添加到accept按钮。
7. （在modal_2_errMsg上）将id m2_Txt添加到显示的文本持有者。

8. 在发送表单之前拦截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")将假定validation通过，它将添加"ready"属性：

• 这样做的原因是$("#modal_1_confirm").modal("show"); 仅在通过validation时显示，因此在未首先validation表单的情况下，无法访问$("#modal_1_accept") 。

Answer 4

它很容易解决，只创建一个隐藏的提交：

 ENVIAR  

使用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(); } });