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

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

ただいまの
回答率

89.12%

一つのformに複数のsubmitボタンが存在する時、押すボタンによって処理を分けたいのですが、上手くいきません。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 274

nosan1

score 25

以下の様なコードがあります。

<form method="POST" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="btn-wrap">
    <button class="btn-save_and_edit" type="submit" name="save_and_edit">一時保存して編集を継続</button>
    <div class="btn-save_and_edit_loading">
      <img src="load.gif">
    </div>
  </div>
  {{ form|bootstrap}}
  <div class="btn-wrap">
    <button class="btn-save" type="submit">投稿</button>
    <div class="btn-save_loading">
      <img src="load.gif">
    </div>
  </div>
</form>
$(function() {
    $('.btn-save').click(function(e) {
        e.preventDefault();
        $('form').submit();
        $('.btn-save').hide();
        $('.btn-save_loading').show();
    });
});

$(function() {
    $('.btn-save_and_edit').click(function(e) {
        e.preventDefault();
        $('form').submit();
        $('.btn-save_and_edit').hide();
        $('.btn-save_and_edit_loading').show();
    });
});
.btn-save_and_edit_loading {
  display: none;
}

.btn-save_loading {
  display: none;
}

本来なら押すボタンによって処理を分けたいのですが、

$('form').submit();


この指定により、1つ目のボタンをクリックしても2つ目のボタンの処理が実行されてしまいます。
この処理を分けたいのですが、どの様にすれば良いでしょうか?

ちなみに、下記記述があるか無いかでサーバーサイドで処理を分岐しています。

name="save_and_edit"
    def form_valid(self, form):
        form.instance.user_id = self.request.user.id
        post = form.save()
        # 保存して編集を続けるボタン
        if 'save_and_edit' in self.request.POST:
            return redirect('post:post_update', pk=post.id)
        else:
            return redirect('post:create_done')
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2020/06/28 18:34

    欲しいアドバイスの方向性にあわせたほうが良いかと思います。
    HTML,JavaScriptで欲しいなら存在しない記述はやめて、ブラウザに出力されたHTMLを提示すべきだし、サーバーサイドでの処理も意識したいならタグに追加し、質問にも前提を記載すべきです。

    キャンセル

  • miyabi_takatsuk

    2020/06/28 18:36

    一応、python、djangoの質問タグも追加しておきましょう。
    (そのHTMLが最終である限りは、不都合に関係はなさそうではある)

    キャンセル

  • nosan1

    2020/06/28 18:36

    かしこまりました。
    お二方、ご丁寧にありがとうございます。

    キャンセル

回答 1

checkベストアンサー

+2

まず、HTML側で、formの送信は止めちゃいます。(jsでの処理を挟むため)
これしとかないと、意図しない送信されちゃうの防ぐのけっこうめんどうなので。

<form method="POST" enctype="multipart/form-data" onsubmit="return false;">
<!-- 中略 -->
</form>

で、クリックイベントは下記のようにします。

$(function() {

$('.btn-save').click(function(e) {
  e.preventDefault();

  $('.btn-save').hide();
  $('.btn-save_loading').show();

  // 送信は最後にしないと、上記が実行されずに送信が発生する。(formの送信は、ページ遷移と同等と考えた方がいい)
  $('form').submit();    
});

$('.btn-save_and_edit').click(function(e) {
  e.preventDefault();

  // なんやかんやの処理をする。

  $('form').submit();    
});

});

コード中にも記載しましたが、
formの送信は、基本的には、ページ遷移が行われます
action属性を省略した場合は、自身に再遷移します。→ まぁ、見た目的にはリロードと挙動は一緒)
なので、それを考慮した処理をする必要があります。

追記に対して

form要素は、form内に置いている、全てのname属性付きinput要素の内容を送信します。
つまり、二つのボタンに、name属性がついている場合、片方を押したとしても、
もう片方にもname属性がついている場合、両方の情報が送信されます。
(この仕様はしっかりと覚えてください。)
よって、HTML、JavaScriptを下記のように修正するといいでしょう。

<!-- というか、submit用のボタンにnameをつけることはほとんどありません。(送信する情報として使うことがほぼない) -->
<form method="POST" enctype="multipart/form-data" onsubmit="return false;">
<!-- 中略 -->
    <button class="btn-save_and_edit" type="submit">一時保存して編集を継続</button>
<!-- 中略 -->
</form>
$(function() {

const formElm = $('form');
// formに、見えないけど情報を持つinput[type="hidden"]を追加する。
const inputData = document.createElement('input');
inputData.type = 'hidden';
inputData.value = 'nameType';

formElm[0].appendChild(inputData);

$('.btn-save').click(function(e) {
  e.preventDefault();

  $('.btn-save').hide();
  $('.btn-save_loading').show();

  // inputのnameを変更。サーバー処理対象外にするために。
  inputData.name = 'notEdit';

  // 送信は最後にしないと、上記が実行されずに送信が発生する。(formの送信は、ページ遷移と同等と考えた方がいい)
  formElm.submit();    
});

$('.btn-save_and_edit').click(function(e) {
  e.preventDefault();

  // なんやかんやの処理をする。

  // inputのnameを、サーバー側で判断させるために、name値を対象にする値に変更
  inputData.name = 'save_and_edit';

  formElm.submit();    
});

});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/06/30 22:58

    一点確認なのですが、ボタンをinputでは無く、buttonで記述しているのは関係ありますかね?
    <button class="btn-save" type="submit">投稿</button>

    キャンセル

  • 2020/06/30 23:06

    ありません。
    type="submit"を指定していますので、
    送信する役割のみ持ちます。
    また、その定義だと、nameもvalueもありませんので、
    form送信時には情報を持ちません。

    キャンセル

  • 2020/06/30 23:08

    了解致しました。
    ご丁寧にありがとうございました。

    キャンセル

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

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • JavaScriptに関する質問
  • 一つのformに複数のsubmitボタンが存在する時、押すボタンによって処理を分けたいのですが、上手くいきません。