Javascript窗体变量

Question

我是初学者，当涉及到JavaScript时，对我一无所知。我有一个用户填写的表单，我想将这些答案提交给javascript中的变量，然后调用一个函数来显示在不同页面上输入表单的所有数据。例如，表单在1.html上，用户按下提交按钮，重定向到2.html，提交的信息显示在这里。这里是我的形式：

<form action="addaddresspage3.html" method="post" id="form" class="form"> 
    <div id="form1"> 

    <div class="row form-row form-bg"> 
     <div class="container"> 
      <div class="col-md-12 form-wrapper"> 
       <form role="form"> 
        <div class="form-content"> 
         <legend class="hd-default">Billing Address</legend> 


         <div class="row"> 
          <div class="form-group col-md-4 col-sm-6"> 
           <label for="first-name">First Name(s)*:</label> 
           <input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required=""> 
          </div> 
         </div> 

         <div class="row"> 
          <div class="form-group col-md-4 col-sm-6"> 
           <label for="password">Surname*:</label> 
           <input type="text" id="surname" class="form-control" placeholder="Surname" required=""> 
          </div> 
         </div> 

         <div class="col-md-12"> 
          <div class="row"> 
           <div class="form-group col-md-3 col-sm-3"> 
            <label>Country of Home Address</label> 
            <select name="title" id="addresslist" class="form-control"> 
             <option value="1">Select Address</option> 
             <option value="1">United Kingdom</option> 
             <option value="2">Saudi Arabia</option> 
             <option value="3">Iran</option> 
             <option value="4">Nigeria</option> 
            </select> 

           </div> 
          </div> 
          <div class="row"> 
           <div class="form-group col-md-4 col-sm-6"> 


           <label for="street_<cfoutput>#Add#</cfoutput>">House number and street:</label> 
            <input type="text" name="street_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="autocomplete" size="54" maxlength="120" message="Please enter owner #Peoplecount#'s mailing address." onFocus="geolocate()" placeholder="Please enter your house number and street"> 


            <p> 

             <label for="city_<cfoutput>#Add#</cfoutput>">Town:</label> 
             <input type="text" name="city_#Add#" validateat="onSubmit" validate="maxlength" required="yes" id="locality" size="30" maxlength="50" message="Please enter owner #Peoplecount#'s mailing city." value="">  

            </p> 

            <label for="street_<cfoutput>#Add#</cfoutput>">Postcode:</label> 
            <input type="text" name="postal_#Add#" required="yes" id="postal_code" size="8" maxlength="12" message="Please enter owner #Peoplecount#'s mailing zip code." value=""> 
           </div> 
         </div> 
       </div> 
    </div> 

    </div> 
    <input type="submit" id="continue" disabled="disabled" value="Add Address"/> 
    </div> 

Answer 1

或者使用服务来存储你的价值或网络存储喜欢的localStorage PR的sessionStorage你值从page1.html形式保存和获取他们form2.html使用

Answer 2

只要两个在同一个域，你可以将数据集饼干和重新填充他们的下一个页面上..

第1页

function setCookie(name, value) { 
    var cookie = name + "=" + escape(value) + ";"; 
    document.cookie = cookie; 
} 

$("#form1").submit(function(){ 
    setCookie("input1", $("#input1").val()); // do this for all inputs 
}); 

第2页

function getCookie(name) { 
    var chunks = document.cookie.split(";"); 
    for(var i=chunks.length; i--;){ 
     if(chunks[i].trim().split("=")[0].trim() == name){ 
      return chunks[i].trim().split("=")[1].trim(); 
     } 
    } 
    return null; 
} 

$(document).ready(function(){ 
    $("#input1").val(getCookie("iunput1")); // do the same for the other inputs 
}); 

Answer 3

可以使用local storage坚持价值。例如，写一个值来存储：

localStorage.setItem('myValue', someVariable); 

然后，在下一个页面上，获取该值：

var someVariable = localStorage.getItem('myValue'); 

而且当你与存储的值来完成，一定要删除它：

localStorage.removeItem('myValue');