问题描述:

I have a Bootstrap form with a submit button:

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

I'd like to have the button to proceed with the submission process when clicked AND also call a function.

Tried already to call it from the form:

 <form onsubmit="thunderEffect()">

and from a JS script:

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

By they don't work. The code is reached (I check with alerts), so I guess it's down to the nature of my function. It just creates a flashing effect on the page:

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

});

});

}

When I call it on page load it works perfectly, it just doesn't when called from the submit button: it behaves like the effect gets interrupted quite immediately after the click.

Any idea as to why?? (no errors returned in console)

My whole page code here ----> http://pastebin.com/LQd0HdnY

Thank you!!!

EDIT:

--- SOLVED! By adding event.preventDefault() at the beginning of the function called by the submit button.......

网友答案:

$(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>
网友答案:

call that function onsubmit in your form tag.

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

This worked for me...

网友答案:

You may just call jQuery function, like:

$('button.btn-lg').on('click', function(e) {
 /* On click implementation goes here */
});
相关阅读:
Top