Question

我正在尝试使用bootbox插件提交表单时弹出确认消息。问题是我不知道如何选择表单标签内的按钮。在下面的示例中，确认消息适用于表单标记之外的按钮，但不适用于内部标记。如何选择包含在表单标记内的此按钮？

<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

Answer 1

为什么不抓住表单的提交事件？

为您的表单添加"<form method="POST" id="my_form">...</form>"

之类的ID

并使用：

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

查看您的fiddle here!

Answer 2

将javascript代码更改为：

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

如何使用javascript选择表单标签内的按钮？

2 个答案: