俺の開発研究所

Ruby on Rails、Linux、Windowsを中心にIT技術系の備忘録とか。よく忘れるので。

*

JavaScriptによるHTMLの通常ボタン、サブミットボタンの小技

      2014/08/31

JavaScriptによるHTMLの「通常ボタン(button)」、「サブミットボタン(submit)」のよく使う小技です。

よく使う割には、使い方をすぐ忘れるのでメモ。

スポンサード リンク

通常ボタンのonclickイベントで画面遷移

「location.href」でアンカーのようにGETリクエスト送信できる。

下記のように「onclick」属性に指定すれば、ボタン押下で画面遷移できる。

通常ボタンでサブミット

サブミットボタンを使わずに、通常ボタンでサブミットする。

JavaScriptの「submit」関数でフォームをPOSTリクエスト送信できる。

下記のように「onclick」属性に指定すれば、ボタン押下でサブミットできる。

通常ボタンでサブミット(JavaScript内でサブミット)

上記の「通常ボタンでサブミット」と同じことをJavaScript内で行う。

サブミット前に、JavaScript内で入力値チェックを行いたい場合などに使える。

サブミットボタンでサブミット前にJavaScriptでチェック

サブミットボタンでPOSTリクエスト送信される前に、JavaScript内で入力値チェックを行いたい場合に使える。

JavaScript関数呼出の前に「return」をつけて置くと、関数の戻り値でサブミットする・しないを制御できる。

サブミットしたい場合は「true」を、サブミットしたくない場合は「false」を返却してやる。

忘れぬようにせねば。

参考サイト

input type=”submit” の onclick で入力値チェック – ただぶろぐ

JavaScript/ウィンドウ/確認ダイアログを表示する – TAG index Webサイト

 - HTML, JavaScript