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

Question

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

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

Comments

[m.ts10806]

{{ form|bootstrap}}

なんのテンプレートエンジンでしょうか。

[退会済みユーザー]

わかり辛くて大変申し訳ないです。python、djangoによるものです。

[m.ts10806]

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

[miyabi_pudding]

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

[退会済みユーザー]

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

Answer 1

まず、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();    
});

});

Comments

[退会済みユーザー]

アドバイスありがとうございます。
クリックされるボタンで遷移先をサーバーサイドで分けてるからなのか、いまいち上手くいかないです。
いろいろ調べてみます！！

[退会済みユーザー]

もし何か分かったらで良いので、追記していただけると助かります！！

[miyabi_pudding]

> クリックされるボタンで遷移先をサーバーサイドで分けてるからなのか

そんなの質問本文に書いてないので、こちらではわかりません。
後出しせずに、仕様をしっかり質問本文に記載して下さい。
でないと解決に導ける回答なんてできっこありません。

というか、何がどう上手くいかないんですか？
送信先のサーバーサイドの構文も併せて記載して下さい。

[退会済みユーザー]

お手数並びに大変失礼な事をしてしまい申し訳ございませんでした。
質問文に追記致しました。

[退会済みユーザー]

この度はご丁寧にありがとうございます。
また、私の不手際でご迷惑をお掛けしました。

また、もう一つ情報が不足していたのですが、nameのsave_and_editによって、サーバーサイド側で条件分岐し、リダイレクト先を決めていたのですが、この点についてもう少し考えてみます。

[miyabi_pudding]

ん？
回答の後半のコードだとそのような条件分岐になりませんか？

もし、そうならば、Python側のコードも記述いただかないと、こちらではいかんともしがたいです。

[退会済みユーザー]

お手数ばかりで申し訳ございません。
遷移先がよくわからない場所になってしまってます????

[退会済みユーザー]

参考までにpythonコードも載せてみました。

[miyabi_pudding]

Pythonコードを細かく検証して、何が起きているか確認して下さい。

self.request.POST
の中がどうなっているかを、
print関数などを使って確認してください。

[退会済みユーザー]

お世話になっております。
ボタンをクリックすると、一時保存の場合は、
search/?q=&save_and_edit=nameType
へ、
保存の場合は、
search/?q=&notEdit=nameType
へリダイレクトされてしまいます。
引き続き調査を続けます。

[miyabi_pudding]

まず、質問者さん自身が、どこで何をどう処理してるかを把握しないとどうしようもありません。
よって、今の状態で、第三者に質問して解決できる段ではありません。

しっかり、Pythonの処理も含めてどういう挙動をしているか把握してください。
そっからですね。

[miyabi_pudding]

inputに指定した、valueとnameが、リダイレクト先のURLに入っているので、そこがヒントになるかと。

[退会済みユーザー]

ご丁寧にありがとうございました。
後は自分で色々と調べてみます。
非常に助かりました。

[退会済みユーザー]

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

[miyabi_pudding]

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

[退会済みユーザー]

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