表单提交前的引导模式

2022-01-17 00:00:00 modal-dialog jquery javascript twitter-bootstrap

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

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.

为此，您首先将 input type="submit" 更改为 input type="button" 并添加 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.

演示

相关文章