仅使用提交按钮在HTML表单中执行onsubmit函数
仅使用提交按钮在HTML表单中执行onsubmit函数
提问于 2020-08-13 02:10:57
如下代码片段所示，通过单击加号图标，将同时执行submitFunc()和meanFunc()。但我只想在按下提交按钮时执行submitFunc()。
function submitFunc(e) {
alert('submit')
}
function meanFunc(e) {
alert('click')
}<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- font-awesome -->
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<iframe name="votar" style="display:none;"></iframe>
<form class="save-form" action="" method="post" target="votar" onsubmit="submitFunc(event)">
<div class="form-group">
<div class="form-row m-2" >
<input class="form-control" id="meaning" placeholder="Meaning" style="width:75%">
<button class="btn rounded text-left"><i class='plus-btn fas fa-plus-circle' onclick="meanFunc(event)"></i></button>
</div>
</div>
<input value="Submit" type="submit" class="btn btn-primary m-2">
</form>
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-08-13 02:17:02
按钮的默认类型是submit。只需将其设置为按钮即可，例如<button class="btn rounded text-left" type="button">
function submitFunc(e) {
alert('submit')
}
function meanFunc(e) {
alert('click')
}<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- font-awesome -->
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<iframe name="votar" style="display:none;"></iframe>
<form class="save-form" action="" method="post" target="votar" onsubmit="submitFunc(event)"> <div class="form-group">
<div class="form-row m-2" >
<input class="form-control" id="meaning" placeholder="Meaning" style="width:75%">
<button class="btn rounded text-left" type="button"><i class='plus-btn fas fa-plus-circle' onclick="meanFunc(event)"></i></button>
</div>
</div>
<input value="Submit" type="submit" class="btn btn-primary m-2">
</form>
Stack Overflow用户
发布于 2020-08-13 02:16:55
只需向函数和加号图标上的调用添加一个return false，下面是修改后的代码片段
function submitFunc(e) {
alert('submit')
}
function meanFunc(e) {
alert('click')
return false;
}<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- font-awesome -->
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<iframe name="votar" style="display:none;"></iframe>
<form class="save-form" action="" method="post" target="votar" onsubmit="submitFunc(event)"> <div class="form-group">
<div class="form-row m-2" >
<input class="form-control" id="meaning" placeholder="Meaning" style="width:75%">
<button class="btn rounded text-left"><i class='plus-btn fas fa-plus-circle' onclick="return meanFunc(event);"></i></button>
</div>
</div>
<input value="Submit" type="submit" class="btn btn-primary m-2">
</form>
Stack Overflow用户
发布于 2020-08-13 02:21:01
<button class="btn rounded text-left"><i class='plus-btn fas fa-plus-circle' onclick="meanFunc(event)"></i></button>只需从行中删除onlick ="meanFunc(event)“即可
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63382447
复制相关文章
相似问题
腾讯云开发者
