表单提交前的Bootstrap Modal [英] Bootstrap Modal before form Submit

问题描述

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

I'm new to Modals, I have a Form and when the user clicks submit, It will show a Modal confirming if the user wants to submit, the modal also contains the user input from the form fields. I searched all over the internet but can't find the right one on my needs. And all I see is that they tag the click event to open modal on a a link. i have a input type submit. Can you give examples or ideas? Thanks! Here's my sample form.

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

推荐答案

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

So if I get it right, on click of a button, you want to open up a modal that lists the values entered by the users followed by submitting it.

为此，你首先要改变你的输入类型=提交到输入类型=按钮并添加 data-toggle =modal数据 - target =＃confirm-submit以便点击它时触发模态：

For this, you first change your input type="submit" to input type="button" and add data-toggle="modal" data-target="#confirm-submit" so that the modal gets triggered when you click on it:

<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：

Lastly, a little bit of 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 单击，然后在检查验证后加载模式。

You haven't specified what the function validateForm() does, but based on this you should restrict your form from being submitted. Or you can run that function on the form's button #submitBtn click and then load the modal after the validations have been checked.

DEMO

DEMO

这篇关于表单提交前的Bootstrap Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！