I'm having issues when using a form to insert data into a local database. For whatever reason the first time the submit button is clicked a "Error Loading Page" message pops up and the form page refreshes, but if I reenter information into the form and click the button again the data is entered into the database and the page moves on to the correct place at #MoneyOrdersMain. I am confused as to what could be causing this. Any help would be appreciated. Particularly what would be causing the form to not submit the first time?
The Form:
<form method="post" id="moneyorder_form" name="moneyorder_form" onsubmit="MOsubmit()">
<!-- onsubmit="closeSelf()"> -->
<div class="ui-grid-a">
<div class="ui-block-a">
<p style="text-align: center; display: inline"><b>Number</b></p>
<p>
<input type="number" required="required" step="1" id="moCNumber" name="moCNumber">
</p>
</div>
<div class="ui-block-b">
<p style="text-align: center; display: inline"><b>Amount</b></p>
<p>
<input type="number" required="required" min=".01" step=".01" id="moCAmount" name="moCAmount">
</p>
</div>
<br />
</div>
<div class="ui-grid-solo">
<div class="ui-block-a">
<input type="submit" data-role="button" value="Add" />
</div>
</div>
</form>
MOsubmit() function:
function MOsubmit() {
insertMoC($('#moCNumber').val(), $('#moCAmount').val(), "MoneyOrder");
$.mobile.changePage('#MoneyOrdersMain');
location.reload(true);
}
function insertMoC(moCNumber, moCAmount, moCType) {
db.transaction(function (tx) {
tx.executeSql('INSERT INTO MoneyOrderChecks (moCNumber, moCAmount, moCType) VALUES (?, ?, ?)', [moCNumber, moCAmount, moCType]);
});
}