下記のような感じで、
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>
No.1
- 回答日時:
よくわかんないけど…
最初の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>
No.2ベストアンサー
- 回答日時:
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
- 回答日時:
ANo1です。
No2への補足質問の意味がよくわからないのですが、・・・
ANo1の最初の方法で行っているのなら、tourokuform、gazouformのformにあらかじめhiddenのinputタグを設定しておいて、DOMで入力用のformの入力値をコピーしてあげればよいでしょう。
その後で、そのformをsubmitすればよいかと。
もし、ANo2の2番目の方法をご利用ならば、入力用のformのidをf1(例示のコードの場合)としておけば、submitするだけでデータが送られるはずです。
(何度も繰り返しになりますが、この場合は、tourokuform、gazouform
のformは不要になります。)
何度もありがとうございます!
No1の方法で目論見どおりの動作をさせることができました。
親切な解説など凄く助かりました。
本当にありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- CGI htmlからパラメータで、cgiに渡したい。 1 2023/02/06 16:15
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
confirmのOK・キャンセルを押し...
-
<form action="#">の意味とは?
-
フォーム内で記入したクエリ送...
-
confirm()で表示したダイアログ...
-
jQueryで特定のチェックボック...
-
メッセージボックスで「はい」...
-
Javascriptで二重送信を防止し...
-
トグルボタンの文字色
-
HTAで、こんなボタンが作りたい。
-
onClick="this.form.submit
-
onclickイベントでの二重送信防...
-
【掲示板の機能】投稿時にサイ...
-
イントラマート
-
disabled プロパティが表示され...
-
submitするとなぜか2度実行する
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
submitボタン押下時にPOSTされ...
-
onchangeイベントを強制的に発...
-
大文字か小文字かを判断する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VBSでブラウザ上のテキストボッ...
-
submitするとなぜか2度実行する
-
onclickで2個指定するには?
-
confirmのOK・キャンセルを押し...
-
ボタン2回押しを無効にしたい
-
フォーム内で記入したクエリ送...
-
onClick="this.form.submit
-
JavaScriptにおいてPOSTで送信...
-
disabled プロパティが表示され...
-
確認ダイアログの出し方(JavaS...
-
onclickをEnterキーでも行いたい
-
jsで質問です。 ボタンが二つ存...
-
ボタン無しでフォーム内容送信
-
confirm()で表示したダイアログ...
-
ボタンを押すとチェックボック...
-
javascriptで二重送信防止
-
VBScript
-
メールフォーム:「必須項目」...
-
Javascriptで二重送信を防止し...
-
ホームページビルダーでメール...
おすすめ情報