Call function with Bootstrap submit button

forms twitter-bootstrap submit

13,301

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

}

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

Solution 2

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

13,301

Author by

Uknowho

Updated on June 04, 2022

Comments

Uknowho about 2 years

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

Parkash Kumar over 8 years

This will bind click event for all buttons with .btn-lg. It would be best to attached click event on id selector.
mlewandowski over 8 years

There wasn't clear requirement how to bind the button. Thus is just example of methodology, not strict solution though...
Parkash Kumar over 8 years

Sure! You should have asked OP for further details before posting a raw answer.
mlewandowski over 8 years

As you can see I am a neewbie here and may not know the rules. Nevertheless, I am answering for question having just the information in the topic... You could guide me instead giving minus 1 from start...
Transformer over 8 years

i just saw ur update.pls give me some minutes to update my answer to suit your problem
Transformer over 8 years

please remove either onsumbit() function from the form or from js that calls the button click function() the both are calling the function at the same time
Uknowho over 8 years

I tried both on submit() and click function() at different times, never simultaneously. They don't work...
Transformer over 8 years

where is the element that has this class ".ext-1"
Abhijit Borade over 8 years

It showed me two alert messages and then proceeded to foo.htm page.
Uknowho over 8 years

thanks a lot Transformer! that still doesn't do it though... :( If I put a straight call to the function at the bottom of the script i.e. thunderEffect(); it just run perfectly the function once at page load and then it also makes it work from submit button click!!! no clue as to why. If I remove the straight call the problem shows up again. I'm gonna link the whole page code in the post if you wanna take a look...
Uknowho over 8 years

Thanks Transformer, but that wouldn't make it. I need pretty specific timings to make the effect work as desired. The only solution was to event.preventDefault() at the beginning of the function called by the submit button. Now it's working... Thank you anyway!!!!