formObject.onsubmitは、フォームの内容を送信する時のイベント。
フォーム送信時にイベントハンドラを登録したいときに使う。
構文
HTML
<form onsubmit="イベントハンドラ"></form>
JavaScript
formObject.onsubmit = function(){ イベントハンドラ };
サンプル１
サンプル１について
HTMLドキュメント上でイベントハンドラを登録するサンプル。
サンプル１の動作について
- 「送信」ボタンをクリックすると、【サンプルフォーム】の内容を送信する。「【サンプルフォーム】」の右横に「送信しました！」と約３秒間だけ点滅表示する。その間、「送信」と「リセット」ボタンを無効にし、操作できなくする。
- 「リセット」ボタンをクリックすると、【サンプルフォーム】の内容をリセットし、初期状態に戻す。このサンプルの場合、入力欄の値を「JavaScript」に戻す。「【サンプルフォーム】」の右横に「リセットしました！」と約３秒間だけ点滅表示する。その間、「送信」と「リセット」ボタンを無効にし、操作できなくする。
サンプル１のソースコード
JavaScript
<script type="text/javascript">
function eventFunction( $message ) {
var $formObject = document.getElementById( "sampleForm" );
var $sampleOutput = document.getElementById( "sampleOutput" );
for( var $i = 1; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].disabled = true;
}
$sampleOutput.innerHTML = $message;
setTimeout(
function(){
$sampleOutput.innerHTML = "";
},
500
);
var $intervalID = window.setInterval(
function(){
$sampleOutput.innerHTML = $message;
setTimeout(
function(){
$sampleOutput.innerHTML = "";
},
500
);
},
1000
);
setTimeout(
function(){
for( var $i = 1; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].disabled = false;
}
clearInterval( $intervalID );
},
2999
);
}
</script>
function eventFunction( $message ) {
var $formObject = document.getElementById( "sampleForm" );
var $sampleOutput = document.getElementById( "sampleOutput" );
for( var $i = 1; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].disabled = true;
}
$sampleOutput.innerHTML = $message;
setTimeout(
function(){
$sampleOutput.innerHTML = "";
},
500
);
var $intervalID = window.setInterval(
function(){
$sampleOutput.innerHTML = $message;
setTimeout(
function(){
$sampleOutput.innerHTML = "";
},
500
);
},
1000
);
setTimeout(
function(){
for( var $i = 1; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].disabled = false;
}
clearInterval( $intervalID );
},
2999
);
}
</script>
HTML
<form id="sampleForm" method="get" action="http://alphasis.info/" target="_blank" onsubmit="eventFunction(' 送信しました！')" onreset="eventFunction(' リセットしました！')">
<p>【サンプルフォーム】<span id="sampleOutput"></span></p>
<p>
入力欄：<input type="text" name="s" value="JavaScript">
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</p>
</form>
<p>【サンプルフォーム】<span id="sampleOutput"></span></p>
<p>
入力欄：<input type="text" name="s" value="JavaScript">
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</p>
</form>
CSS
<style>
#sampleForm p {
margin-bottom: 3px;
}
#sampleForm p * {
margin: 0;
}
#sampleOutput {
color: red;
font-weight: bold;
}
</style>
#sampleForm p {
margin-bottom: 3px;
}
#sampleForm p * {
margin: 0;
}
#sampleOutput {
color: red;
font-weight: bold;
}
</style>
サンプル２
サンプル２について
JavaScript上で動的にイベントハンドラを登録するサンプル。
サンプル２の動作について
- 「送信」ボタンをクリックすると、【サンプルフォーム】の内容を送信する。「【サンプルフォーム】」の右横に「送信しました！」と約３秒間だけ点滅表示する。その間、「送信」と「リセット」ボタンを無効にし、操作できなくする。
- 「リセット」ボタンをクリックすると、【サンプルフォーム】の内容をリセットし、初期状態に戻す。このサンプルの場合、入力欄の値を「JavaScript」に戻す。「【サンプルフォーム】」の右横に「リセットしました！」と約３秒間だけ点滅表示する。その間、「送信」と「リセット」ボタンを無効にし、操作できなくする。
サンプル２のソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleFormB" ).onreset = function(){
eventFunctionB(' リセットしました！');
};
document.getElementById( "sampleFormB" ).onsubmit = function(){
eventFunctionB(' 送信しました！');
};
}
function eventFunctionB( $message ) {
var $formObject = document.getElementById( "sampleFormB" );
var $sampleOutput = document.getElementById( "sampleOutputB" );
for( var $i = 1; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].disabled = true;
}
$sampleOutput.innerHTML = $message;
setTimeout(
function(){
$sampleOutput.innerHTML = "";
},
500
);
var $intervalID = window.setInterval(
function(){
$sampleOutput.innerHTML = $message;
setTimeout(
function(){
$sampleOutput.innerHTML = "";
},
500
);
},
1000
);
setTimeout(
function(){
for( var $i = 1; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].disabled = false;
}
clearInterval( $intervalID );
},
2999
);
}
</script>
window.onload = function () {
document.getElementById( "sampleFormB" ).onreset = function(){
eventFunctionB(' リセットしました！');
};
document.getElementById( "sampleFormB" ).onsubmit = function(){
eventFunctionB(' 送信しました！');
};
}
function eventFunctionB( $message ) {
var $formObject = document.getElementById( "sampleFormB" );
var $sampleOutput = document.getElementById( "sampleOutputB" );
for( var $i = 1; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].disabled = true;
}
$sampleOutput.innerHTML = $message;
setTimeout(
function(){
$sampleOutput.innerHTML = "";
},
500
);
var $intervalID = window.setInterval(
function(){
$sampleOutput.innerHTML = $message;
setTimeout(
function(){
$sampleOutput.innerHTML = "";
},
500
);
},
1000
);
setTimeout(
function(){
for( var $i = 1; $i < $formObject.length; $i++ ) {
$formObject.elements[$i].disabled = false;
}
clearInterval( $intervalID );
},
2999
);
}
</script>
HTML
<form id="sampleFormB" method="get" action="http://alphasis.info/" target="_blank"">
<p>【サンプルフォーム】<span id="sampleOutputB"></span></p>
<p>
入力欄：<input type="text" name="s" value="JavaScript">
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</p>
</form>
<p>【サンプルフォーム】<span id="sampleOutputB"></span></p>
<p>
入力欄：<input type="text" name="s" value="JavaScript">
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</p>
</form>
CSS
<style>
#sampleFormB p {
margin-bottom: 3px;
}
#sampleFormB p * {
margin: 0;
}
#sampleOutputB {
color: red;
font-weight: bold;
}
</style>
#sampleFormB p {
margin-bottom: 3px;
}
#sampleFormB p * {
margin: 0;
}
#sampleOutputB {
color: red;
font-weight: bold;
}
</style>