storing form fields using cookies or localstorage across pages
<p>I have 3 pages in my app that have a set of questions. Each page has roughly 6 questions that a user needs to answer and then click next. Now, when the user clicks previous, they should be able to see the typed data in the fields. I have used the concept of cookies in my code and written the getcookies and setcookies functions according to the sample code in this link,
<a href="http://www.the-art-of-web.com/javascript/setcookie/" rel="nofollow">http://www.the-art-of-web.com/javascript/setcookie/</a></p>

<p>Here is my code,</p>

<pre><code> &lt;script&gt;
            // 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;
  }

&lt;/script&gt;
</code></pre>

<p>`
After the above script is the form code with lots of drop downs and text boxes. The first page contains 6 questions but they are in the following manner,</p>

<p><a href="http://i.stack.imgur.com/9Ft5A.png" rel="nofollow">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</a></p>

<p>There is also a validation script in place that checks if the user has entered all the mandatory fields and it is added in the next button's onclick event like so, onclick = "javascript:validate();"</p>

<p>I need help in finding out what I am doing wrong. I know I am not entirely correct in the area where I need to grab the elements by id/name. Please take a look at the image to understand where I am coming from, regarding the ids/names of the fields. Any help is appreciated. </p>

<p>I am posting the form code in here too,</p>

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

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

<p>Please also look at the link to the image I gave of the form(the first page).</p>