在调用操作之前显示模式引导

Display modal bootstrap before call to action

本文关键字：模式 显示 调用 操作      更新时间：2023-09-26

我的HTML代码如下：

<form action="form2_action.php" method="post">
    <table>
        <tr>
            <td>First Name </td>
            <td>:</td>
            <td><input type="text" id="first_name" name="first_name" required></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>:</td>
            <td><input type="text" id="last_name" name="last_name" required></td>
        </tr>
        <tr>
            <td>Age</td>
            <td>:</td>
            <td><input type="text" id="age" name="age" required></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><input type="submit" value="Submit" id="submit"></td>
        </tr>
    </table>
</form> 

<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
            </div>
            <div class="modal-body">
                <table style="width:100%">
                    <tr>
                        <td style="width:30%">First Name</td>
                        <td height top="40" style="width:70%" id="first_name_modal"></td>
                    </tr>
                    <tr>
                        <td>Last Name</td>
                        <td height="40" id="last_name_modal"></td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td height="40" id="age_modal"></td>
                    </tr>                 
                </table>        
                <p class="debug-url"></p>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save changes</button>&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>  
            </div>
        </div>
    </div>
</div>

我的Javascript代码是这样的：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<script type="text/javascript">
    $(document).on("click", "#submit", function () {
        var first_name_modal = document.getElementById("first_name").value;
        var last_name_modal = document.getElementById("last_name").value;
        var age_modal = document.getElementById("age").value;
        if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
            $("#confirm-save").modal("show");
            $('#first_name_modal').text(first_name_modal);
            $('#last_name_modal').text(last_name_modal);
            $('#age_modal').text(age_modal);
        }
    });
</script>

演示如下：http://jsfiddle.net/oscar11/wjo8yjhb/

当我输入数据并点击提交按钮时，系统直接调用动作form2_action.php。我想在系统调用之前，先让系统显示模式bootsrap。

那么，如何在调用操作之前显示模式引导？

非常感谢

表单操作始终优先，您需要使用te-proventDefaul函数来避免这种情况，如下所示：

$(document).on("click", "#submit", function (e) {
        e.preventDefault();
        var first_name_modal = document.getElementById("first_name").value;
        var last_name_modal = document.getElementById("last_name").value;
        var age_modal = document.getElementById("age").value;
        if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
            $("#confirm-save").modal("show");
            $('#first_name_modal').text(first_name_modal);
            $('#last_name_modal').text(last_name_modal);
            $('#age_modal').text(age_modal);
        }
    });

我还更新了你的fiddel，所以这对你来说很好！祝你今天愉快。

您描述的第二种行为与第一种行为有相同的问题。您仍在点击文档，因此您还需要在此处执行以下操作：

$('#saveBtn').on('click',function(e){
         e.preventDefault()
      //here has to come the code to submit this form 
})

我又为你更新了小提琴。

这是可能的，但我真的不明白你为什么要这样做，事实上你只是在模态中显示用户输入。

相关文章：