单击“提交”按钮时跳转到另一个页面并保存 Cookie

jump to another page when the submit button is click and save the cookies

本文关键字：另一个 Cookie 保存 提交 按钮 单击      更新时间：2023-09-26

伙计们，我是 JavaScript 的新手，我想制作一些网站来收集用户的信息，我现在拥有的是一些文本框，我希望人们单击提交按钮并转到另一个页面，所有数据都保存为 cookie。 但我想当我尝试跳转到另一个页面时我卡住了。我现在的代码如下：

<script type="text/JavaScript">
function submit()
 var fName = document.form[0].firstName.value;
 var lName = document.form[0].lastName.value;
 var addone = document.form[0].streetAddone.value;
 var addtwo = document.form[0].streetAddtwo.value;
 var city = document.form[0].city.value;
 var state = document.form[0].state.value;
 var zip = document.form[0].zip.value;
 var phone = document.form[0].phone.value;
 var fax = document.form[0].fax.value;
 var expireDate = new Date();
   myDate.setFullYear(myDate.getFullyear() + 1);
     document.cookie = "firstName" +encodeURIComponent(fName) + "; expires=" + expireDate.toUTCString();
     document.cookie = "lastName" +encodeURIComponent(lName) + "; expires=" + expireDate.toUTCString();
     document.cookie = "streetAddone" +encodeURIComponent(addone) + "; expires=" + expireDate.toUTCString();
     document.cookie = "streetAddtwo" +encodeURIComponent(addtwo) + "; expires=" + expireDate.toUTCString();
     document.cookie = "city" +encodeURIComponent(city) + "; expires=" + expireDate.toUTCString();
     document.cookie = "state" +encodeURIComponent(state) + "; expires=" + expireDate.toUTCString();
     document.cookie = "zip" +encodeURIComponent(zip) + "; expires=" + expireDate.toUTCString();
     document.cookie = "phone" +encodeURIComponent(phone) + "; expires=" + expireDate.toUTCString();
     document.cookie = "fax" +encodeURIComponent(fax) + "; expires=" + expireDate.toUTCString();
      location.href = "Record.html";

网页部分：

<form action="" method="get">

First Name:<input type="text" name="firstName">
Last Name:<input type="text" name="lastName"><br>
Street address 1:<input type="text" name="streetAddone"><br>
Street address 2:<input type="text" name="streetAddtwo"><br>

city:<input type="text" name="city">
State:<input type="text" name="state">
Zip:<input type="text" name="zip"><br>

Phone:<input type="text" name="phone"><br>
Fax:<input type="text" name="fax">

<input type="submit" name="carType" value="Submit Reservation" onclick="submitForm()"> </input>
</form>

我知道将页面名称添加到表单操作将起作用，但我想知道该位置是否有效？我怎样才能让它工作？

（PS：对不起，我的代码有点乱。

编辑：添加了更好的事件处理方法，在开始时使用 addEvent() 来帮助提高浏览器兼容性（如果您担心这一点）。

完全抛弃<form>

使用type="button"而不是type="submit"

您可以使用document.getElementsByName('name')[0].value选择<input>元素的值，然后当然获得带有id选择器的按钮 - document.getElementById('button-id') 。

您在代码中还有一些小错误/错别字/懒惰，由于这与您所做的事情发生了很大的变化，我继续查找/替换了您需要的东西，因为我是强迫症，但保留了不相关的东西不变。

为您准备的工作示例

法典： 

First Name:
<input type="text" name="firstName" />
Last Name:
<input type="text" name="lastName" />
<br>Street address 1:
<input type="text" name="streetAddone" />
<br>Street address 2:
<input type="text" name="streetAddtwo" />
<br>City:
<input type="text" name="city" />State:
<input type="text" name="state" />Zip:
<input type="text" name="zip" />
<br>Phone:
<input type="text" name="phone" />
<br>Fax:
<input type="text" name="fax" />
<input type="button" id="carType" value="Submit Reservation" />
<script type="text/javascript">
    function addEvent(element, myEvent, fnc) {
        return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
    };
    addEvent(document.getElementById('carType'), "click", function() {
        var fName = document.getElementsByName('firstName')[0].value;
        var lName = document.getElementsByName('lastName')[0].value;
        var addone = document.getElementsByName('streetAddone')[0].value;
        var addtwo = document.getElementsByName('streetAddtwo')[0].value;
        var city = document.getElementsByName('city')[0].value;
        var state = document.getElementsByName('state')[0].value;
        var zip = document.getElementsByName('zip')[0].value;
        var phone = document.getElementsByName('phone')[0].value;
        var fax = document.getElementsByName('fax')[0].value;
        var expireDate = new Date(Date.now());
        expireDate.setFullYear(expireDate.getFullYear() + 1);
        document.cookie = "firstName" + encodeURIComponent(fName) + "; expires=" + expireDate.toUTCString();
        document.cookie = "lastName" + encodeURIComponent(lName) + "; expires=" + expireDate.toUTCString();
        document.cookie = "streetAddone" + encodeURIComponent(addone) + "; expires=" + expireDate.toUTCString();
        document.cookie = "streetAddtwo" + encodeURIComponent(addtwo) + "; expires=" + expireDate.toUTCString();
        document.cookie = "city" + encodeURIComponent(city) + "; expires=" + expireDate.toUTCString();
        document.cookie = "state" + encodeURIComponent(state) + "; expires=" + expireDate.toUTCString();
        document.cookie = "zip" + encodeURIComponent(zip) + "; expires=" + expireDate.toUTCString();
        document.cookie = "phone" + encodeURIComponent(phone) + "; expires=" + expireDate.toUTCString();
        document.cookie = "fax" + encodeURIComponent(fax) + "; expires=" + expireDate.toUTCString();
        return window.location.href = "Record.html";
    });
</script>
相关文章：