jcs*_*tha 0 javascript forms onclick submit
我对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>
Run Code Online (Sandbox Code Playgroud)
问题是当我点击这个按钮时,它确实运行了这个功能:
function changePlan(x,action){
if(action == 'change'){
var id = 'planname';
document.getElementById(id).innerHTML = x;
}
}
Run Code Online (Sandbox Code Playgroud)
并且它会更改该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>
Run Code Online (Sandbox Code Playgroud)
type='button'
向按钮元素添加属性.默认情况下,表单元素中的按钮元素充当提交按钮.
使用return false
或是preventdefault
错误的方法,因为你只是抑制问题的症状(这是你的按钮是一个提交按钮).
归档时间: |
|
查看次数: |
1934 次 |
最近记录: |