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

时间:2014-12-03 00:11:19

标签: javascript

hye伙计们,我是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";

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:对不起我的代码有点乱......)

1 个答案:

答案 0 :(得分:0)

修改 如果您对此感到担心,请在开头添加一个更好的事件处理方法addEvent(),以帮助您实现浏览器兼容性。


完全抛弃<form>

使用type="button"代替type="submit"

您可以选择<input>元素&#39;使用document.getElementsByName('name')[0].value的值,然后获取带有ID选择器的按钮 - document.getElementById('button-id')

你在代码中还有一些小错误/错别字/懒惰,因为这是你所拥有的改变,我继续找到/替换你需要的东西,因为我是OCD但是将不相关的东西保持不变。

working example for you

<强>代码:

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>