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

问题描述

我正在尝试将名字和汽车名称传递到另一个页面，并且我尝试了所有方法，但是一旦用户单击提交它就对我不起作用，它应该重定向到 success.html 页面并显示一条带有他们名字的消息以及他们选择测试的汽车

这是第 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>

这是第 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>

标签： javascripthtmlcssforms

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

问题描述

解决方案

推荐阅读