Hi everyone,
I am new to JavaScript and Jquery. I am building a mobile project using Phonegap ans sqlite. I would like to save data into DB when submit button is clicked and also display the data to the user after the data is succesfully saved into the DB, but the data is never saved into the DB and data is not displayed. How can i get this done? Below is the js code. Thank you.

var jqmReady = $.Deferred(),
pgReady = $.Deferred();

// jqm page is ready
$(document).bind("pageinit", jqmReady.resolve);

// phonegap ready
document.addEventListener("deviceready", pgReady.resolve, false);

// all ready, throw a custom 'onDevicerady' event
$.when(jqmReady, pgReady).then(function(){

var creatTable = "CREATE TABLE IF NOT EXISTS Patient(id INTEGER PRIMARY KEY AUTOINCREMENT, FirstName TEXT, LastName TEXT, SSN TEXT, Gender TEXT, Morning TEXT, Afternoon TEXT, Evening TEXT, Night TEXT)";
var selectAllStatement = "SELECT * FROM Patient";

function onDeviceReady(){

if (!window.openDatabase) {

alert('The browser has no support for SQlite DB.');

var db = window.openDatabase("appReminder", "1.0", "Reminder", 200000);
db.transaction(populateDB, errorCB, successCB);


function populateDB(tx) {

tx.executeSql(creatTable, [], errorCBz, successCB);

function errorCB(tx, err) {
alert("Error processing SQL first: "+err);

function errorCBz(tx, err) {
alert("Error processing SQL second: "+err);

//success callback

function successCB() {

// Save or summit function. insert Values into DB.
function insertRecordOfPatient(){

var genVal= ($('.gender').val()==male) ? 'Male' : 'Female';

var firstName = $('input:text[id=fName]').val();
var lastName = $('input:text[id=lName]').val();
var ssn = $('input:text[id=ssn]').val();
var gender = $('input:radio[class=gender]').val(genVal);

db.transaction(function (tx) { tx.executeSql("INSERT INTO Patient(FirstName, LastName, SSN, Gender) VALUES (?, ?, ?, ?)",[firstName, lastName, ssn, gender],
reset_showDatabase, errorCB); });

function reset_showDatabase(){


function showDatabase(tx, results){


tx.executeSql("SELECT FirstName,LastName, SSN, Gender FROM Patients;", [], function (tx, result){

for(var i=0; i<results.rows.length; ++i){
var row= results.rows.item(i);

var disp= '<tr><td>' + row['FirstName'] + '</td>' + '<td>' + row['LastName'] + '</td>' + '<td>' +
row['SSN'] + '</td>' + '<td>' + row['Gender'] + '</td>' + '<td>' + '<input type="button" onclick="navig();">Return</a>' + '</td></tr>';