質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

1575閲覧

jQueryでの$().submit()の動作について

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/01/29 14:38

フォームからの送信ボタン(type="submit")をクリックされたとき
jsファイルにて下記のような処理を行うようにプログラミングしています。

jQuery

1$(function() { 2 var forms = '#testform'; 3 4 $('#submit_button').on('click', errorcheck); 5 6 function errorcheck() { 7 console.log('check1'); 8 9 //送信しない 10 $(forms).submit(function() { 11 console.log('cancel'); 12 return false; 13 }); 14 15 /* 16 空欄がないかを確認する処理 17 空欄あり => errorflg = false; 18 空欄なし => errorflg = true; 19 */ 20 21 if (errorflg) { 22 valuecheck(); 23 } else { 24 //終了 25 return false; 26 } 27 28 }; 29 30 function valuecheck() { 31 console.log('check2'); 32 33 /* 34 正規表現などを用いて入力値を確認する処理 35 不正あり => valueflg = false; 36 不正なし => valueflg = true; 37 */ 38 39 if (valueflg) { 40 ajaxstart(); 41 } else { 42 //終了 43 return false; 44 } 45 }; 46 47 function ajaxstart() { 48 var formsinfo = $(forms).serialize(); 49 50 $.ajax({ 51 type: 'post', 52 url: 'insert.php', 53 data: formsinfo, 54 datatype: 'json', 55 }).done(function(returns) { 56 //jsonで返ってきた値を処理 57 }).fail(function(jqXHR, textStatus, errorThrown) { 58 alert('エラーです\n'); 59 }); 60 }; 61});

これを実行した際、
コンソール(GoogleChromeで確認)には以下のように表示されていると私は考えていました。

check1
cancel
check2

しかし、実際は以下のように表示されます。

check1
check2
cancel

また、エラーを繰り返すテストを行うとコンソールのメッセージが下記のようになります。

check1
check2
cancel
cancel
cancel

送信ボタンを押したのが3回目だと「cancel」が3回連続で、
4回目だと「cancel」が4回連続で表示と増えていきます。

そこで質問なのですが、
A.私が考えていたような順番にならないのはなぜでしょうか。
何か優先順位があるのでしょうか。
B.送信ボタンを押した回数だけ「cancel」が増えるのはなぜでしょうか。

以上、ご教示いただけると幸いです。

なお、質問に関係ないと思われる部分のプログラムは省略しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ざっと書いておきました

  • 空欄チェックをするものにはdata-requiredをつけてあります
  • 正規表現チェックするものにはdata-patternを指定してあります

これは本来requiredとpatternでsubmitを抑制できるものの
エミュレートです。
つまり普通にrequiredとsubmitで処理すればいいような気がします。

  • ajaxでpostするときはFormDataをつかうのがスマートです。
  • 「datatype」は「dataType」なので注意

javascript

1<script> 2$(function() { 3 var forms = '#testform'; 4 $(forms).on('submit',function(e){ 5 e.preventDefault(); 6 var flg1=!$(this).find("[data-required]").is(function(){ 7 return $(this).val()==""; 8 }); 9 var flg2=!$(this).find("[data-pattern]").is(function(){ 10 console.log(new RegExp("^"+$(this).data("pattern")+"$")); 11 return !$(this).val().match(new RegExp("^"+$(this).data("pattern")+"$")); 12 }); 13 console.log([flg1,flg2]); 14 if(flg1 && flg2){ 15 var fd=new FormData($(this).get(0)); 16 $.ajax({ 17 type: 'post', 18 url: 'insert.php', 19 data: fd, 20 dataType: 'json', 21 cache:false, 22 processData: false, 23 contentType: false, 24 }).done(function(data) { 25 console.log(data) 26 }).fail(function(xhr,err) { 27 alert(err); 28 }); 29 } 30 }); 31}); 32</script> 33<form id="testform"> 34<input type="text" name="a" data-required="1" data-pattern=".{0,3}">(入力必須、3文字以内)<br> 35<input type="text" name="b" data-required="1">(入力必須)<br> 36<input type="text" name="c" data-pattern="[0-9]*">(入力任意、数字のみ)<br> 37<input type="submit" value="go"> 38</form> 39

投稿2019/01/30 01:15

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/01/30 13:14

ご回答ありがとうございます。 HTML側の<input>に記述することでこんなことができるとは初めて知りました。 ぜひ今後の参考にさせていただきます。 先輩に教えられた方法や、初めてやって成功した方法を繰り返したり、 その時必要なものにちょっと書き換えたりするような仕事のやり方じゃ全然ダメですね。 もっと学ぶことに貪欲になって成長していきます。 FormDataの方がスマートというのは調べて勉強したいと思います。 今回はありがとうございました。 「dataType」のご指摘ありがとうございます。
guest

0

下記はsubmitイベントに関数を割り当てています。(submitしていません)

js

1 $(forms).submit(function() { 2 console.log('cancel'); 3 return false; 4 }); 5```6```js 7 // これと同じ 8 $(forms).on('submit',function() { 9 console.log('cancel'); 10 return false; 11 });

ちなみに#submit_buttonをクリックするたび新しくイベントに関数を割り当てするので、submitイベントが起こると全ての関数がそれぞれ実行されます。丁寧にイベントを外す処理をする気が有れば別ですが、基本的にイベントの中でイベントを割り当てるのは意図せぬ挙動に悩むことになります。

【.submit() | jQuery API Documentation】
https://api.jquery.com/submit/

This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third.

投稿2019/01/29 15:26

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/01/30 12:52

ご回答ありがとうございます。 「$(forms).on('submit',function() {」と同じという考えは全く出てきませんでした。 $().val()とかと同じだとずっと考えていました。 お恥ずかしい限りです。 もっとプログラミングに関しての調べ方を勉強します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問