Call function with Bootstrap submit button
<p>I have a Bootstrap form with a submit button:</p>

<pre><code>&lt;form&gt;

   &lt;div class=form-group&gt;
         &lt;input type="text" class="form-control" name="inputcity" id="userinput"/&gt;
   &lt;/div&gt;

   &lt;audio id="au001" src="t001.mp3"&gt;&lt;/audio&gt;

   &lt;button class="button btn btn-success btn-lg center-block" id="submitBtn"&gt;Check it out!&lt;/button&gt;

&lt;/form&gt;
</code></pre>

<p>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:</p>

<pre><code> &lt;form onsubmit="thunderEffect()"&gt;
</code></pre>

<p>and from a JS script:</p>

<pre><code>document.getElementByID("submitBtn").onclick(thunderEffect());
</code></pre>

<p>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:</p>

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

<p>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)</p>

<p>My whole page code here ----> <a href="http://pastebin.com/LQd0HdnY" rel="nofollow">http://pastebin.com/LQd0HdnY</a></p>

<p>Thank you!!!</p>

<p>EDIT:
--- SOLVED! By adding event.preventDefault() at the beginning of the function called by the submit button.......</p>