13

私は次のフォームを持っています：

<form class="custom" method="post" action="/checkout/submit/">
...
    <div class="row">
        <div class="ten mobile-three columns" style="margin-top: 20px;">
            <input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
            <input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
            <input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
            &nbsp;&nbsp;<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
        </div>
    </div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
    $('#previous-btn').prop('disabled', true);
    $('#next-btn').prop('disabled', true);
    $('#ajax-img').css('display','inline');
    return true;
}
</script>
</body>
</html>

使用しonclickて、ボタンを無効にし、フォームの送信中に ajax 読み込み画像を表示します。そのため、ユーザーは送信を 2 回クリックしません。

問題は、Chrome ではフォームが送信されないことです。したがって、onlclick 関数は問題なく動作しますが、それだけです。FF と IE では、すべて正常に動作しています。最初に、javascript がボタンに変更を加えてから、フォーム送信の通常の流れが行われます。

Chromeで壊れる理由を教えてください。ありがとう！

4

2 に答える 2

8

理論上はコードが機能するはずですが、この同様の SOの質問 およびこの chrome groups のディスカッション(バグである可能性があり、意図された設計である可能性があります) に記載されているように、Chrome はそうではないと考えます。

まず、クリックを許可/ブロックする場合は、使用する必要があります。使用onclick="return someFunction()"しないでくださいonclick="someFunction()"。その場合、その関数が true を返す場合にのみ、アクションが実行されます。

これを機能させるには、関数からフォームを送信する必要があります。

$(this).parents('form').submit()
于 2013-05-31T23:10:22.130 に答える
2

フォームでこのように使用する必要がありますonclick="someFunctionToDoJob(); submit();"。

そしてあなたのsomeFunctionToDoJob();追加でこれdocument.hereNameYourForm.submit();

于 2014-02-17T21:45:07.677 に答える