Javascript表单变量

时间:2016-04-08 18:34:54

标签: javascript jquery html forms

我有一个用户填写的表单,我想在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>

3 个答案:

答案 0 :(得分:1)

只要两者在同一个域中,您就可以将数据设置为cookie并在下一页重新填充它们。

<强>第1页

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
});

2页

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sscce="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        sscce:fabSize="normal"
        android:src="@drawable/fab_drawable" />

</LinearLayout>

答案 1 :(得分:0)

使用服务存储您的价值或网络存储,例如localStorage pr sessionStorage,以保存您在page1.html上的表单中的值,并在form2.html上获取它们以使用

答案 2 :(得分:0)

您可以使用local storage保留值。例如,要将值写入存储:

localStorage.setItem('myValue', someVariable);

然后,在下一页上,获取该值:

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

当您完成存储中的值时,请务必将其删除:

localStorage.removeItem('myValue');