Question

我有一个带有提交按钮的Bootstrap表单：

<form>

   <div class=form-group>
         <input type="text" class="form-control" name="inputcity" id="userinput"/>
   </div>

   <audio id="au001" src="t001.mp3"></audio>

   <button class="button btn btn-success btn-lg center-block" id="submitBtn">Check it out!</button>

</form>

我想让按钮在点击时继续提交过程并且还调用一个函数。试图从表格中调用它：

 <form onsubmit="thunderEffect()">

来自JS脚本：

document.getElementByID("submitBtn").onclick(thunderEffect());

他们不工作。到达代码（我检查警报），所以我想这取决于我的功能的性质。它只是在页面上创建一个闪烁效果：

function thunderEffect(){

            $(".ext-1").fadeIn(1500).fadeOut(250, function(){

                $(this).css("background-color", "rgba(255, 255, 255, .7)");

                document.getElementById("au001").play();

                $(this).fadeIn(250).fadeOut(2000, function(){

                    $(this).css("background-color", "rgba(0, 0, 0, .4)");                    
                });                
            });                 
        }

当我在页面加载时调用它时，它完全正常工作，从提交按钮调用它时就不会：它的行为就像点击后效果立即中断一样。任何想法为什么?? （控制台中没有返回错误）

我的整页代码在这里----＆gt; http://pastebin.com/LQd0HdnY

谢谢!!!

编辑： - - 解决了！通过在提交按钮调用的函数的开头添加event.preventDefault（）.......

Answer 1

＆＃13;

$(document).ready(function() {
        $("button[id='submitBtn']").click(function(){
            thunderEffect();
        });
});
function thunderEffect(){
    $(".ext-1").fadeIn(1500).fadeOut(250, function(){
        $(this).css("background-color", "rgba(255, 255, 255, .7)");
        document.getElementById("au001").play();
        $(this).fadeIn(250).fadeOut(2000, function(){  
            $(this).css("background-color", "rgba(0, 0, 0, .4)");                    
        });                
    });     

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form>
   <div class=form-group>
         <input type="text" class="form-control" name="inputcity" id="userinput"/>
   </div>
   <!-- i changed the audio source to suit the example -->
   <audio id="au001" controls="controls">
      <source src="http://soundbible.com/grab.php?id=989&type=mp3" type="audio/mp3" />
   </audio>

   <button class="button btn btn-success btn-lg center-block" id="submitBtn">Check it out!</button>

</form>
<!-- I assume this is the element with the class ".ext-1" -->
<div class="ext-1" style="width:80px;height:80px;"></div>

＆＃13;

Answer 2

在表单标记中调用该函数onsubmit。

<html>
<head>
<meta charset="ISO-8859-1">
<title>No Title</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function thunderEffect(){
    alert("at the beginning");
    $(".ext-1").fadeIn(1500).fadeOut(250, function(){

        $(this).css("background-color", "rgba(255, 255, 255, .7)");

        document.getElementById("au001").play();

        $(this).fadeIn(250).fadeOut(2000, function(){

            $(this).css("background-color", "rgba(0, 0, 0, .4)");                    
        });                
    });
    alert("at the end");
}
</script>
</head>
<body>
    <form action="foo.htm" onsubmit="thunderEffect()">
        <button class="button btn btn-success btn-lg center-block" id="submitBtn" >Check it out!!!</button>
    </form>
</body>
</html>

这对我有用......

Answer 3

您可以调用jQuery函数，例如：

$('button.btn-lg').on('click', function(e) {
 /* On click implementation goes here */
});

使用Bootstrap提交按钮调用函数

3 个答案: