onclickで複数のボタンで対応したCGIにデータを送りたいのですが。

質問

下記のような感じで、

１．画像追加ボタンを押すと別ページ(b.cgi）に飛んで登録が終わったらまたこちらに戻ってきて、登録が押されるとそのまま登録処理(a.cgi)になる。
２．画像追加がされていなくても登録が押されるとそのまま登録処理をする。

（１．２．ともform内の情報はhiddenですべて送ります。）
こんな動きをさせたいのですが、参考サイトなどをみてもこういう動作をしているところがなくて丸3日悩んでいます。

onclick=submit　の記述とJavascriptの書き方が問題だとは思うのですが煮詰まってしまいました。
皆様には初歩的な質問かもしれませんがどうぞよろしくお願いします。

<form method="post" enctype="multipart/form-data">

<input type="text" name="Title" value="" size="140">
<input type="text" name="Body1" value="" size="140" style="ime-mode: active;">

<input type="button" value="画像追加" onclick="submit(document.gazouform)">
<input type="button" value="登録" onclick="submit(document.tourokuform)">

<form action="a.cgi" method="post" enctype="multipart/form-data" id="tourokuform">

</form>
<form action="b.cgi" method="post" enctype="multipart/form-data" id="gazouform">

</form>

回答No.2

fujillin · ベストアンサー

ANo1です。

submit(document.gazouform)でid="gazouform"のformをsubmitしようとしているのであれば、
　onclick="document.forms['gazouform'].submit()"
などとしてあげればよろしいかと…
でもそれだけだと、データがセットされていないので、目論んでおられるようにはならないでしょう。そのフォーム内のhiddenタグに値をセットしてあげる必要があります。

なお、送る内容が同じTitleとBody1であるのなら、No.1でも書きましたが、action先を指定してsubmitするようにすれば、formは1つだけですみます。

ボタンのイベントで onclick="hoge(1)" などとしておいて、
function hoge(a){
var act=(a==1)?'a.cgi':'b.cgi';
var frm=document.getElementById('f1');
frm.action=act;
frm.submit();
}

さらには、同じ内容を扱うので、a.cgiとb.cgiに共通する部分が多そうなので、処理aと処理bをこなせるようにまとめておく案もありそう。
フォームにはhiddenの項目を追加しておいて、その値で処理の種類を制御してあげればよろしいかと。
<input type="hidden" name="syori" id="syori" value="">
に対して、
onClick="document.getElementById('syori').value='a';submit()"
みたいな感じ。

補足

ありがとうございました！
画像追加の方は思惑通りに動作してくれました！
また少し自分の説明不足というかすっかり忘れていたものがあるのですが
a.cgiのサブルーチンへhiddenでmodeとactionを渡すのを忘れておりました。
上記の自分の説明だとfujillin様の記述通りなのですが、act=(a==1)のときに一緒にhiddenを渡す方法はないでしょうか？
if(act==1){dcument.write("<input type='hidden' name='mode' value='touroku'>"+("<input type='hidden' name='action' value='tuika'>";)
と入れてみましたが駄目でした。

重ね重ね申し訳ありませんがここだけ教えてもらえませんでしょうか。

回答No.3

fujillin

ANo1です。
No2への補足質問の意味がよくわからないのですが、・・・

ANo1の最初の方法で行っているのなら、tourokuform、gazouformのformにあらかじめhiddenのinputタグを設定しておいて、DOMで入力用のformの入力値をコピーしてあげればよいでしょう。
その後で、そのformをsubmitすればよいかと。

もし、ANo2の2番目の方法をご利用ならば、入力用のformのidをｆ1（例示のコードの場合）としておけば、submitするだけでデータが送られるはずです。
（何度も繰り返しになりますが、この場合は、tourokuform、gazouform
　のformは不要になります。）

お礼

何度もありがとうございます！
Ｎｏ１の方法で目論見どおりの動作をさせることができました。
親切な解説など凄く助かりました。
本当にありがとうございました！

回答No.1

fujillin

よくわかんないけど…

最初のformタグの閉じタグがないので、正しく認識されない可能性があります。

2番目、3番目のformは何の目的であるのか不明。
actionがa.cgi、b.cgiとなっているところを見ると、こちらのformをsubmitしたいのかも知れませんが、送信する内容（input等）がないので、スクリプトでこちらにhiddenの項目を作成してsubmitしたいという質問なのでしょうか？

送信内容がどれなのか不明ですが、Title、Body1の内容を送りたいのなら、スクリプトでactionの先を書き換えてsubmitすればいいのでは？

＞１．２．ともform内の情報はhiddenですべて送ります
hiddenになっているものがありませんが、どれを指しているのでしょうか？

＞画像追加ボタンを押すと別ページ(b.cgi）に飛んで登録が終わったら
＞またこちらに戻ってきて、～
普通にsubmitすると、cgiからの出力の応答待ちになるけれど、そのcgiからのhtml出力はあるのでしょうか？
もしも送信するだけなら、Ajaxということになるのかな？（その辺の処理もないみたいだけど…）

補足

説明不足な質問で申し訳ありませんでした。
・こちらに記入するときに</form>を間違えて消していました。
・hiddenの記入がないと分かりませんね。失礼しました。

a.cgi，b.cgiともにHTMLの出力があって
b.cgiは画像を登録し終わったらこちらのフォームに飛ぶように作ってあります。
a.cgiは入力された情報を登録させるプログラムです。
b.cgiは画像一覧から画像を選んで添付させるというプログラムです。

ご指摘ありがとうございます。

訂正
<form method="post" enctype="multipart/form-data">

<input type="text" name="Title" value="" size="140">
<input type="text" name="Body1" value="" size="140" style="ime-mode: active;">

<input type="button" value="画像追加" onclick="submit(document.gazouform)">
<input type="button" value="登録" onclick="submit(document.tourokuform)">
</form>

<form action="a.cgi" method="post" enctype="multipart/form-data" id="tourokuform">
hiddenでフォームのTitleとBody1を送信
</form>
<form action="b.cgi" method="post" enctype="multipart/form-data" id="gazouform">
hiddenでフォームのTitleとBody1と追加された画像パスを送信
</form>