onclick触发提交？
我对javascript比较陌生，但现在我有一个表单，可以通过点击<button>来修改，然后在最后他们应该能够点击提交按钮来实际提交和保存表单。
所有其他按钮都可以很好地触发各自的javascript功能，但是当按下这个按钮时，应该会更改特定<span id='planname'>标记的innerHTML。
<td><span id=''></span><span id='planname'></span></td>
<td id='planopt'><button class='button square blue effect-2' onclick="changePlan('Myfixworked','change');">Change</button></td>问题是，当我单击此按钮时，它确实会运行函数：
function changePlan(x,action){
if(action == 'change'){
var id = 'planname';
document.getElementById(id).innerHTML = x;
}
}它会更改该id的innerHTML，但随后会立即提交表单。我试着重命名id，结果是一样的。我甚至尝试改变它触发的函数，它也会产生同样的结果。如果我将其影响的id更改为在此之后出现的任何id，例如var id = 'planopt';，它将工作得很好，更改了innerHTML并且不提交表单。
任何帮助都将不胜感激。下面是一个全面的代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function changePlan(x,action){
if(action == 'change'){
var id = 'nameofplan';
document.getElementById(id).innerHTML = x;
}
}
</script>
</head>
<body>
<form action='' method='post' name='quote'>
<table border='0' style='border-collapse:collapse;' width='100%' id='serviceplan'>
<tr style='border-bottom: 2px solid #3D3D3D;'><th align='left' colspan='2'>Description</th><th align='left' width='30%'>Quantity</th><th width='10%'>Price</th><th align='right' width='25%'>Total</th></tr>
<tr style='border-bottom: 1px solid #3D3D3D;'><td class='subt' colspan='5'>Service Plan</td></tr>
<tr style='border-bottom: 1px dotted #3D3D3D;'>
<td align='left'><span id='nameofplan'>Your Plan</span></td>
<td id='planopt'><button class='button square blue effect-2' onclick="changePlan('Your New Plan','change');">Change</button></td>
<td>1</td>
<td align='center'>$<span id='planprice'>1.00</span>/month</td>
<td align='right'>$<span id='subplan'>1.00</span></td>
</tr>
</table>
</form>
</body>
</html>回答 2
Stack Overflow用户
发布于 2013-01-04 02:13:40
向您的按钮元素添加一个type='button'属性。默认情况下，表单元素中的button元素充当提交按钮。
使用return false或preventdefault是错误的方法，因为您只是隐藏了问题的症状(即您的按钮是一个提交按钮)。
Stack Overflow用户
发布于 2013-01-04 02:15:05
捕获事件并取消默认操作。
onclick = function (event) {
event.preventDefault();
}您也可以在函数的末尾执行return false;，但如果出现任何错误，它不会取消默认操作。
https://stackoverflow.com/questions/14144655
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号