I’m trying to expand on a tutorial where Jonathan Stark creates a database using JS, CSS, and JQuery.
A complete explanation of the code can be found in chapters 4 and 5 here:
Building Android Apps with HTML, CSS, and JavaScript (sets up the HTML).
Building Android Apps with HTML, CSS, and JavaScript (sets up the DB storage).
Stark uses a form for the user to enter data, then the attached js file inserts the data into the SQLite database:
<div id="createEntry">
<div class="toolbar">
<h1>New Setup</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul class="rounded">
<li><img src="picture.png">
<br>FRONT Shock Mounting, arm: <input type="text" placeholder="TAP HERE TO ENTER" name="shockMountingArm" id="shockMountingArm"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li>FRONT Piston: <input type="number" placeholder="" name="piston" id="piston"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li>FRONT Shock Oil wt.: <input type="number" placeholder="" name="shockOil" id="shockOil"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li>FRONT Shock Springs:
<select name="shockSpring" id="shockSpring">
<option value="green">green</option>
<option value="blue">blue</option>
</select></li>
<!--doesn't work. Text entered in by user does not save to DB:
<li>FRONT Shock Springs, OTHER: <input type="text" placeholder="" name="shockSpring" id="shockSpring"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li> -->
<li><input type="submit" class="submit" name="action" value="Save Settings" /></li>
</ul>
</form>
</div>
The form is processed by a database script on another page, as indicated by the header:
<script type=“text/javascript” src=“kilo.js”></script>
In kilo.js, the following grabs the field’s data:
function createEntry() {
var date = sessionStorage.currentDate;
var calories = $('#calories').val();
var food = $('#food').val();
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);',
[date, calories, food],
function(){
refreshEntries();
jQT.goBack();
},
errorHandler
);
}
);
return false;
}
function refreshEntries() {
var currentDate = sessionStorage.currentDate;
$('#date h1').text(currentDate);
$('#date ul li:gt(0)').remove();
db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT * FROM entries WHERE date = ? ORDER BY food;',
[currentDate],
function (transaction, result) {
for (var i=0; i < result.rows.length; i++) {
var row = result.rows.item(i);
var newEntryRow = $('#entryTemplate').clone();
newEntryRow.removeAttr('id');
newEntryRow.removeAttr('style');
newEntryRow.data('entryId', row.id);
newEntryRow.appendTo('#date ul');
newEntryRow.find('.label').text(row.food);
newEntryRow.find('.calories').text(row.calories);
newEntryRow.find('.delete').click(function(){
var clickedEntry = $(this).parent();
var clickedEntryId = clickedEntry.data('entryId');
deleteEntryById(clickedEntryId);
clickedEntry.slideUp();
});
}
},
errorHandler
);
}
);
}
My question: how can I redirect the form to a different database script on a different or same page as this database code? I want to have multiple forms going to different tables, and I want the database scripts kept separate. I just don’t understand how the form data knows to be inserted into this database.
If I duplicate kilo.js, rename it kilo2.js and use different field names, and attach it to the forms page following kilo.js, then kilo.js is ignored and the original form does not work.
Thanks!