Question

我正在使用传统的提交按钮而不是ajax提交表单。（某些框架依赖不允许）

我想在用户提交表单之前使用确认框。

      <!DOCTYPE html>
<html>  
<head>
<!-- <link type="text/css" src="http://localhost/maverick/craftpip/dist/jquery-confirm.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/maverick/craftpip/dist/jquery-confirm.min.js"></script> -->

<!-- CSS dependencies -->
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">


<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

<!-- bootbox code -->
<script src="http://localhost/maverick/bootbox-master/bootbox.js"></script>
    <script type="text/javascript">

    $(document).on('submit', $('#form1'), function(){


             alert("works!!!");

             bootbox.alert("Hello world!", function() {
             console.log("Alert Callback");
             return false;
});

            });

    </script>
</head>
<body>

    <form name="test" action="" type="" id="form1">
        <input type="text" name="message" />
        <input type="submit" name="Enter" value="Enter" id="mySubmit" />
    </form>

</body>

默认的确认和警告框可以正常工作，但是作为它周围包装的引导框失败，表单在没有确认的情况下提交。如何使用包装器覆盖默认行为？

Answer 1

在确认/提醒后提交添加一些变量作为确认状态。

 var confirmed=false;//our state of alert/confirm
 $(document).on('submit', '#form1', function(e){


         if (!confirmed)
         e.preventDefault();//if not confirmed submit is blocked

         bootbox.alert("Hello world!", function() {

            //ok we confirmed/alert was shown
            confirmed=true;//set state on true

            //run again
            $('#form1').submit(); //trigger form again

         });

});

因此，在第一次提交火灾时，我们会通过 e.preventDefault 进行提交停止，系统会显示警报，警告后 - 已确认设置为true并触发下一次提交 - 然后将提交表单，因为已确认为真，并且未调用 e.preventDefault 。

Answer 2

试试这个：

$(document).ready(function(){

    $("[type=submit]").on("click",function(){

        alert("works!!!");

        return false;

    })
})

最终代码：

<!DOCTYPE html>
<html>
    <head>
    
    <form id="form1" action="http://www.google.com">
        <button type="submit">Submit</button>
    </form>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        
    $(document).ready(function(){
        
        $("[type=submit]").on("click",function(){
        alert("works!!!");
        return false;
            
        })
    })
    </script>
</head>
<body>

覆盖默认提醒和确认框

2 个答案: