如何将表单数据传递到另一个页面

Question

I'm trying to pass the first name and cars names to the other page, and I tried everything but doesn't work for me once the user clicks on submit it's supposed to redirect to success.html page and show a message with their name and the cars they chose to test我试图将名字和汽车名称传递到另一个页面，我尝试了所有方法，但一旦用户点击提交，它就对我不起作用，它应该重定向到success.html 页面并显示带有他们名字的消息以及他们选择测试的汽车

this is page#1这是第 1 页

 h1 { text-align: center; color: #4A4A67; font-weight: bold; font-style: 'Amatic SC'; font-size: 55px; } h3 { font-size: 28px; } body { background-image: url("car.jpg"); text-align: center; border-style: inset; border-color: #8CA7B3; font-family: 'Amatic SC'; font-weight: bold; color: #6F6F9B; border-radius: 25px;} #fname:focus{ border-color: green; background-color: lightgreen} #Pnum:focus{ border-color: green; background-color: lightgreen} span { color:darkred; }

 <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'> <link rel="stylesheet" type="text/css" href="styles.css" media="screen"> <script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { document.getElementById("fname").style.borderColor = "red"; error1.textContent = "*Name must not be empty!" return false;} document.getElementById("fname").style.borderColor = ""; error1.textContent = "" var y = document.forms["myForm"]["Pnum"].value; if ( y == "" || isNaN(y) || (y.toString()).length>10 ){ document.getElementById("Pnum").style.borderColor = "red"; error2.textContent ="*Phone number invalid." return false;} document.getElementById("Pnum").style.borderColor = ""; error2.textContent = "" var radios = document.getElementsByName("Age"); var formValid = false; var i = 0; while ( !formValid && i < radios.length) { if (radios[i].checked) formValid = true; i++; } if (!formValid){ error3.textContent = "Must check at least one option!" return false;} error3.textContent = "" var checkbox = document.getElementsByName("cars"); var formValid = false; var i = 0, x = 0; while ( i < checkbox.length ) { if (checkbox[i].checked) { x++; formValid = true; } i++; } if (!formValid) error4.textContent = "must check at least 1 option!" if ( x > 3 ) { error4.textContent = "must check at most 3!" return false; } // Getting the value of your text input var fname = document.getElementById("fname").value; // Storing the value above into localStorage localStorage.setItem("fname", fname); return formValid; } </script> </head> <body> <h1>Car Test Request</h1> <h3>please fill in the form to make your car test request.</h3> <form name="myForm" onsubmit="return validateForm()" action="file:///C:/Users/s/Desktop/457/assignment%202/success.html" method="GET"> <label for="FirstName">please enter your name:</label> <input type="text" id="fname" name="fname" value=""><span id="error1"></span><br><br> <label for="PhoneNumber">please enter your phone number:</label> <input type="text" id="Pnum" name="Pnum" value=""><span id="error2"></span><br><br> How old are you? <span id="error3"></span><br> <input type="radio" name="Age" id="18-23">18-23<br> <input type="radio" name="Age" id="23-30">23-30<br> <input type="radio" name="Age" id="31-39">31-39<br> <input type="radio" name="Age" id="40+">40+<br><br> <h>choose the wanted car(s) for the test drive:</h> <span id="error4"></span><br> <input type="checkbox" id="cars" name="cars" value="Bentley"> <label for="cars">Bentley</label> <input type="checkbox" id="cars" name="cars" value="BMW"> <label for="cars">BMW</label> <input type="checkbox" id="cars" name="cars" value="Cadillac"> <label for="cars">Cadillac</label><br> <input type="checkbox" id="cars" name="cars" value="Dodge"> <label for="cars">Dodge</label> <input type="checkbox" id="cars" name="cars" value="Fiat"> <label for="cars">Fiat</label> <input type="checkbox" id="cars" name="cars" value="Ford"> <label for="cars">Ford</label><br> <input type="checkbox" id="cars" name="cars" value="Jaguar"> <label for="cars">Jaguar</label> <input type="checkbox" id="cars" name="cars" value="Mazda"> <label for="cars">Mazda</label><br><br><br><br><br><br><br><br> <input type="submit"> <input type="reset"> <br><br> </form> </body> </html>

this is page#2 (success.html)这是第 2 页（success.html）

 h1 { text-align: center; color: #4A4A67; font-weight: bold; font-style: 'Amatic SC'; font-size: 55px; } h3 { font-size: 28px; } body { background-image: url("car.jpg"); text-align: center; border-style: inset; border-color: #8CA7B3; font-family: 'Amatic SC'; font-weight: bold; color: #6F6F9B; border-radius: 25px;} #fname:focus{ border-color: green; background-color: lightgreen} #Pnum:focus{ border-color: green; background-color: lightgreen} span { color:darkred; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" media="screen"> <script> // var fname = document.forms["myForm"]["fname"].value; function init() { // Retrieving the text input's value which was stored into localStorage var fname = localStorage.getItem("fname"); } </script> </head> <body> <p> <span id='fname'></span>, thanks for your request! <br> we will call you soon to schedule a test drive for: <br> </p> <img src="bye.gif" alt="bye bye" width="200" height="200"> </body> </html>

Answer 1

而不是使用 method="GET" 尝试使用 method="POST" 和 action="second page URL" 中的正确 URL，以便您提交的数据将被发布到第二页。现在使用 localStorage.getItem( ) 方法来获取数据并使用 DOM 显示数据，例如 document.getElementId("").innerHTML = fname;

如何将表单数据传递到另一个页面

问题描述

1 个解决方案

解决方案1
0 2021-12-17 19:45:11

如何将表单数据传递到另一个页面

问题描述

1 个解决方案

解决方案1 0 2021-12-17 19:45:11

解决方案1
0 2021-12-17 19:45:11