我有一个带有提交按钮的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().......
答案 0 :(得分:1)
$(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;
答案 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 */
});