How to submit form data to html5 local database

Question

I am writing this very small application to run on an iPod. It is meant to store information based on a workout that I enter in. The storage will be html5 local database. My question is how do I get the information from the form which has multiple exercises and create a new record for each exercise? The html is:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>lower</title>
        <meta name="description" content="" />
        <meta name="author" content="john" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="work.js" type="text/javascript" charset="utf-8"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=0.6; minimum-scale=0.6; user-scalable=0;" />        
    </head>

    <body>
        <h1>Lower Body</h1>
        <div>
            <form method="post" id="workout_form">          
                <div>
                <table id="hipadd">
                    <label for="hipAddReps">Hip Adductor</label>
                    <tr><td>Seat <input type="text" id="hipAddSeatSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="hipAddReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="hipAddWeight" size="3" /></td></tr>
                </table>
            </div><br />
            <div>
                <table id="hipab">
                    <label for="hipAbReps">Hip Abductor</label>
                    <tr><td>Seat <input type="text" id="hipAbSeatSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="hipAbReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="hipAbWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <table id="legcurl">
                    <label for="legCurlReps">Leg Curl</label>
                    <tr><td>Back <input type="text" id="legCurlBackSetting" size="1"/></td><td>Feet </td><td><input type="text" id="legCurlFeetSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="legCurlReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legCurlWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <table id="legext">
                    <label for="legExtensionReps">Leg Extension</label>
                    <tr><td>Back <input type="text" id="legExtensionBackSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="legExtensionReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legExtensionWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <table id="legpress">
                    <label for="legPressReps">Leg Press</label>
                    <tr><td>Back <input type="text" id="legPressBackSetting" size="1"/></td><td>Seat </td><td><input type="text" id="legPressSeatSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="legPressReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legPressWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <table id="glute">
                    <label for="gluteReps">Glute</label>
                    <tr><td>Seat <input type="text" id="gluteSeatSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="gluteReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="gluteWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <button type="button" onclick="insertData()">Submit</button>
            </div>
            </form>
        </div>

    </body>
</html>

and the JavaScript I have so far is

 $(function(){ initDatabase();

});

function initDatabase() {
    try {
        if (!window.openDatabase) {
            alert('Local Databases are not supported by your browser.');
        } else {
            var shortName = 'WorkoutDB';
            var version = '1.0';
            var displayName = 'Workout Database';
            var maxSize = 100000;
            db = openDatabase(shortName, version, displayName, maxSize);
            createTables();
        }
    } catch(e) {
        if (e == 2) {
            // Version mismatch.
            console.log("Invalid database version.");
        } else {
            console.log("Unknown error "+ e +".");
        }
        return;
    } 
}

 $(document).ready(function(){
        db.transaction(function (transaction) {
            //transaction.executeSql('drop table workout');
            transaction.executeSql('CREATE TABLE IF NOT EXISTS workout(name TEXT, back TEXT, seat TEXT, feet TEXT, reps TEXT, weight TEXT);', [], nullDataHandler, errorHandler);
        }
    );
    //insertData();
 });

 function insertData(){
    var data = [$("label[for=hipAddReps]").text(), '', $('#hipAddSeatSetting').val(), '', $('#hipAddReps').val(), $('#hipAddWeight').val()];
        db.transaction(function (transaction) {         
            transaction.executeSql("INSERT INTO Workout(Name, Back, Seat, Feet, Reps, Weight) VALUES (?, ?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4], data[5]]);
    });
 }


function errorHandler(transaction, error){
    if (error.code==1){
        // DB Table already exists
    } else {
        // Error is a human-readable string.
        console.log('Oops.  Error was '+error.message+' (Code '+error.code+')');
    }
    return false;
}


function nullDataHandler(){
    console.log("SQL Query Succeeded");
}

so what I want is to fill in all of the fields on this form and hit the submit button at the bottom and have a new record inserted for each exercise I have.

so are you saying that something like this answer is the only way? http://stackoverflow.com/a/2227399/1060248 essentially creating a new array and a new insert statement for every exercise? — John, Aug 08 '12 at 21:53
you said you are making this application for an ipod, I assume since you are doing it in HTML5, there is some middle application which makes the app into IOS. Perhaps are you using [appcelerator](http://www.appcelerator.com/) or [phonegap](http://phonegap.com/)? More information would help answer the your question. — Beau Bouchard, Aug 08 '12 at 22:05
I am not at that point yet so I have not decided, do I need to decide that before I go further? I am just trying to get it working right then I was going to consider what I needed to do to get it on my iPod. Sorry if this is vague it is my first go around with this type of thing. — John, Aug 08 '12 at 22:08

score 0 · Accepted Answer · answered Aug 09 '12 at 17:08

Since you are going to make an application for the iOS (iPod), you would normally do this in objective C, however to do it in HTML5 you should look into a good framework. Take a look at Phonegap. They even have a getting started guide to get you up and running quickly. An alternative is appcelerator, although its not entirely free.

If you want to save form data to your phone you will need to consider using a light weight database, or flat file storage. Here is a link to phonegap's storage recommendations.

Example:

 <!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>

<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
//
function onDeviceReady() {
    var db = window.openDatabase("test", "1.0", "Test DB", 1000000);
}

</script>
</head>
 <body>
  <h1>Example</h1>
  <p>Open Database</p>
 </body>
</html>

If you would like a great book about iphone, ipod and iOS development I would recommend Big Nerd Ranch's book, its a great first time book that walks you through all the red tape with apple's dev account setup.

Good luck, and I recommend re-posting your question with phonegap, and iOS tags to get more exposure.

How to submit form data to html5 local database

1 Answers1