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

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

質問する

ただいまの
回答率

88.19%

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

解決済

回答 2

投稿 ・編集

  • 評価
  • クリップ 3
  • VIEW 888
tsuyu

tsuyu

score 5

前提・実現したいこと

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');の動きなどはあまりきちんとわかっていないためなぜ送られないのかがよくわかりません。
よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert3 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    m.ts10806

    2020/01/22 15:52

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

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

    キャンセル

  • tsuyu

    tsuyu

    2020/01/22 16:02

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

    キャンセル

  • mari.rinn

    mari.rinn

    2020/01/22 16:49

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

    キャンセル

回答 2 件

link

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/23 10:36

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

    キャンセル

  • 2020/01/23 15:56

    > 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');
    }
    });

    キャンセル

  • 2020/01/24 10:30

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

    キャンセル

link

0

最後の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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/23 10:34

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

    キャンセル

  • 2020/01/23 10:51

    追記をご覧ください。

    キャンセル

  • 2020/01/24 10:28

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

    キャンセル

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

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る