複数のformを一つのsubmitで同時に送信したい。

Question

前提・実現したいこと

railsを用いて、複数のformを一つのsubmitで同時に送信したい。

追加：
複数人の評価を別々に保存したいからです。
例えばAさんが、Bさん、Cさん、Dさんの評価をすることもあるし、
Bさんだけを評価することがあることを実現したいです。

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

”送信する”を押すと、iPhoneのみで以下のようなページに遷移してしまう。
なおiphone以外では正常に動作します。

エラーメッセージ

該当のソースコード

<% n=1 %>
  <% @evaluated.each do |member|%>
    <%= form_for @evaluation , html: {id: "form#{n}"} do |f| %>
      <%= f.hidden_field :game_id, value: @game.id %>
      <%= f.hidden_field :evaluator_id, value: current_member.id %>
      <%= f.hidden_field :evaluated_id, value: member.id %>
      <div class="card my-2">
      <div class="m-3">
        <h3><%= member.name %>さんへの評価</h3>
        <div class="star mt-2 mb-2"></div>
        <div class='form-team'>
          <%= f.text_field :comment, class:'contact-form text-white', placeholder: "コメント" %>
        </div>
      </div>
      </div>
    <% end %>
    <% n+=1 %>
  <% end %>

  <span id="count" style="display:none;"><%= @evaluated.count%></span>
  <div class="actions text-center mt-5">
    <input value="送信する" type="submit" id="send_evaluation" class="btn btn-lightblue">
    <input value="戻る" type="button" style="display:none;" id="back-button" class="btn btn-lightblue mb-3">
  </div>

var button = document.getElementById('send_evaluation');
var button2 = document.getElementById('back-button');
var n = document.getElementById('count').textContent;

button.onclick = function(){
  if(confirm("評価、コメントに間違いはありませんか？")){
    this.style.display = "none";
    button2.style.display ="inline";
    for(var i=1; i<=n; i++){
      (function(param) {
        setTimeout(function(){
          var form = document.getElementById("form"+ param);
          form.submit();}, 300*param);
      });
    };
  }
};

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

この画面遷移の問題の解決法または、
form複数個を同時に送信する方法をご教授いただければと思います。
どうぞよろしくお願いいたします。

Comments

[m.ts10806]

そもそもですが、なぜフォームをわけるのでしょうか。前提・背景を具体的に記載してください。

[nonnonno]

追記しました。

Answer 1

複数のフォームを同時送信するということは

• いくつも処理が枝分かれする
• バックグラウンドで処理する

のどちらかだと思います。
前者は最初のサブミットが発生した時点で次の処理が走りません。
対応策としてはtargetを設定して自分自身以外にサブミットすることですが
複数の飛び先への処理はポップアップブロックの対象になるかもしれません
一つ送っては閉じる、別のものを送るみたいな処理ならできるかもしれません

後者の場合、ajaxで処理することになります
ajaxの場合飛び先がクロスドメインには対応しないケースが多いので注意ください

Comments

[nonnonno]

setTimeoutでformを順番に送信しているのですが、この方法であると問題がありますか？一応動作はします。

[m.ts10806]

私もAjaxで処理した方が良いと思います。

[yambejp]

折衷案として送り先が5個あったとき、4個はajaxで送った後、最後の１個だけサブミットするとか
やりようはあるかと

Answer 2

fields_forを用いて配列で処理しました。