How to select a button inside a form tag with javascript?

问题

I am trying to make a confirmation message popup when submitting a form using the bootbox plugin. The problem is that I don't know how to select the button inside the form tag. In the example below the confirmation message does work for the button outside the form tag but not for the one inside. How do I select this button wrapped inside the form tag?

<div class="bs-example">
<div class="col-md-4 col-md-offset-4">
<form action="#" method="POST">
    <div class="form-group">
        <input type="username" class="form-control" id="inputEmail" placeholder="Username">
    </div>
    <div class="form-group">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="inputPassword" placeholder="Repeat password">
    </div>  
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
            <button class='btn btn-signup btn-signup-sm' type="submit">Sign up</button>
</form>
</div>
</div>

<button class='btn btn-signup btn-signup-sm' type="submit">Sign up</button>

<script type="text/javascript">
$(document).ready(function(){
$('.btn').on('click', function(){
    bootbox.alert("hello there");
});
});
</script

回答1:

Change javascript code to:

<script type="text/javascript">
$(document).ready(function(){
$('.btn').on('click', function(e){
    e.preventDefault();          // this line is key to preventing page reload
                                 // when user clicks submit button inside form
    bootbox.alert("hello there");
});
});
</script>

回答2:

Why don't you catch the submit event of the form?

Give your form an id like "<form method="POST" id="my_form">...</form>"

and use:

$('#my_form').submit(function(){
   bootbox.alert("hello there");
});

Take a look at your fiddle here!

来源：https://stackoverflow.com/questions/26041874/how-to-select-a-button-inside-a-form-tag-with-javascript

标签

javascript

bootbox