0

我对 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>
4

2 回答 2

7

为您的按钮元素添加一个type='button'属性。默认情况下，表单元素中的按钮元素充当提交按钮。

使用return falseorpreventdefault是错误的方法，因为您只是在抑制问题的症状（即您的按钮是提交按钮）。

于 2013-01-03T18:13:40.240 回答
1

捕获事件并取消默认操作。

onclick = function (event) {
    event.preventDefault();
}

您也可以return false;在函数结束时，但如果发生任何错误，它不会取消默认操作。

于 2013-01-03T18:15:05.150 回答