Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Apr 2013
    Posts
    10
    Member #
    36126

    Displaying form data in web database with Web SQL and JavaScript

    Hi,

    I am developing an app. I am using HTML5, JavaScript, CSS3, and Web SQL. I am having difficulty retrieving form data from an HTML5 page and displaying it on another HTML5 page with Web SQL and JavaScript. So far, I am able to send the form data from index.html, and then loading the genealogy.html page.

    Here is the code for index.html:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Relate</title>
            
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <script type="text/javascript">
                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 == "") { 
                alert("Please enter your father's last name.");
                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
            </script>
        </head>
        <body>
            <div class="app">
                <img src="img/gealogy-view.png" width="100px" height="100px" alt="Genealogy Test" />
                <h1>RELATE</h1>
                <form name="genealogyForm" method="get" onSubmit="return searchGenealogy();" 
                id="genealogyForm" action="genealogy.html">
                <h2>Personal Information</h2>
                <label for="firstname">First Name</label>
                <input type="text" name="myFirstName" id="myFirstName" required>
                <label for="lastname">Last Name</label>
                <input type="text" name="myLastName" id="myLastName" required>
                <label for="birthdate">Date of Birth</label>
                <input type="date" name="myBirthDate" id="myBirthDate" required>
                <h2>Parents</h2>
                <h3>Father</h3>
                <label for="fatherfirstname">First Name</label>
                <input type="text" name="myFatherFirstName" id="myFatherFirstName" required>
                <label for="fatherlastname">Last Name</label>
                <input type="text" name="myFatherlastName" id="myFatherLastName" required>
                <h3>Mother</h3>
                <label for="motherfirstname">First Name</label>
                <input type="text" name="myMotherFirstName" id="myMotherFirstName" required>
                <label for="myMotherLastName">Last Name</label>
                <input type="text" name="myMotherLastName" id="myMotherLastName" required><br><br>
                <button type = "submit" value="Create" name="mySubmit" id="mySubmit">Create</button>
                <button type = "button" value="Delete" name="myDelete" id="myDelete">Delete</button>
                </form>
            </div>
        </body>
    </html>
    And here is the code for genealogy.html:

    Code:
    <!DOCTYPE HTML>
    <html>
    
    
       <head>
        <link rel="stylesheet" type="text/css" href="css/index.css">
          <title>Relate</title>
       <script type="text/javascript">
            
            function init() {
             var firstName = document.getElementById("myFirstName").value;
             var lastName = document.getElementById("myLastName").value;
             var fatherFirstName = document.getElementById("myFatherFirstName").value;
             var fatherLastName = document.getElementById("myFatherLastName").value;
             var motherFirstName = document.getElementById("myMotherFirstName").value;
             var motherLastName = document.getElementById("myMotherLastName").value;
            
             genealogyForm.onsubmit = database;
            }
            
            onload = init;
            
          function database () {
             if (window.openDatabase) {
             var db = openDatabase('mydb', '1.0', 'my database', 2 * 1024 * 1024);
             var msg;
             }
             else{
                alert("WebSQL is not supported by your browser!");
             }
                
             db.transaction(function (tx) {
                tx.executeSql('CREATE TABLE IF NOT EXISTS RELATE (id unique, firstname, lastname, fatherfirstname, fatherlastname, motherfirstname, motherlastname)');
                tx.executeSql('INSERT INTO RELATE (id, firstname, lastname, fatherfirstname, fatherlastname, motherfirstname, motherlastname) VALUES (1, firstName, lastName, fatherFirstName, fatherLastName, motherFirstName, motherLastName)');
                msg = '<p>Log message created and row inserted.</p>';
                document.querySelector('#status').innerHTML =  msg;
             });
    
    
             db.transaction(function (tx) {
                tx.executeSql('SELECT * FROM RELATE', [], function (tx, results) {
                   var len = results.rows.length, i;
                   msg = "<p>Found rows: " + len + "</p>";
                   document.querySelector('#status').innerHTML +=  msg;
                        
                   for (i = 0; i < len; i++){
                      msg = "<p><b>" + results.rows.item(i).firstname + "</b></p>";
                      document.querySelector('#status').innerHTML +=  msg;
                   }
                }, null);
             });
          }
                
          </script>
       </head>
        
       <body>
          <div class="app">
             <img src="img/gealogy-view.png" width="100px" height="100px" alt="Genealogy Test" />
             <h1>RELATE</h1>  
          </div>
          <p id="status"></p>
       </body>
        
    </html>
    Can someone tell me what is wrong with my genealogy.html page?

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com