Question

我是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>

Answer 1

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

为此，您首先将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上单击运行该功能，然后在检查验证后加载模式。

<强> DEMO

Answer 2

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

Answer 3

我注意到某些答案并未触发HTML5 required属性（因为填充是根据 clicking 的动作而不是 form send 的动作执行的） em>，导致在输入为空时绕过它）：

使用一些带有必需属性的输入来创建一个<form id='xform'></form>，并在其末尾放置一个<input type='submit'>。
确认输入，其中应键入“确定” <input type='text' name='xconf' value='' required>
在您的html中添加 modal_1_confirm （以确认发送形式）。
（在modal_1_confirm上）将 id modal_1_accept添加到接受按钮。
在您的html中添加第二个 modal_2_errMsg （以显示表单验证错误）。
（在modal_2_errMsg上）将 id modal_2_accept添加到接受按钮。
（在modal_2_errMsg上）将 id 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")即可假定验证已通过，并且将添加{ {1}}属性：

这样做的原因是"ready"通过时仅显示为验证，因此应点击$("#modal_1_confirm").modal("show"); 如果不先验证表单就无法访问。

Answer 4

您可以使用浏览器默认提示窗口。代替基本的<input type="submit" (...) >尝试：

<button onClick="if(confirm(\'are you sure ?\')){ this.form.submit() }">Save</button>

Answer 5

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

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

表单提交前的Bootstrap Modal

5 个答案: