Javascript 表单变量答案

【问题标题】：Javascript Form VariablesJavascript 表单变量
【发布时间】：2018-11-08 17:00:16
【问题描述】：

我有一个用户要填写的表单，我想将这些答案提交给 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>

【问题讨论】：

您编写的 JavaScript 在哪里？请注意，变量不会将值带到下一页，但您可以将值存储在本地存储中，或者将它们包含在下一页的查询字符串中。
那么有没有办法在页面之间传递变量？
您可以像我描述的那样存储或提交值。但是，作为内存中概念的“变量”在该变量的生命周期范围之外将不可用。在每种编程语言中都是如此。
这只是原型所需要的，所以寿命短就可以@David
我不知道你的回复是什么意思。我很确定你也没有。

标签： javascript jquery html forms

【解决方案1】：

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

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

【讨论】：

感谢您的帮助。在编辑字段后，我复制了整个第 2 页。但是页面只是空白，是否需要显示警报等值？
是的，这就是我所说的“编辑字段”的意思。元素 id 是正确的，只是没有显示。我不认为这些元素正在显示
如果你有 Firefox，你可以在控制台的 cookie 选项卡中检查 cookie，我确定 chome 也有，但是 idk..
php 是最简单的方法。你在服务器上工作吗？
另外，我的答案使用了 jQuery，你已经标记了 jQuery，所以请确保你的页面中包含 jQuery，否则我的答案将不起作用。

【解决方案2】：

要么使用服务来存储您的值，要么使用诸如 localStorage pr sessionStorage 之类的网络存储来保存 page1.html 上表单中的值并在 form2.html 上获取它们以供使用

【讨论】：

是的。如果您提供您的示例 html 文件的 JS 代码，我们可能会使用网络存储来执行此操作
我没有JS，就是那个表格

【解决方案3】：

您可以使用local storage 保留值。例如，将值写入存储：

localStorage.setItem('myValue', someVariable);

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

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

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

localStorage.removeItem('myValue');

【讨论】：