title: how to get values from query string on page load using javascript in html5
body: <p>I've a form like this:</p>
  
  <p></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
   $(function(){
        $('#week1').change(function(){
      //alert('week1');
      //$("#week2").val("");
            $('#week2 option').each(function(){
                if($(this).prop('defaultSelected')) 
                    $('#week2').val($(this).val()).selectmenu("refresh");
            });
       });
  
  
       $('#week2').change(function(){
     //alert('week1');
     //$("#week1").val("");
           $('#week1 option').each(function(){
                if($(this).prop('defaultSelected')) 
                    $('#week1').val($(this).val()).selectmenu("refresh");
            });
       });
   });
  &lt;/script&gt;
  &lt;div data-role="page"&gt;
    &lt;div data-role="header"&gt;
    &lt;h1&gt;Search database&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div data-role="main" class="ui-content"&gt;
      &lt;form id="search" method="get" action="result.html"&gt;
        &lt;fieldset class="ui-field-contain"&gt;
          &lt;label for="week1"&gt;Select Week1&lt;/label&gt;
          &lt;select name="week1" id="week1"&gt;
            &lt;option value="" selected&gt;Select week1&lt;/option&gt;
      &lt;option value="mon"&gt;Monday&lt;/option&gt;
            &lt;option value="tue"&gt;Tuesday&lt;/option&gt;
            &lt;option value="wed"&gt;Wednesday&lt;/option&gt;
            &lt;option value="thu"&gt;Thursday&lt;/option&gt;
            &lt;option value="fri"&gt;Friday&lt;/option&gt;
            &lt;option value="sat"&gt;Saturday&lt;/option&gt;
            &lt;option value="sun"&gt;Sunday&lt;/option&gt;
          &lt;/select&gt;
    &lt;br &gt;
          &lt;label for="week2"&gt;Select Week2&lt;/label&gt;
          &lt;select name="week2" id="week2"&gt;
            &lt;option value=""selected&gt;Select week2&lt;/option&gt;
      &lt;option value="mon"&gt;Monday 2&lt;/option&gt;
            &lt;option value="tue"&gt;Tuesday 2&lt;/option&gt;
            &lt;option value="wed"&gt;Wednesday 2&lt;/option&gt;
            &lt;option value="thu"&gt;Thursday 2&lt;/option&gt;
            &lt;option value="fri"&gt;Friday 2&lt;/option&gt;
            &lt;option value="sat"&gt;Saturday 2&lt;/option&gt;
            &lt;option value="sun"&gt;Sunday 2&lt;/option&gt;
          &lt;/select&gt;  
        &lt;/fieldset&gt;
        &lt;input type="submit" data-inline="true" value="Submit"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>that submit the form to results.html and I'm trying to display the values from the query string as the page load but it is not working. When I manually refresh the page, I see the values but not when the form is submitted and results.html page is loaded. Can someone help me.</p>
  
  <p>Thanks in advance for your time and advice.</p>
  
  <p>Joe Green</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script&gt;
      function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&amp;");
        for (var i=0;i&lt;vars.length;i++) {
          var pair = vars[i].split("=");
          if (pair[0] == variable) {
           return pair[1];
        }
      }
      alert('Query Variable ' + variable + ' not found');
    }
    
    document.write("&lt;br /&gt;Week1 = " + getQueryVariable("week1"));
    document.write("&lt;br /&gt;Week2 = " + getQueryVariable("week2"));
    &lt;/script&gt;
  
  &lt;script&gt;
      var week1 = getQueryVariable("week1");
   var week2 = getQueryVariable("week2");
   
   document.getElementById("week1").innerHTML = week1;
   document.getElementById("week2").innerHTML = week2;
   
   alert(week1);
   alert(week2);
   
    &lt;/script&gt;
  &lt;div data-role="page"&gt;
    &lt;div data-role="header"&gt;
    &lt;h1&gt;Search database&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div data-role="main" class="ui-content"&gt;
        &lt;div id="week1"&gt;&lt;/div&gt;
     &lt;div id="week2"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>