如何使用 cookie 来检测用户是否已经提交了表单？答案

【问题标题】：How to use a cookie to detect if the user has already submitted the form?如何使用 cookie 来检测用户是否已经提交了表单？
【发布时间】：2010-11-09 14:02:48
【问题描述】：

我不是在找人为我工作……我需要帮助/建议。

我需要：

修改表单页面，以便在 JavaScript 函数验证所有必填字段均已填写后，将 cookie 添加到用户的计算机中。如果同一用户再次尝试填写表单，用户将被引导到一个单独的 HTML 页面，告知他们他们已经提交了表单。

我做错了什么？

这是我的表格：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Request Form</title>


<meta name="Description" content="This webpage is for  Customer   Demographics" />
<meta name="Keywords" content="Rhonda , email, " />
<meta name="author" content="Rhonda " />
<meta name="copyright" content="Copyright 2010 Rhonda , All Rights Reserved"   />
<meta name="robots" content="all" />
<meta name="revisit-after" content="15 days" />
<meta name="rating" content="safe for kids" />

<script>

<!-- page to go to if cookie -->


go_to = "Submit.html";


num_days = -1;
function ged(noDays){
var today = new Date();
var expr = new Date(today.getTime() + noDays*24*60*60*1000);
return  expr.toGMTString();
}

function readCookie(cookieName){
var start = document.cookie.indexOf(cookieName);
if (start == -1){ 
    document.cookie = "seenit=yes; expires=" + ged(num_days);
} else {
    window.location = go_to;
}
}

readCookie("seenit");

</script>
<script type="text/javascript" >


function verify() {
var themessage = "You are required to complete the following fields: ";
if (document.form.first.value=="") {
themessage = themessage + " - First Name";
}
if (document.form.middle.value=="") {
themessage = themessage + " -  Middle Initial";
}
if (document.form.last.value=="") {
themessage = themessage + " -  Last Name";
}
if (document.form.street.value=="") {
themessage = themessage + " - Street";
}
if (document.form.city.value=="") {
themessage = themessage + " -  City";
}
if (document.form.state.value=="") {
themessage = themessage + " -  State";
}
if (document.form.zip.value=="") {
themessage = themessage + " -  Zip Code";
}
if (document.form.email.value=="") {
themessage = themessage + " -  E-mail";
}
if (document.form.areacode.value=="") {
themessage = themessage + " - Area Code";
}
if (document.form.telephone.value=="") {
themessage = themessage + " - Telephone";
}
if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return false;
}
} 

</script>   
</head>



<body>
<body style="background-color:lightsteelblue">


<h1>
    Welcome  customer.
    <br />
    <br />
    <br /> 
Please enter the following details in order
to be added to our preferred customer mailing list:
    <br />
    <br />
    <br />
</h1>
<!--This code builds the form -->

<form  name=form method="post" action="">

<!--Personal information: -->
<form action="">
<fieldset>
<legend>Personal Information:</legend>      

<br /><br />
First Name:<input type=text name="first" size="20"> <br /><br /><br />
Middle Initial:<input type=text name="middle" size="3"><br /><br /><br />
Last Name:<input type=text name="last" size="20"> <br /><br />
<br />
</fieldset>
<br /><br />

<form action="">
<fieldset>
<legend>Address:</legend>
<!--Address:  -->
Street: <input type=text name="street" size="30"><br /><br />
City: <input type=text name="city" size="30"><br/><br />
State:<input type=text name="state" size="2"><br/><br />
Zip Code: <input type=text  name="zip" size="7"><br /><br />
<br />
</fieldset>

<br /><br />
<!--Contact Information: -->
<form action="">
<fieldset>
<legend>Contact Information:</legend>       

Email Address:<input type=text name="email"  size="25" />

<br /><br />


Area Code:<input type=text name="areacode"  size="3" /><br /><br /> 
Telephone Number:<input type=text name="telephone"  size="7" /> 
<br />
<br />
</fieldset>

<br /><br /><br />

<!--NOTES 
This part was not mandantory. I was just trying some of the extra ways of adding     input that the book discussed-->       

<form action="">
<fieldset>
<legend>Extra Credit:</legend>

<p> 
Gender:
<br />
<input type="radio" name="sex" value="male" /> Male<br />
    <input type="radio" name="sex" value="female" /> Female
</p>        


<p>
How did you hear about us?
<br />
<input type="checkbox" name="Friend" value="Friend" /> From a friend
<br />
<input type="checkbox" name="Advertisement" value="Advertisement" />    Store   Advertisement
<br />
<input type="checkbox" name="Online" value="Online" /> From Online
<br />
<input type="checkbox" name="Other" value="Other" /> Other
<br />
</p>



<p>     
How do you wish to be contacted?
<br />
<form action="">
<select name="contact">
<option value="telephone">Telephone</option>
<option value="E-mail">E-mail</option>
<option value="Snail-mail">Snail-mail</option>
</select>
<br />
<br />
</fieldset>
</p>    


</form> 
<form action=""  onSubmit="return verify()" method="post">
<input type="submit" name="submit" value="Submit"> 
<input type=reset value="Clear Form"><br>
</form>

<!--Back to top -->
<p><a href="#top">Back to Top</a></p> 
</body>
</html>

【问题讨论】：

这是一道编程题。转到 StackOverflow。
@Tokk: "The homework tag, like other so-called 'meta' tags, is now discouraged," 但是，@rh0nda，请（一如既往）继续关注general guidelines，说明任何特殊限制，展示您迄今为止尝试过的内容，并询问具体内容让你感到困惑。

标签： javascript cookies

【解决方案1】：

首先要注意的是嵌套的<form> 标签不是合法的HTML。从第一个<input> 之前到提交按钮之后，您只需要一个表单标签来包装您要提交的所有内容。将您的 onSubmit 处理程序添加到该表单标记。

另外，你的第一个脚本标签：

A) 没有 type="text/javascript" 属性（如果您使用 XHTML，我相信这是必需的。）
B) 正在使用 HTML 注释  而不是 JavaScript 注释 // 或 /* */，这可能会引发错误并杀死它下面发生的所有事情。

修复这两个问题，如果仍然无法正常工作，请返回并编辑问题，添加有关您看到的错误的更多信息以及到目前为止您为修复这些错误所做的尝试。 :-)

【讨论】：