使用Cookie或localstorage跨页

时间:2016-07-10 00:57:14

标签: javascript html cookies

我的应用中有3个页面有一组问题。每个页面大约有6个问题,用户需要回答这些问题,然后单击下一步。现在,当用户点击上一个时,他们应该能够在字段中看到键入的数据。我在我的代码中使用了cookie的概念,并根据此链接中的示例代码编写了getcookies和setcookies函数, http://www.the-art-of-web.com/javascript/setcookie/

这是我的代码,

 <script>
            // Original JavaScript code by Chirp Internet: www.chirp.com.au
            // Please acknowledge use of this code by including this header.

             var today = new Date();
             var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days

             function setCookie(name, value)
  {
    document.cookie=name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString();
  }
  function storeValues(form)  
  {
    setCookie("1.Your GPA from previous degree", form.field1.value);
    setCookie("2.Your GRE/GMAT score", form.field2.value);
    setCookie("2.Your GRE/GMAT score", form.field3.value);
    setCookie("3.Your TOEFL/IELTS score", form.field4.value);
    setCookie("3.Your TOEFL/IELTS score", form.field5.value);
    setCookie("4.Number of backlogs from your previous degree", form.field6.value);
    return true;
  }
  function getCookie(name)
  {
    var re = new RegExp(name + "=([^;]+)");
    var value = re.exec(document.cookie);
    return (value != null) ? unescape(value[1]) : null;
  }

</script>

` 在上面的脚本是带有大量下拉菜单和文本框的表单代码之后。第一页包含6个问题,但它们采用以下方式,

This is how the first page with the questions looks like, notice how the 2nd 3rd questions have 2 separate drop downs? I am not sure how to place them in terms of the ids in the functions

还有一个验证脚本,用于检查用户是否输入了所有必填字段,并将其添加到下一个按钮的onclick事件中,如下所示,onclick =“javascript:validate();”

我需要帮助才能找出我做错了什么。我知道我在需要通过id / name获取元素的区域中并不完全正确。请查看图像以了解我来自哪里,关于字段的ID /名称。任何帮助表示赞赏。

我也在这里发布表单代码,

 <form action = "POST" name="qform">
                    <div class="question clearfix form-group form-inline">
                      <label class="col-sm-4">1. Your GPA from previous degree <span class="text-danger">&nbsp;*</span></label>
                        <p class="col-xs-12 col-sm-5">
                        <select id="gpa"  class="form-control" onfocus required>
    //a huge drop down here..

                    <div class="question clearfix form-group form-inline">
                    <label class="col-sm-4">2. Your GRE/GMAT score <span class="text-danger">&nbsp;*</label>
                        <p class="col-xs-12 col-sm-6">
                        <select id="greScore" class="form-control">
                            <option value="0" selected="selected">Your GRE Score</option>
    //a huge drop down here
    <select id="gmatScore" class="form-control ml">
                            <option value="0" selected="selected">Your GMAT Score</option>
    //a huge drop down here
    <div class="question clearfix form-group form-inline">
                      <label class="col-sm-4">3. Your TOEFL/IELTS score<span class="text-danger">&nbsp;*</label></label>
                        <p class="col-sm-7">
                        <select id="toeflScore" class="form-control">
                            <option value="0" selected="selected">Your TOEFL Score</option>
    //a huge drop down here
    <select id="ieltsScore" class="form-control ml">
                        <!-- change scores -->
                            <option value="0" selected="selected">Your IELTS Score</option>
                            <option value="1">5</option>
                            <option value="2">5.5</option>
                            <option value="3">6</option>
                            <option value="4">6.5</option>
                            <option value="5">7</option>
                            <option value="6">7.5</option>
                            <option value="7">8</option>
                            <option value="8">8.5</option>
                            <option value="9">9</option>                    
                        </select> 
                    </p>
                    </div>             
                    <div class="question form-group">
                     <label class="col-sm-4">
                    4. Number of backlogs from your previous degree
                    </label>
                    <p class="col-sm-3">
                        <input type="text" id="backlog" class="form-control">
                    </p>
                    </div> 
                    </form>

请同时查看我提供的表格(第一页)图片的链接。

0 个答案:

没有答案