###前提・実現したいこと
一般的なお問合せフォームを作成しようとしています。 <form>で、<input type="text">などで入力した文字を他のファイルで受け取り、表示させたいと思っています。
###発生している問題・エラーメッセージ
<form method="get">で、URLには送れていることは確認できているのですが、 それを表示させるのが、うまくできません どうかご助力をお願いします。
###該当のソースコード
送信側
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-Jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>お問い合わせ</title> <script type="text/javascript"> function jamp(){ var name = document.getElementById("name").value; var mail = document.getElementById("mail").value; var question = document.getElementById("question").value; if (name.length == 0) { alert("未入力の項目があります"); return false; } else { if (mail.length == 0) { alert("未入力の項目があります"); return false; } else { if (question.length == 0) { alert("未入力の項目があります"); return false; } else { var savename = name; var savemail = mail; var savequestion = question; sessionStorage.setItem("savename", savename); sessionStorage.setItem("savemail", savemail); sessionStorage.setItem("savequestion", savequestion); var target = document.getElementById("YATTA"); target.method = "get"; target.submit(); return true; } } } } function save(){ var name = document.getElementById("name"); var mail = document.getElementById("mail"); var question = document.getElementById("question"); savename = sessionStorage.getItem("savename"); savemail = sessionStorage.getItem("savemail"); savequestion = sessionStorage.getItem("savequestion"); name.innerHTML = savename; mail.innerHTML = savemail; question.innerHTML = savequestion; } </script> <style> .box1 { line-height:200%; background-color:#ffffff; border:solid #aaaaaa 2px; color:#000000; width:600px; padding:12px; font-size:16px; height:360px; } .box2{ float:left; width:130px; } form{ margin-bottom:-23px; } .text1{ margin:-3px 224px; } .text2{ width:100px; border:solid 2px #777777; float:left; margin:0px 10px 0px 10px; height:60px; background:#eeeeee; } .text5{ width:100px; border:solid 2px #777777; float:left; margin:0px 10px 0px 10px; height:115px; background:#eeeeee; } .red{ color:#ff0000; } hr{ margin:-2px 0px 0px 0px; } </style> </head> <body onLoad="save()"> <div class="box1"> <p class="text1">お問い合わせフォーム</p> <div class="box2"> <p class="text2">名前<br><span class="red">※必須</span></p> <p class="text2">性別</p> <p class="text2">メールアドレス<span class="red">※必須</span></p> <p class="text5">お問い合わせ内容<br><span class="red">※必須</span></p> </div> <form method="get" action="2.html" id="YATTA" name="YATTA"> <input type="text" name="name" id="name" size="50" style="margin-bottom:30px;margin-top:20px;" placeholder="名前を入力してください" value=""> <br> <input type="radio" name="man" style="margin-top:20px;"><span class="text3">男性</span> <input type="radio" name="man" style="margin-bottom:40px;"><span class="text4" >女性</span> <br> <input type="text" name="mail" id="mail" style="margin-bottom:26px;" placeholder="メールアドレス" value=""> <br> <textarea name="question" cols="40" rows="8" id="question" wrap="hard" value=""></textarea> <br> <input type="submit" value="確認画面へ" style="margin-left:240px;" onClick="return jamp(this.form)"><br> </form> </div> </body> </html>
受け取り側
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-Jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>お問い合わせ</title> <script type="text/javascript"> function jamp1(){ location.href = "1.html"; } function jamp3(){ location.href = "3.html"; } function save(){ document.form1.pram.value=name; } </script> <style> form { line-height:200%; background-color:#ffffff; border:solid #aaaaaa 2px; color:#000000; width:600px; padding:12px; font-size:12px; } .text1{ margin:-3px 250px 10px; } .text2{ margin:0px 0px; } .li1{ width:100px; border:solid 2px #777777; float:left; margin:0px 10px -3px 10px; height:50px; background:#eeeeee; } .li2, #victory{ width:400px; border:solid 2px #777777; float:left; margin:0px 10px -3px -12px; height:50px; } .li3{ width:100px; border:solid 3px; float:left; margin:0px 10px -3px 10px; height:50px; } .li4{ width:200px; border:solid 3px; float:left; margin:0px 10px -3px -12px; height:50px; } .li5{ width:100px; border:solid 3px; float:left; margin:0px 10px -3px 10px; height:50px; } .li6{ width:200px; border:solid 3px; float:left; margin:0px 10px -3px -12px; height:50px; } .li7{ width:100px; border:solid 2px #777777; float:left; margin:0px 10px -3px 10px; height:150px; background:#eeeeee; } .li8{ width:400px; border:solid 2px #777777; float:left; margin:0px 0px -3px -12px; max-height: 150px; height:150px; } </style> </head> <body onLoad="save()"> <form> <p class="text1">確認画面</p> <span class="li1">名前</span><div id="victory"> </div><br> <span class="li1">性別</span><span class="li2"> </span><br> <span class="li1">メールアドレス</span><span class="li2"></span><br> <span class="li7">お問い合わせ内容</span><span class="li8"></span><br> <br> <input type="button" value="修正" style="margin-left:220px;margin-top:10px;" onClick="jamp1()"> <input type="button" value="送信" style="margin-left:0px;margin-top:10px;" onClick="jamp3()"><br> </form> </body> </html>
###試したこと
以下のURLを参考にしました。
https://www.ipentec.com/document/document.aspx?page=javascript-submit-post-html-form
どのように解決したかを回答欄に追記いただけませんか?このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。
回答3件
あなたの回答
tips
プレビュー