jQueryでsubmitしたり無効にする方法

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

HTMLのフォーム送信時にjQueryのsubmit()を使うと、フォームの送信を無効にしてバリデーションしたり、送信前にメッセージを出したりと、さまざまな表現が可能になります。

いろいろなsubmit()をご紹介します。

 

submit()でフォーム送信

<button>で送信

<button>要素は通常フォーム送信できませんが、jQueryのsubmit()を使って送信可能です。

HTML

jQuery

結果(サンプルページ)

下記サンプルページから動作確認お願いします。

<button>で送信のサンプルページはこちら

これで上記のフォームが送信されます。

基本構文

フォームにsubmit()を繋げれば<button><select>などのsubmitボタン以外の要素でもフォームの送信が可能になります。

<select>で選択したら送信

submit()を使えば、セレクトボックスを選択したらボタンを押さずにそのまま送信できます。

HTML

jQuery

結果(サンプルページ)

下記サンプルページから動作確認お願いします。

<select>で選択したら送信のサンプルページはこちら

チェックボックスなどにも応用できますね。

フォームを送信する前に処理を加える

ダイアログを出して送信

送信する前に「送信しますか?」といったダイアログを出すこともできます。

HTML

jQuery

結果(サンプルページ)

下記サンプルページから動作確認お願いします。

ダイアログを出して送信のサンプルページはこちら

これでダイアログ付きのフォーム送信が可能です。

説明

①submit() にダイアログを出す関数を入れ込む

通常は以下のように引数は空ですが、さらに下段のコードには関数が入っています。(赤字の部分)

通常

$(‘form’).submit(); 

関数をバインド

$(‘form’).submit(function() {
〜 処理 〜
});

この関数に送信前の処理を入れ込みます。

②ダイアログを出す

jQueryでダイアログを出すにはconfirm()を使います。

if文でキャンセルを選んだ場合に処理を中断するreturn falseを入れています。

バインドとは?

あっちとこっちを紐付ける、関連付ける、割り当てること

出典:バインド (bind)とは|わわわIT用語辞典

ここではsubmit()に処理内容がまとめられた関数を割り当てています。

 

if()については以下の記事で解説しています。

参考:jQueryでのif文の書き方(else,else ifなども)

基本構文(関数タイプ)

上記サンプルのようにsubmit()に関数を結び付けて、送信前にさまざまな処理を付け加えることができます。

submit()を無効にする

先ほどのダイアログのサンプルもsubmit()を無効にするコードがありましたね。

フォームをバリデートする

バリデートとは?

フォームを検証し、入力ミスや入力漏れ等をチェックすることです。

フォームが空欄だったらアラートで警告して送信を中断し、入力されたら送信します。

HTML

jQuery

結果(サンプルページ)

下記サンプルページから動作確認お願いします。

フォームをバリデートするのサンプルページはこちら

if文でテキストボックスが空か判定し、空だったらアラートで警告してreturn falseで処理を中断しました。

return false で処理を中断

return falseは、それ以降の処理を全て中断して終了させます。

処理の最後に記述するようにしましょう。

submit() が効かない

最後にsubmit()を使っても効かずに、フォームが送信されないことがあったのでご紹介します。

フォームのプロパティと競合させない

nameidsubmitと名付けるとsubmit()が効かなくなるようです。

効かなくなる例

<input type=”submit” name=”submit” id=”submit“>

input typeの値submitと競合して、効かなくなるんですね。

下記のようにinput typenameidとは違う値にしましょう。

nameとidを別名にする

<input type=”submit” name=”send” id=”send“>

 

HTMLフォームにはデフォルトで使用されているプロパティがあります。

  • submit
  • length
  • method …etc

これらとname属性値やid値が重複するとsubmit()が効かなくなります。

思わぬところでハマるポイントとなりますので注意しましょう。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*