html 複数のformを作成して一つのボタンでそれぞれの遷移先に送信

Question

###前提・実現したいこと
複数のformを作成してそれぞれに異なるaction,targetを指定し、一つの送信ボタンで処理することは可能ですか？
またはどのようにするのですか？

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

###該当のソースコード

<--! top.html -->
<form action="../cgi-bin/a.cgi" target=right> ～ </form>

<--! 修正form action="../cgi-bin/a.cgi" target=left> ～ </form -->

<form action="../cgi-bin/b.cgi" target=left> ～ </form>

<input type="submit" value="送信">

#追記
top.html の構造は3つのframe(name = "top", "left", "right")で構成されています。

htmlから複数のcgiに飛んでその結果を指定したleft,rightに返したいです。

正しく言えてないかもしれないのですが、ニュアンスで読み取ってもらえれば
ありがたいです。

###補足情報(言語/FW/ツール等のバージョンなど)

cgi は Python3 で書きます。

www
├── cgi-bin
│ ├── a.cgi
│ └── b.cgi
└── html
└── top.html

Comments

[masaya_ohashi]

submitを押したら3つのフォームが全部送信される、ということですか？

[kei344]

結果の表示は必要なのでしょうか。

[1996dai]

すいません。inputの位置がおかしかったです。　そうです。submitで3つ送信したいです。

[1996dai]

@kei344　cgiで処理してその結果を表示したいです

[masaya_ohashi]

lef,rightに返したい、と言っていますがformは3つあり、2番めと3番目のフォームのtargetでleftがダブっていますので、どちらか一方しか表示されませんがそこはどうされますか？

[1996dai]

@masaya_ohashi 片方でおねがいします。また、ダブッったときのやり方とかはあるのでしょうか？？

[masaya_ohashi]

ないです。格納先を3つにするか、formの実行を2つに絞るしかないですね。

Answer 1

ボタンを押したときに全部のformを実行する、という要望でしたら以下のようになります。

<form action="../cgi-bin/a.cgi" target=right> ～ </form>
<form action="../cgi-bin/b.cgi" target=left> ～ </form>

<button id="submit">送信</button>

jQuery無しパターン

document.getElementById("submit").addEventListener((e) => {
  var forms = document.querySelectorAll("form");
  for(var index in forms) {
    forms[index].submit();
  }
});

---

jQueryパターン

$("#submit").on("click", (e) =>{
  $("form").trigger('submit');
});

Comments

[1996dai]

HTMLでだとその書き方で2つのcgiに飛ばせて結果もそれぞれに飛ばせるのですね。
ありがとうございました。