フォームのonSubmitイベントを取得する方法は？

onsubmitイベントをフォームから取得して、フォームの検証を行う方法を知りたいのですが、直接アクセスすることができないためです。（私はコメントのためのWordpressのプラグインを書いていますので、フォームタグや送信ボタンに直接アクセスしないでください）フォームのonSubmitイベントを取得する方法は？

Hello World版を書いた私のプラグインでこれをしようとすると、以下。私はページをロードするときに 'Hello World'アラートを表示し、送信ボタンをクリックすると "form submitted"アラートを表示します。代わりに、ページが読み込まれたときに両方のポップアップが表示されます。あなたは、関数の最後に括弧を追加するときは、その関数を実行

formCheck.onSubmit = doMapping

：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html> 
    <head> 
    <title>Hello World</title> 
    </head> 
    <body> 
    <h2>Test</h2> 
    <form action="#" method="post" id="commentform"> 

    <p><input type="text" name="author" id="author" size="22" tabindex="1" /> 
    <label for="author"><small>Name (required)</small></label></p> 

    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> 

    </form> 

    <script type="text/JavaScript"> 
    <!-- 
    alert("Hello world"); 

    var formCheck = document.getElementById("commentform"); 

    formCheck.onSubmit = doMapping(); 

    function doMapping() { 
     alert("form submitted"); 
     return false; 
    } 

    --> 
    </script>  

    </body> 
    </html>

出典

2009-04-02 Anonymous

変更この：これに

formCheck.onSubmit = doMapping()

ここ

は私のコードです。関数を割り当てるとき（または別の関数にパラメータとして渡すとき）は、JavaScriptで関数ポインタを取得する方法であるので、括弧を省略する必要があります。

編集：また、このようなをonSubmitイベントへの機能の割り当てを超えるdoMapping関数の宣言を移動する必要があります（良いキャッチtvanfosson！）：しかし

function doMapping() { 
     alert("form submitted"); 
     return false; 
    } 

formCheck.onSubmit = doMapping();

他の場所でdoMapping関数が使用されていない場合は、

formCheck.onSubmit = function() { 
     alert("form submitted"); 
     return false; 
    }

のように、 doMapping関数を宣言することができます

これは私にとって少しきれいなようです。

出典

2009-04-02 15:51:19

doMappingはonSubmitハンドラとして割り当てる前に定義する必要があるため、順序を変更する必要もあると思います。 – tvanfosson

ありがとうございます - 私は自分の答えに編集しました。 –

jQueryを使用しています。

$(document).ready(function() { 
    $('#commentform').submit(function() { 
     alert('form submitted'); 
     return false; 
    }); 
});

出典

2009-04-02 15:54:31 tvanfosson

ありがとうございます！実際には、Andrewの提案とwindow.onloadイベントの両方を使用して別の方法で解決しました。問題は要素が実際にロードされていなかったことが原因でした。

window.onload = function(){ 
    if (document.getElementById("commentform")){ 
     document.getElementById("commentform").onsubmit = doMapping; 
    } 
} 

function doMapping(){ 
      alert("form submitted"); 
      return false; 
}

出典

2009-04-02 16:07:44

onloadイベントは、ページ全体がロードされた後に発生すると考えられます。ですから、読み込みに時間がかかる画像が必要です.Googleアナリティクスなどのイベントハンドラは、ユーザーが送信を開始する前にアシストされません。 – Rashack

jQueryの答えはそれを処理します... – Rashack

フォームのonSubmitイベントを取得する方法は？

答えて

関連する問題