0

Prototype API を介して Javascript を使用して、HTML フォームで複数の送信を防止しようとしています。この問題を解決するために使用するスニペットは次のとおりです。

function preventMultipleSubmits() {
    this.select('input[type="submit"]').invoke('disable');
    return true;
}

document.observe('dom:loaded', function() {
    var forms = $A(document.getElementsByTagName('form'));
    forms.each(function(form) {
        form.observe('submit', preventMultipleSubmits)
    });
});

このスニペットの問題は、フォームを送信してもサーバー側が呼び出されないことです。IE ブラウザーが CCS セレクターをうまくサポートしていないことはわかっていますが、問題は Firefox にも関係しているため、最初に FF に焦点を当てたいと思います。

環境とツール :

  • Firefox 13.0
  • プロトタイプ 1.6.1
4

1 に答える 1

1 
this.select('input[type="submit"]').invoke('disable');

submitこれは、無効な属性をボタンに追加するだけのようです。1 フィールド フォームの場合は、Enter を使用して送信することもできます。

次のようなことを試してみてください：

<script type="text/javascript">
function preventMultipleSubmits(event) {
    if (this.hasClassName('allow-one-time-submit')) {
        this.removeClassName('allow-one-time-submit');
        // don't stop the event
    } else {
        alert('You already submitted');
        event.stop();
    }
}

document.observe('dom:loaded', function() {
    var forms = $A(document.getElementsByTagName('form'));
    forms.each(function(form) {
        // add Class Name to each and every form on load
        form.addClassName('allow-one-time-submit');
        form.observe('submit', preventMultipleSubmits)
    });

});
</script>


<form action="http://www.example.com/path/to/action" class="allow-one-time-submit">
    <input type="text">
    <input type="submit" value="Submit">
</form>
于 2012-06-14T03:41:37.843 に答える