onsubmitイベント（サブミットイベント）とは、フォームの送信ボタン（サブミットボタン）をクリックした時のイベント。
構文
HTML
<form onsubmit="イベントハンドラ">
JavaScript
formObject.onsubmit = function(){ イベントハンドラ };
サンプル１
送信を試みた回数：0
サンプル１について
HTMLドキュメント上でイベントハンドラを登録するサンプル。
サンプル１の動作について
送信ボタンをクリックする度に、「送信を試みた回数：」の右横の数値に１を加算する。戻り値に「false」を指定してあるので、実際には送信されない。
サンプル１のソースコード
JavaScript
<script type="text/javascript">
var $sample1count = 0;
function sample1submit() {
document.getElementById( "sample1output" ).innerHTML = ++$sample1count;
return false;
}
</script>
var $sample1count = 0;
function sample1submit() {
document.getElementById( "sample1output" ).innerHTML = ++$sample1count;
return false;
}
</script>
HTML
<div>
<form onsubmit="return sample1submit();">
<input type="text" id="sample1input">
<input type="submit" value="送信">
</form>
<br />
送信を試みた回数：<span id="sample1output">0</span>
</div>
<form onsubmit="return sample1submit();">
<input type="text" id="sample1input">
<input type="submit" value="送信">
</form>
<br />
送信を試みた回数：<span id="sample1output">0</span>
</div>
サンプル２
送信を試みた回数：0
サンプル２について
JavaScript上で動的にイベントハンドラを登録するサンプル。
サンプル２の動作について
送信ボタンをクリックする度に、「送信を試みた回数：」の右横の数値に１を加算する。戻り値に「false」を指定してあるので、実際には送信されない。
サンプル２のソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sample" ).onsubmit = function(){
return sample2submit();
};
}
var $sample2count = 0;
function sample2submit() {
document.getElementById( "sample2output" ).innerHTML = ++$sample2count;
return false;
}
</script>
window.onload = function () {
document.getElementById( "sample" ).onsubmit = function(){
return sample2submit();
};
}
var $sample2count = 0;
function sample2submit() {
document.getElementById( "sample2output" ).innerHTML = ++$sample2count;
return false;
}
</script>
HTML
<div>
<form id="sample">
<input type="text" id="sample2input">
<input type="submit" value="送信">
</form>
<br />
送信を試みた回数：<span id="sample2output">0</span>
</div>
<form id="sample">
<input type="text" id="sample2input">
<input type="submit" value="送信">
</form>
<br />
送信を試みた回数：<span id="sample2output">0</span>
</div>