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.
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.