如何使用cookie来检测用户是否已提交表单?

时间:2010-11-09 14:02:49

标签: javascript cookies

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

我需要:

  

修改表单页面,以便在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>

1 个答案:

答案 0 :(得分:2)

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

此外,您的第一个脚本标记:

A)没有type="text/javascript"属性(如果您使用的是XHTML,我认为这是必需的。)
B)正在使用HTML评论<!-- -->而不是JavaScript评论///* */,这可能会导致错误并杀死其下方发生的所有内容。

修复这两件事,如果它仍然不起作用,请回过头来编辑问题,添加有关您所看到的错误的更多信息以及您迄今为止尝试修复它们的内容。 : - )