プロが教えるわが家の防犯対策術!

下記のような感じで、

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

(1.2.とも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>

A 回答 (3件)

よくわかんないけど…



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

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

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

>1.2.とも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>

補足日時:2009/01/26 12:53
    • good
    • 0

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'>";)
と入れてみましたが駄目でした。

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

補足日時:2009/01/26 19:14
    • good
    • 0

ANo1です。


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

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

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

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

お礼日時:2009/01/30 18:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!