Pass input types through get query strings in javascript
<p>I am attempting to pass input types from an HTML5 form page to another HTML5 form page. I have used the GET query string. So far all the text fields' values are being passed, however, I am trying to pass the buttons', the date's, and the form's values as well.</p>

<p>Here is the relevant code for the genealogy.html page.</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;LINK rel="stylesheet" type="text/css" href="css/index.css"&gt;
    &lt;TITLE&gt;Relate&lt;/TITLE&gt;
    &lt;script type="text/javascript"&gt;
      function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&amp;]+([^=&amp;]+)=([^&amp;]*)/gi, function(m,key,value) {
          vars[key] = value;
        });
        return vars;
      }
      var firstName = getUrlVars()["myFirstName"];
      var lastName = getUrlVars()["myLastName"];
      var fFirstName = getUrlVars()["myFatherFirstName"];
      var fLastName = getUrlVars()["myFatherLastName"];
      var mFName = getUrlVars()["myMotherFirstName"];
      var mLName = getUrlVars()["myMotherLastName"];
      var birthDate = getUrlVars()["myBirthDate"];

      var birthDay = birthDate.toString();

      var fatherName = fFirstName + " " + fLastName;
      var motherName = mFName + " " + mLName;

      var submitBtn = getUrlVars()["mySubmit"];
      var deleteBtn = getUrlVars()["myUpdate"];
      var genealogyForm = getUrlVars()["genealogyForm"];


      var msg = ""; 

         var db = openDatabase('mydb', '1.0', 'my database', 2 * 1024 * 1024);

         db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS TREE (ID INTEGER PRIMARY KEY ASC, firstname TEXT, lastname TEXT, fathername TEXT, mothername TEXT, birthdate TEXT)');
            tx.executeSql('INSERT INTO TREE (firstname, lastname, fathername, mothername, birthdate) VALUES ("' + firstName + '","' + lastName + '","' + fatherName + '","' + motherName + '","' + birthDay + '")');
         });

         db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM TREE', [], function (tx, results) {
               var len = results.rows.length, i;

               for (i = 0; i &lt; len; i++){
                  msg = "&lt;tr&gt;";
                  msg +="&lt;td&gt;&lt;h3&gt;" + results.rows.item(i).firstname + " " + results.rows.item(i).lastname + "&lt;/h3&gt;&lt;/td&gt;";
                  msg += "&lt;/tr&gt;";
                  msg += "&lt;tr&gt;";
                  msg += "&lt;td&gt;" + results.rows.item(i).fathername + "&lt;/td&gt;";
                  msg += "&lt;td&gt;" + results.rows.item(i).mothername + "&lt;/td&gt;";
                  msg += "&lt;/tr&gt;";
                  document.querySelector('#tblGrid').innerHTML +=  msg;
               }
            }, null);
         });
      //}

      &lt;/script&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div class="app"&gt;
         &lt;img src="img/gealogy-view.png" width="100px" height="100px" alt="Genealogy Test" /&gt;
         &lt;h1&gt;RELATE&lt;/h1&gt;  
      &lt;/div&gt;
      &lt;table id="tblGrid"&gt;   
    &lt;/table&gt;  
   &lt;/body&gt;

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

<p>I added the index.html page's code.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;!--
--&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;!--
        --&gt;
        &lt;title&gt;Relate&lt;/title&gt;

        &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
        &lt;script type="text/javascript"&gt;
            function searchGenealogy() {
            if (document.forms[0].myFirstName.value == "") {
            alert("Please enter your first name.");
            return false;
            } // end if
            if (document.forms[0].myLastName.value == "") { 
            alert("Please enter your last name.");
            return false;
            } // end if
            if (document.forms[0].myBirthDate.value == "") { 
            alert("Please enter your last name.");
            return false;
            } // end if
            if (document.forms[0].myFatherFirstName.value == "") {
            alert("Please enter your father's first name.");
            return false;
            } // end if
            if (document.forms[0].myFatherLastName.value == "") {
            return false;
            } // end if
            if (document.forms[0].myMotherFirstName.value == "") {
            alert("Please enter your mother's first name.");
            return false;
            } // end if
            if (document.forms[0].myMotherLastName.value == "") { 
            alert("Please enter your mother's last name.");
            return false;
            } // end if
            return true;
            } // end function searchGenealogy
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="app"&gt;
            &lt;img src="img/gealogy-view.png" width="100px" height="100px" alt="Genealogy Test" /&gt;
            &lt;h1&gt;RELATE&lt;/h1&gt;
            &lt;form name="genealogyForm" method="get" onSubmit="return searchGenealogy();" 
            id="genealogyForm" action="genealogy.html"&gt;
            &lt;h2&gt;Personal Information&lt;/h2&gt;
            &lt;label for="myFirstName"&gt;First Name&lt;/label&gt;
            &lt;input type="text" name="myFirstName" id="myFirstName" required&gt;
            &lt;label for="myLastName"&gt;Last Name&lt;/label&gt;
            &lt;input type="text" name="myLastName" id="myLastName" required&gt;
            &lt;label for="myBirthDate"&gt;Date of Birth&lt;/label&gt;
            &lt;input type="date" name="myBirthDate" id="myBirthDate" required&gt;
            &lt;h2&gt;Parents&lt;/h2&gt;
            &lt;h3&gt;Father&lt;/h3&gt;
            &lt;label for="myFatherFirstName"&gt;First Name&lt;/label&gt;
            &lt;input type="text" name="myFatherFirstName" id="myFatherFirstName" required&gt;
            &lt;label for="myFatherLastName"&gt;Last Name&lt;/label&gt;
            &lt;input type="text" name="myFatherLastName" id="myFatherLastName" required&gt;
            &lt;h3&gt;Mother&lt;/h3&gt;
            &lt;label for="myMotherFirstname"&gt;First Name&lt;/label&gt;
            &lt;input type="text" name="myMotherFirstName" id="myMotherFirstName" required&gt;
            &lt;label for="myMotherLastName"&gt;Last Name&lt;/label&gt;
            &lt;input type="text" name="myMotherLastName" id="myMotherLastName" required&gt;&lt;br&gt;&lt;br&gt;
            &lt;button type = "submit" value="Create" name="mySubmit" id="mySubmit"&gt;Create&lt;/button&gt;
            &lt;button type = "button" value="Update" name="myUpdate" id="myUpdate"&gt;Delete&lt;/button&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>