0

私はjavascriptに比較的慣れていますが、今はクリックして変更できるフォームがあり<button> 、最後に送信ボタンをクリックして実際にフォームを送信して保存できるはずです。

他のすべてのボタンは、それぞれのjavascript関数を正常にトリガーしますが、この1つのボタンを押すと、特定の<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の後に発生する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 false問題の症状を抑制しているだけなので、またはを使用するpreventdefaultのは間違ったアプローチです（つまり、ボタンが送信ボタンです）。

于 2013-01-03T18:13:40.240 に答える
1

イベントをキャプチャし、デフォルト アクションをキャンセルします。

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

関数の最後でもreturn false;実行できますが、エラーが発生した場合、デフォルトのアクションはキャンセルされません。

于 2013-01-03T18:15:05.150 に答える