現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

イベント

JavaScriptでフォームの送信時に処理を行いたい

投稿日:2019年6月18日 更新日:

onsubmit = ★ フォーム送信時
★・・・実行する命令(関数や関数名)
フォームが送信されたときに発生するイベントです。実行する命令の戻り値がfalseの場合は送信を行いません。

スポンサーリンク

onsubmitイベント

submitボタンがクリックされたときに発生するイベントです。
// フォームが送信されたら関数 formCheck を呼び出します。

スポンサーリンク

フォームの送信をJavaScriptで制御するメリットの一つは、未記入の項目があるとき、フォームを送信しないようにできることです。送信しないようにするには、onsubmitイベントの処理としてreturnステートメントでfalseを返すようにします。
入力の確認などをしてからフォームを送信させた場合はreturnの後に関数名を指定して、その関数の中で入力が誤っていたらfalseを返すようにしてください。たとえば
function sendMail() {
return false;
}
というfalseを返す関数を作成して、<form>タグのonsubmitイベントを
onsubmit=”return sendMail()”
のように記述すると、フォームを送信しません(常にfalseを返します)。
この応用として以下のように記述すれば、text1に文字列が入力されている場合だけ送信できるようになります(document.form1はthisと書き換えることができます)。
<form name=”form1″ action=”” onsubmit=”return document.form1.text1.value!=””>
<input type=”text” name=”text1″ />
<input type=”submit” value=”送信” />
</form>

スポンサーリンク

-イベント
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

JavaScriptでマウスオーバー時に処理を行いたい

onmouseover = ★ マウスオーバー時 onmouseout = ★ マウスカーソルが離れたとき ★・・・実行する命令(関数や関数名) マウスカーソルがオブジェクト上に重なったとき、またはオ …

JavaScriptでフォーカスの移動時に処理を行いたい

onfocus = ★ フォーカスが合ったとき onblur = ★ フォーカスが離れたとき ★・・・実行する命令(関数や関数名) マウスカーソルや[Tab]キーによってフォーカスが移動したときに発生 …

JavaScriptで読み込み時や移動時に処理を行いたい!

onload = ★ ページの読み込み時 onunload = ★ ページの切り替え時 ★・・・実行する命令(関数や関数名) ページの内容が完全に読み込まれたときやページの切り替え時に処理を実行したい …

JavaScriptでイベントが発生した位置を調べたい

★.x マウスのX座標を参照 ★.y マウスのY座標を参照 ★.clientX マウスの表示領域上のX座標を参照/設定 ★.clientY マウスの表示領域上のY座標を参照/設定 ★.pageX マウ …

JavaScriptで画像が読み込めないときに処理を行いたい

onabort = ★ 画像の読み込み中断時 onerror = ★ 画像の読み込み失敗時 ★・・・実行する命令(関数や関数名) 画像が読み込めない場合に発生するイベントです。読み込めない画像の有無を …