フォームで入力項目を全て別の確認画面に出したい

このQ&Aのポイント
  • JavaScriptでフォームを作成しています。入力項目を別の確認画面に出したいのですが組み合わせている内に、わからなくなってしまいました。どうかお助けください。(>_<) チェックボックスの所は、3つ以上チェックできないようにしてあります。
  • フォームで入力項目を別の確認画面に表示させる方法を教えてください。JavaScriptを使用していますが、組み合わせが複雑でわかりにくくなってしまっています。チェックボックスの選択制限も設定しています。
  • フォームで入力した項目を別の確認画面で表示したいです。JavaScriptを使ってフォームを作成していますが、どう組み合わせていいかわかりません。また、チェックボックスでは3つ以上の選択ができないように設定しています。お助けください。
回答を見る
  • ベストアンサー

フォームで入力項目を全て別の確認画面に出したい

JavaScriptでフォームを作成しています。 入力項目を別の確認画面に出したいのですが 組み合わせている内に、わからなくなってしまいました。どうかお助けください。(>_<) チェックボックスの所は、3つ以上チェックできないようにしてあります。 1.別ウィンドウ確認画面が出て確認する 2.OKならメールアドレスに送信&ありがとうございましたページへ(確認画面は閉じる) のようにしたいのですが、よろしくお願い致します。m(_ _)m ※尚、初心者の為何か失礼があったらすみません。 スクリプトでは足りない個所があるので、htmlを載せさせて頂きました。 ************************************************ <form name="myFORM" onClick="return check()"> <table> <tr><td> <table> <tr> <td> <input type="radio" name="plan" value="A"> A.</font></strong></div> </td> </tr> </table> <br> <table> <tr> <td> <input type="radio" name="plan" value="B"> B. </td> </tr> </table> <br> <table> <tr> <td>あ</td> <td> <input name="CB1" type="checkbox" id="CB12" value="あ"> </td> </tr> </table> チェックボックス全10項目中チェック3つまで<br> <br> *印は必須項目です<br> <table> <tr> <td>申込み内容</td> </tr> <tr> <td>会社名*</td> <td><input type="text" name="jimusho_name" size="30"></td> </tr> </table> テキストフォーム全9項目<br> <p>&nbsp; <input name="button" type="button" onClick="outdata();" value="送 信"> <input name="reset" type="reset" value="キャンセル">

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

#1です。 私の方では動いているので、念のため呼出元のソースを。提示されているものとほとんど同じだと思いますが。 前に記した確認画面のソースと以下のソースをコピって貼り付ければ、そのままで動くと思いますが。 ファイルを2つとも同じ階層に置いてください。 <script language="JavaScript"> <!-- function outdata(){ window.open('decideWindow.html','decideWindow','width=300,height=300,status=yes'); } // --> </script> <form name="myFORM"> <table> <tr><td> <table> <tr> <td> <input type="radio" name="plan" value="A"> A.</font></strong></div> </td> </tr> </table> <br> <table> <tr> <td> <input type="radio" name="plan" value="B"> B. </td> </tr> </table> <br> <table> <tr> <td>あ</td> <td> <input name="CB1" type="checkbox" id="CB12" value="あ"> </td> </tr> </table> チェックボックス全10項目中チェック3つまで<br> <br> *印は必須項目です<br> <table> <tr> <td>申込み内容</td> </tr> <tr> <td>会社名*</td> <td><input type="text" name="jimusho_name" size="30"></td> </tr> </table> テキストフォーム全9項目<br> <p>&nbsp; <input name="button" type="button" onClick="outdata();" value="送 信"> <input name="reset" type="reset" value="キャンセル">

SONATA_ARCTICA
質問者

お礼

お礼すごく遅くなってしまってすみません。 迅速、丁寧でとても助かりました! 本当にありがとうございました!

その他の回答 (1)

回答No.1

こんな感じでどうですか? function outdata(){ window.open('decideWindow.html','decideWindow','width=300,height=300,status=yes'); } ----- 確認画面のソース <html> <head> <title>確認画面</title> <script language="JavaScript"> <!-- function init(){ for(i=0;i<window.opener.document.myFORM.plan.length;i++){ if(window.opener.document.myFORM.plan[i].checked == true){ document.all.plan.innerText = window.opener.document.myFORM.plan[i].value; } } if(window.opener.document.myFORM.CB12.checked == true){ document.all.CB12.innerText = window.opener.document.myFORM.CB12.value; } document.all.jimusho_name.innerText = window.opener.document.myFORM.jimusho_name.value; } // --> </script> </head> <body onLoad="init()"> <form name="form1"> 確認 <div id="plan"></div> <div id="CB12"></div> <div id="jimusho_name"></div> </form> </body> </html> OKの場合は親に処理の関数書いてopenerで親の関数を呼ぶか確認画面に関数を書くかすれば良いと思います。

SONATA_ARCTICA
質問者

補足

回答ありがとうございます! 色々テストしてみたんですけれど、 function init(){ for(i=0;i<window.opener.document.myFORM.plan.length;i++){ のところで、 window.opener.document.はNullまたはオブジェクトではありません。 と、エラーが出てしまいます。 その他、チェックボックスの所には、下記スクリプトを追加しています。 function check(n) { count = 0; for (i=1; i<=10; i++) if (document.myFORM.elements["CB"+i].checked) count++; if (count > 3) { alert("3個以上チェックできません"); document.myFORM.elements["CB"+n].checked = false; } }

関連するQ&A

  • フォームの確認画面がうまく表示されません

    フォームで氏名を入力して確認画面を出したいのですが、 確認画面で、名前が出ずにソースがそのまま表示されます。 どうしてもわからないので、どなたかよろしくお願いします。 <script LANGUAGE="JavaScript"> <!--// function check(){ document.open(); document.writeln('<html>\n<head>'); document.writeln('<title>送信内容確認</title>'); document.writeln('</head>\n<body>\n<table>'); document.write('<tr>\n<td>名前:</td>\n<td>'); document.write('+document.kakunin.NAME.value+'); document.writeln('</td>\n</tr>\n</table>'); document.writeln('</body>\n</html>'); document.close(); } //--> </script> </head> <body> <form NAME="kakunin" action="mailto:aaa@hotmail.com" method="POST" enctype="text/plain"> 名前<input type="text" name="NAME"><br><br> <input type="button" value=" 確認 " onClick="check()"> </body>

  • フォームで確認画面を表示させるにはどうすればいいのでしょうか?

    質問をご覧下さりありがとうございます。 <form action="18add.php" method="POST" name="form1"> <table> <tr> <th>番号(半角数字)</th> <td><input type="text" name="number" value=""></td> </tr> <tr> <th>名前</th> <td><input type="text" name="name" value=""></td> </tr> <tr> <td><input type="hidden" name="mode" value="add"></td> <td><input type="submit" name="submit" value="追加"></td> </tr> </table> </form> htmlでこんなフォームを作り、phpで $table_body = ""; if( isset( $_POST['mode'] ) ){ $mode = $_POST['mode']; $number = $_POST['number']; $name =$_POST['name']; } else{ $mode = ""; $number = ""; $name = ""; } if( $mode == "add" ){ $table_body .= "<tr>"; $table_body .= "<td>"; $table_body .= $number; $table_body .= "</td>"; $table_body .= "<td>"; $table_body .= mb_convert_encoding( $name, "SJIS", "EUC-JP" ); $table_body .= "</td>"; $table_body .= "</tr>"; } で一度入力された情報を確認する画面を作りたいのですが うまくいきません。 初心者なのでわかりやすく説明をつけてくださると大変助かります。

    • 締切済み
    • PHP
  • チェックボックスの全選択/解除について

    お尋ねします。 チェックボックスの全選択/解除について 1画面にチェックボックスのグループが複数(store、item)あります。 下記のソースだと【store】の全選択を押下すると【store】【item】両方とも 全選択状態になります。 【store】の全選択/全解除は【store】のみ 【item】の全選択/全解除は【item】のみにしたいのですが どのようにするとよろしいのでしょうか? よろしくお願いします。 <SCRIPT TYPE="text/javascript"> <!-- function allcheck(targetForm,flag){  for(n=0;n<=targetForm.length-1;n++){   if(targetForm.elements[n].type == "checkbox"){    targetForm.elements[n].checked = flag;   }  } } --> </SCRIPT> <table width="70%" align = "center" cellspacing="0"> <form action="confirm.php" method="post" target="_blank"> <tr> <td align="center"> <input type="checkbox" name="store[]" value="1" />A店<br/> <input type="checkbox" name="store[]" value="2" />B店<br/> <input type="checkbox" name="store[]" value="3" />C店<br/> <input type="checkbox" name="store[]" value="4" />D店<br/> <input type="checkbox" name="store[]" value="5" />E店<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> <td align="center"> <input type="checkbox" name="item[]" value="1" />項目1<br/> <input type="checkbox" name="item[]" value="2" />項目2<br/> <input type="checkbox" name="item[]" value="3" />項目3<br/> <input type="checkbox" name="item[]" value="4" />項目4<br/> <input type="checkbox" name="item[]" value="5" />項目5<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> </tr> <tr align="center"> <td colspan="4"> <input type="submit" name="con" value="確認"> </td> </tr> </form> </table>

    • 締切済み
    • PHP
  • 電卓をつくったのですが

    <script type="text/javascript"> <!-- var to=0; var inp=""; var cal="+"; var flg=1; function df(a){ flg=0; inp+=a; document.ad1.z.value= inp; } function df1(a){ if(flg==0){ flg=1; var don=to+cal+inp; to=eval(don); inp=""; document.ad1.z.value=to; } if(a=="="){ to=0; cal="+"; }else{ cal=a; } } function df3(){ to=0; cal="+"; inp=""; document.ad1.z.value=to; } --> </script> </head> <body> <div id="s1"> <div id="s2"> <form name="ad1"> <table> <tr><td colspan="4">電卓</td></tr> <tr><td colspan="3"><input type="text" size="12px" name="z" value="0"></td> <tr> <td><input type="button" name="ad7" value="7" onClick="df(7)"></td> <td><input type="button" name="ad8" value="8" onClick="df(8)"></td> <td><input type="button" name="ad9" value="9" onClick="df(9)"></td> </tr> <tr> <td><input type="button" name="ad6" value="6" onClick="df(6)"></td> <td><input type="button" name="ad5" value="5" onClick="df(5)"></td> <td><input type="button" name="ad4" value="4" onClick="df(4)"></td> </tr> <tr> <td><input type="button" name="ad3" value="3" onClick="df(3)"></td> <td><input type="button" name="ad2" value="2" onClick="df(2)"></td> <td><input type="button" name="ad11" value="1" onClick="df(1)"></td> </tr> <tr> <td><input type="button" name="add1" value="+" onClick="df1(+)"></td> <td><input type="button" name="add2" value="-" onClick="df1(-)"></td> <td><input type="button" name="add3" value="×" onClick="df1(*)"></td> </tr> <tr> <td><input type="button" name="add4" value="÷" onClick="df1(/)"></td> <td><input type="button" name="add5" value="=" onClick="df1(=)"></td> <td><input type="button" name="add6" value="." onClick="df1(.)"></td> <td><input type="button" name="add7" value="c" onClick="df3()"></td> </tr> </table> </form> </div> </div> </body> </html> クリアーは上手くいったんですが 計算ができませんでした。 どこがいけないのでしょうか?

  • 【フォーム】PHPで確認画面をだした後にボタンを

    ほぼ初心者のものです 下記のようなフォームをつくりました <form action="regist.php" method="post"> <input type="radio" name="08241" value="A11"/> <input type="radio" name="08241" value="B11"/> <input type="radio" name="08241" value="C11"/> <input type="radio" name="08241" value="D11"/> <input type="radio" name="08241" value="E11"/> <input type="radio" name="08241" value="F11"/> <input type="submit" value="登録する" /> そしてこれらを確認するためにregist.phpを作成し <table width="250" border="1"> <tr> <td width="250">選択したもの</td> </tr> <tr> <td><?php echo $_POST["08241"] ?></td> </tr> <tr> <td>●●●</td> と記載し、選んだものを表示できるようにしました ここからが皆様にお力を借りたいところなのですが フォームから「A11」が選択されて確認画面に「A11」と表示されたとき ●●●のところに下記のような情報を含んだボタンを表示させたいんです <form name="a11" action="/products/detail.php" method="post" > <input type="hidden" name="mode" value="cart" /> <input type="hidden" name="product_id" value="137" /> <input type="hidden" name="product_class_id" value="634" /> <input type="hidden" name="quantity" value="1" /><br /> <input type="submit" value="決定する" onClick="alert('選択しました')" /> </form> このボタン情報はA11~F11まであって、product_idやproduct_class_idは それぞれ異なっています どこかに一覧を作成しておいて form nameで一致したものを表示させるといった やり方なのかなとは思うのですが、その方法がわかりません PHPを使えばいいのかJavascriptがよいのかもあわせ、記述方法などをご教授いただけませんでしょうか? どうかよろしくお願いいたします

    • 締切済み
    • PHP
  • domでの削除

    チェックボックスを使ってループで回しながらTRを削除しようとしているんですが、連続でチェックするとうまくいきません。 ご教授宜しくお願いします。 function test() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "checkbox" && inputs[i].checked) { tb1.deleteRow(i); } } }; <table border="1" id="tb1"> <tr> <td><input type="checkbox" name="flag" value=""></td> <td>0</td> </tr>      ・      ・      ・ <tr> <td><input type="checkbox" name="flag" value=""></td> <td>9</td> </tr> </table> <input type="button" value="削除" onclick="test();"><br> }

  • テーブル内のチェックボックスを、全て選択、全て解除 したい

    以下のような、フォームの中にあるテーブル内のチェックボックスを一括して選択、解除したいのですが、どのように書けば良いのかが分かりません。 <form name="form1"> <table> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="1">項目(1)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="2">項目(2)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="3">項目(3)</td> </tr> </table> </form> ↓これは自分で試したプログラムですが、うまく動きませんでした。 <SCRIPT TYPE="text/javascript"> <!-- var count; function BoxChecked(check){ for(count = 0; count < document.form1.array[].length; count++){ document.form1.array[][count].checked = check; } } //--> </SCRIPT> <INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="全て選択"> <INPUT TYPE="button" onClick="BoxChecked(false);" VALUE="全て未選択"> ↓ここに載っているのを色々変更してみたのですが上手くいきませんでした。 http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_072.html よろしくお願いします。

  • フォームを必須項目にしたい

    *印を必須項目にしたいです。 どうすればいいですか? <form action="mailto:***@***.co.jp" method="POST" enctype="text/plain" name="signup" onSubmit="return validateForm(this,arrFormValidation);"> <table cellspacing="2" cellpadding="2" border="0" class="body" width="601"> <tr> <td align="left" width="120" valign="top" bgcolor="#D5CED1" title="全角"><font color="#A4003A">*<font color="#320012">名字 :</font></font></td> <td valign="top" width="463"><input type="text" name="名字" size="20"></td> </tr> <tr> <td align="left" width="120" valign="top" bgcolor="#D5CED1" title="任意に入力してください。"><font color="#320012"> 電話番号 :</font></td> <td valign="top" width="463"><input type="text" name="電話番号" size="20"></td> </tr> <tr> <td align="left" width="120" valign="top" bgcolor="#D5CED1"><font color="#A4003A">*<font color="#320012"></font></font><font color="#320012">アンケート</font></td> <td valign="top" width="463"> 項目1  <input type="radio" value="1" name="項目1">1  <input type="radio" value="2" name="項目1">2<br> 項目2  <input type="radio" value="1" name="項目2">1  <input type="radio" value="2" name="項目2">2 </td> </tr> <tr> <td align="left" width="120" valign="top" bgcolor="#D5CED1"><font color="#320012"> 送信 :</font></td> <td width="463"> <input type="submit" name="B1" value="送信" style="background:#5C5868;color:#E4FF00;" title="送信を開始する祢。"></td> </tr> </table> </form>

  • .NETを使用せずに、ASP・VBScriptで前のレコードボタン環境:(WinXP_pro、IIS、ACCESS)

    お世話になってます。 前頁で検索した後、ACCESSのデータベースに接続し次のレコードまたは前のレコードを表示するボタンを設けたい <%@ Language="VBScript" %> <% pickup = Request.Form("uID") 'MS Access Database Filename MSACFN = Server.MapPath("db名.mdb") 'Data Source Name DBFile="Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & MSACFN 'Data Output Set DBCon = Server.CreateObject("ADODB.Connection") DBCon.Open DBFile sql="select * from table名 where uID = '"&pickup&"'" Set DBexe = DBCon.Execute(sql) %> <HTML> <BODY> <title>データ変更</title> <form method="POST" action="接続先.asp"> <table width="519" border="0"> <tr><td width="200">ID </td><td width="280"><%= DBexe("uID") %> </td></tr> <tr><td>氏名 </td><td><input type="text" size="70" name="NAME" value="<%= DBexe("NAME")%>"></td></tr> <tr><td> </td> <td align="right"> <input type="submit" value="登録" onClick='return checkForm()'> <input type="reset" value="リセット"></td></tr><br> </table> <INPUT TYPE="button" name="movefirst" onClick="ShowPrev()" value="先頭のレコード"> <INPUT TYPE="button" name="moveprevios" onClick="ShowPrev()" value="前のレコード"> <input TYPE="button" name="movenext" onClick="ShowNext()" value="次のレコード"> <input TYPE="button" name="movelast" onClick="ShowNext()" value="最終のレコード"> </form> <input name="uID" type="hidden" id="uID" value="go"><br> <input type="hidden" name="form" value="go"> <br> </body> </html>

  • テンキーで「0.1」を打つと「.1」になる

    HTMLページにテンキーを打つと数字が出るといったものをしたくて、検索しましたところ、参考サイトを見つけました。 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13197413368 「.」を追加したソースが下記になります。 「0.1」とテンキーを打つと「.1」になってしまいます。「0.1」になる方法を教えて下さいますか? 宜しくお願いします。 <style type="text/css">table { border: 0px; margin: 0 auto; border-collapse: collapse; } div#cc { text-align: center; } input { font-size: 12px; margin: 0; padding: 0; } input.key { width: 32px; font-family: monospace; font-size: 12px; } </style> </head> <body> <div id="cc"> <form name="myForm" action="#"> <input name="tx1" size=24 tabindex=1 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx2" size=24 tabindex=2 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx3" size=24 tabindex=3 maxlength=20 value="" onClick="selecttext(this)"><br> <hr> <table> <tr> <td><input type="button" class="key" value="7" onClick="keyEvent('7')"></td> <td><input type="button" class="key" value="8" onClick="keyEvent('8')"></td> <td><input type="button" class="key" value="9" onClick="keyEvent('9')"></td> </tr> <tr> <td><input type="button" class="key" value="4" onClick="keyEvent('4')"></td> <td><input type="button" class="key" value="5" onClick="keyEvent('5')"></td> <td><input type="button" class="key" value="6" onClick="keyEvent('6')"></td> </tr> <tr> <td><input type="button" class="key" value="1" onClick="keyEvent('1')"></td> <td><input type="button" class="key" value="2" onClick="keyEvent('2')"></td> <td><input type="button" class="key" value="3" onClick="keyEvent('3')"></td> </tr> <tr> <td><input type="button" class="key" value="0" onClick="keyEvent('0')"></td> <td><input type="button" class="key" value="." onClick="keyEvent('.')"></td> <td><input type="button" class="key" value="←" onclick="oneClear()"></td> <td><input type="button" class="key" value="CA" onclick="allClear()"></td> </tr> </table> </form> </div> <script type="text/javascript"> var t; selecttext(document.myForm.tx1); function selecttext(o) { t = o; } function keyEvent(c) { t.value = (t.value=='0')? c: t.value+c; } function allClear() { t.value = ''; } function oneClear() { t.value = t.value.substring(0,t.value.length-1); } </script> </body>

専門家に質問してみよう