使用 Bootstrap 提交按钮调用函数答案

【问题标题】：Call function with Bootstrap submit button使用 Bootstrap 提交按钮调用函数
【发布时间】：2016-02-24 21:11:29
【问题描述】：

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

<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)");                    
                });                
            });                 
        }

当我在页面加载时调用它时，它可以正常工作，但从提交按钮调用时却不能：它的行为就像效果在单击后立即中断一样。知道为什么吗？（控制台没有返回错误）

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

谢谢！！！

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

【问题讨论】：

张贴你的代码有你的形式
在表单标签中调用该函数 onsubmit。 <form action="foo.htm" onsubmit="yourFunction()"> code here </form>
谢谢！！！已经尝试过您的解决方案 :( ...检查已编辑的帖子。
myfoo() 函数在哪里，我看到的是雷电效应
你看到我的更新了吗

标签： forms twitter-bootstrap submit

【解决方案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>

这对我有用...

【讨论】：

它显示了两条警报消息，然后转到foo.htm 页面。

【解决方案2】：

$(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)");                    
        });                
    });     

}

<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>

【讨论】：

我刚刚看到你的更新。请给我一些时间来更新我的答案以适应你的问题
请从表单或调用按钮单击函数（）的js中删除onsumbit（）函数，两者都同时调用该函数
我在不同时间尝试了 submit() 和 click function() ，从不同时尝试。他们不工作......
具有此类“.ext-1”的元素在哪里
非常感谢变形金刚！但这仍然不这样做...... :(如果我直接调用脚本底部的函数，即thunderEffect（）；它只是在页面加载时完美运行该函数，然后它也使它工作从提交按钮点击!!!不知道为什么。如果我删除直接调用，问题再次出现。如果你想看看，我将在帖子中链接整个页面代码......

【解决方案3】：

你可以直接调用 jQuery 函数，比如：

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

【讨论】：

这将为所有带有.btn-lg的按钮绑定点击事件。最好在 id 选择器上附加点击事件。
没有明确要求如何绑定按钮。因此，这只是方法的示例，虽然不是严格的解决方案......
当然！在发布原始答案之前，您应该向 OP 询问更多详细信息。
如您所见，我是这里的新手，可能不知道规则。不过，我正在回答只有主题中的信息的问题......你可以指导我，而不是从一开始就给负 1......