引导提交表单显示从javascript计时器

Bootstrap submit form displayed from javascript timer

本文关键字：javascript 计时器 显示 表单 提交      更新时间：2023-09-26

我试图创建一个从javascript显示延迟的模态表单。

当我用按钮(onClick事件)启动模态表单时，参数被正确地提交给表单，但是当表单从计时器(使用setTimeout)显示时，模态表单被显示，但参数没有传递给表单。这两种情况都在下面的示例中。任何帮助/链接是非常感谢。我就是不明白这两个选项有什么不同:

<!doctype html>
  <head>
  <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
     </head>
  <body>
  Main Page
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div>
    <!-- model content -->    
    <div id="form-content" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Contact us</h3>
            </div>
        <div>
            <form class="contact">
            <fieldset>
                 <div class="modal-body">
                     <ul class="nav nav-list">
                <li class="nav-header">Name</li>
  ...
            </fieldset>
            </form>
        </div>
         <div class="modal-footer">
             <button class="btn btn-success" id="submit">submit</button>
             <a href="#" class="btn" data-dismiss="modal">Close</a>
          </div> </div>

<script>
$(document).ready(function() {
    setTimeout(function() {
      timeTriggeredModal();//
    }, 300); // milliseconds
});
//>>>This does not work <<<<<<
function timeTriggeredModal() {
$('#form-content').fadeIn(300)(function(){
            $.ajax({
            type:    "POST",
             url:    "process.php",
            data:    $('form.contact').serialize(),
            success: function(msg){
                       // $("#thanks").html(msg)
                          $("#form-content").modal('hide');    
                 },
            error: function(){
                alert("failure");
            }
           });
    });
};
//>>>>>>>>This works<<<
 $(function() {
//twitter bootstrap script
    $("button#submit").click(function(){
            $.ajax({
            type:    "POST",
             url:    "process.php",
            data:    $('form.contact').serialize(),
            success: function(msg){
                       // $("#thanks").html(msg)
                          $("#form-content").modal('hide');    
                 },
            error: function(){
                alert("failure");
            }
           });
    });
});
</script>
</body>
</html>

参见示例:http://www.heartlink.co.uk/heartlink/test4/

你可以这样写:

<script>
$(document).ready(function() {
    setTimeout(function() {  
      $("#form-content").modal('show'); //this will show your modal
    }, 300); // milliseconds
    $("button#submit").click(function(){ //this will handle the form submission upon clicking the submit button
            $.ajax({
            type:    "POST",
             url:    "process.php",
            data:    $('form.contact').serialize(),
            success: function(msg){
                       // $("#thanks").html(msg)
                          $("#form-content").modal('hide');    
                 },
            error: function(){
                alert("failure");
            }
           });
    });
});
</script>

setTimeout可以调用一个单独的函数来显示模态，但是你不能随机地将一个ajax函数传递给fadeIn函数，因为该函数被设计为在动画完成时运行(这不会给用户任何填写表单的机会)。即便如此，当您在fadeIn方法中使用完整函数时，您可以使用逗号将淡出行为的持续时间与完整函数分开，而不是像您在括号中那样(仅供参考)。

此外，虽然fadeIn可以工作，但Bootstrap有自己的方法来显示和隐藏模态。使用上面代码中所示的.modal('show')方法可能更容易。

无论表单如何显示，您的点击处理程序都将负责表单提交，因此您不必担心重复ajax调用。

相关文章：