- ベストアンサー
送信フォーム確認画面を作成する方法
- チェックボックスで複数選択した項目のみ、送信後の確認画面に表示する方法について説明します。
- 選択した項目が1つもない場合はエラーメッセージを表示し、購入日が入力されていない場合もエラーメッセージを表示します。
- 確認画面では選択した項目と購入日を表示し、ユーザーに内容の確認を促します。OKボタンを押すことで処理を続行します。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
なんだかよくわかりませんが、チェックボックスでチェックされている値だけ取りたいという意味なのかしら。 全体像が不明なのでよくわかりませんが、ご提示のものがご質問以外の部分はちゃんと動作していると仮定してよいのであれば、雰囲気としてこんな感じでしょうか。 (全角空白は半角に) var elms = document.forms["Order"].elements; var names = [a_fn, b_fn, c_fn]; var i, e, str = ""; for(i=0; e=elms[names[i++]];) if(e.checked) str += (str?"\n":"") + e.value; if(!str) alert("チェックしてちょ"); else if((e=elms[d_fn].value)=="") alert("日付が欲しい"); else alert(str + "\n" + e);
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
こういうこと? <script> function SubmitCheck(f){ if(!f.elements["a_fn"].checked && !f.elements["b_fn"].checked && !f.elements["c_fn"].checked ){ alert("最低1つチェックして下さい"); return false; } if(f.elements["d_fn"].value == ""){ alert("購入日を入れてください"); return false; } var confirm_str = "下記の事項をご確認ください。\n" + "正しければ、OKを押してください。\n" + "--------------------------------\n" + "選択:\n" + (f.elements["a_fn"].checked?f.elements["a_fn"].value + "\n":"") + (f.elements["b_fn"].checked?f.elements["b_fn"].value + "\n":"") + (f.elements["c_fn"].checked?f.elements["c_fn"].value + "\n":"") + "購入日:" + f.elements["d_fn"].value + "\n\n" + "--------------------------------\n"; return confirm(confirm_str); } </script> <form onsubmit="return SubmitCheck(this);"> <div> <input type="checkbox" name="a_fn" value="a_val">a <input type="checkbox" name="b_fn" value="b_val">b <input type="checkbox" name="c_fn" value="c_val">c </div> <div> d:<input type="text" name="d_fn" > </div> <div> <input type="submit" name="go" > </div> </form>
お礼
回答有難う御座います。
補足
有難うございます。 下記のようにかえたら、うまくいかないのですが、どこかおかしいでしょうか、 <script> function SubmitCheck(f){ if(!f.elements["バナナ"].checked && !f.elements["リンゴ"].checked && !f.elements["みかん"].checked ){ alert("最低1つチェックして下さい"); return false; } if(f.elements["d_fn"].value == ""){ alert("購入日を入れてください"); return false; } var confirm_str = "下記の事項をご確認ください。\n" + "正しければ、OKを押してください。\n" + "--------------------------------\n" + "選択:\n" + (f.elements["購入"].checked?f.elements["バナナ"].value + "\n":"") + (f.elements["購入"].checked?f.elements["リンゴ"].value + "\n":"") + (f.elements["購入"].checked?f.elements["みかん"].value + "\n":"") + "購入日:" + f.elements["d_fn"].value + "\n\n" + "--------------------------------\n"; return confirm(confirm_str); } </script> <form onsubmit="return SubmitCheck(this);"> <div> <input type="checkbox" name="購入" value="バナナ">a <input type="checkbox" name="購入" value="リンゴ">b <input type="checkbox" name="購入" value="みかん">c </div> <div> d:<input type="text" name="d_fn" > </div> <div> <input type="submit" name="go" > </div> </form> 都合つきましたら、宜しくお願いします。
お礼
回答有難う御座います。