使用Bootstrap提交按钮调用函数

时间:2016-02-22 11:47:30

标签: forms twitter-bootstrap submit

我有一个带有提交按钮的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().......

3 个答案:

答案 0 :(得分:1)

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

在表单标记中调用该函数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>

这对我有用......

答案 2 :(得分:-1)

您可以调用jQuery函数,例如:

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