【jQuery】2回クリックしないとformが送信されない

Question

前提・実現したいこと

form送信前にAJAXで入力内容をチェックし問題がなければそのまま送信したい。
内容変更と新規登録をボタンで切り分けしているため.submit()ではなくclickイベントを使用しています。

発生している問題・エラーメッセージ

1回目のclickでformが送信されない。
2回目以降は普通に送信されます。

該当のソースコード

<form action="edit2.php" method="post" id="myForm">
いろいろフォームの内容

<input type="submit" name="update" value="内容変更" class="check" /><br>
<input type="submit" name="insert" value="新規登録" class="check" />
</form>

$('.check').off('click');
$('.check').on('click',function(){
  var form = $("#myForm");
  form.submit(function(e) {
    e.preventDefault(); //送信STOP
  });

  $('.err').remove();
  var _this = $(this),
      mode = _this.attr('name'),
      datas = form.serialize();
  _this.val('チェック中');
  $.ajax({
    type: "POST",
    cache: false,
    url: "check.php",
    data: { mode : mode, datas : datas },
    dataType:"json"
  }).done(function(datas) {
    if(datas['err']){
      $.each(datas.err,function(key, item){
        $('*[name="'+key+'"]').after('<span class="err">　'+item+'</span>');
      });
      _this.val('エラーあり');
    } else {
      _this.val('OK');
      form.off('submit');
      form.submit(mode);
    }
  });
});

試したこと

どこまで進んでいるのかわからなかったのでボタンのvalueを書き換えてみたところ
きちんと「OK」になるのですが1回目のクリックではform.submit(mode);が動きません。
form.off('submit');の動きなどはあまりきちんとわかっていないためなぜ送られないのかがよくわかりません。
よろしくお願いします。

Comments

[m.ts10806]

>どこまで進んでいるのかわからなかったので

console.log()で各所でなにかしら出力書いてコンソール確認された方が良いかと思います

[tsuyu]

すみません、console.log()は今回投稿で消してました。
最終まで進んでいてformだけ送られない状態です。
もう一度クリックすると送られるのでoffの位置なのかと思ったのですが別の場所に書くとチェックの前に送られてしまって今の位置に戻しました。

[mari.rinn]

これのhtmlの方も書いていただけますか？

Answer 1

一旦イベントをpreventDefault()で止めて、ajaxのdoneの中で
条件を確認しつつ、特定条件でformをsubmitすればよいのでは？
まぁ一旦サブミットしてからサブミットするは効率いいかといわれると
微妙ですが

Comments

[tsuyu]

clickではなくsubmitで判断するということでしょうか。
その場合どのボタンをクリックされたか取得の仕方がわからず今の状態になりました。

[yambejp]

> clickではなくsubmitで判断するということでしょうか

ちょっと認識がずれてます
→イベントをpreventDefault()で止めて
$('.check').on('click',function(e){
e.preventDefault();

→ajaxのdoneの中で条件を確認しつつ
→formをsubmit
var form=$(this).closest("form");
$.ajax({・・・}).done(function(data){
if(data=="なんちゃら"){
form.trigger('submit');
}
});

[tsuyu]

フォームの送信の止め方がわからず無駄な書き方をしていました。
すっきり書けました。ありがとうございました。

Answer 2

最後のsubmit(mode)はsubmitイベントにバインドするだけの処理になっています。
第二引数にtrueを返すように指定することでsubmitできると思います。
追記~~
すみません。第二引数は関数の指定でした。submit(mode)と同じで第二引数を指定するのもバインドとするだけの処理です。

submit(mode);
submit();

としてください。
.submit() リファレンス
リファレンスを見ると、
.submit(hoge),.submit(hoge,function(){})は.bind('submit', handler)への、.submit()は.trigger('submit')へのショートカットですと書かれています。

~~追記終わり

動作検証していませんが、正しくはajaxの処理を下記のsubmitの処理で囲むのが正だと思います。

  form.submit(function(e) {
    e.preventDefault(); //送信STOP
  });

参考URL

Comments

[tsuyu]

submitの処理で囲んでも囲まなくてもこちらも処理が変わらず一旦外に出したものを書いてしまいました。
form.submit(mode, true);ということでしょうか。やはり2回めにformが送られました。

[makosankibu]

追記をご覧ください。

[tsuyu]

.trigger('submit') で送ることができました！
ありがとうございました。