如何使用javascript在表单标记中选择按钮

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

本文关键字：选择 按钮 表单 何使用 javascript      更新时间：2023-09-26

我正试图在使用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

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

为什么不捕获表单的提交事件？

给你的表格一个类似"<form method="POST" id="my_form">...</form>" 的id

和用途：

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

看看你的小提琴！

相关文章：