在Web SQL數據庫中保存表單值

Question

我在將表單值保存到webSQL數據庫時遇到問題。這是我第一次使用webSQL。該表已創建，但我無法將表單值保存到表中。所有幫助讚賞！

鏈接JSfiddle-- http://jsfiddle.net/earthtojayne/pp5VD/

HTML：

<div id="controls"> 
<p>Save drafts to the database</p> 
<label>First Name: </label><input type="text" id="Fname" /><br /> 
<label>Last Name: </label><input type="text" id="Lname" /><br /> 
<label>Country: </label><input type="text" id="Country" /><br /> 
<button type="button" id="addDraft" onclick="addDraft();">Save as draft</button> 
</div> 
<div id="listholder"> 
<h3>Your saved drafts</h3> 
<ul id="drafts"> 
</ul> 
</div> 

我的javascript：

if (window.openDatabase){ 
    //Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MB 
    var mydb = openDatabase("Testdb", "0.1", "Testing Database", 1024 * 1024); 

    //create the table using SQL for the database using a transaction 
    mydb.transaction(function(t){ 
     t.executeSql("CREATE TABLE IF NOT EXISTS mydb (id INTEGER PRIMARY KEY, Fname VARCHAR(50), Lname VARCHAR(50), Country VARCHAR(100))"); 
}); 

}else{ 
alert("WebSQL is not supported by your browser!"); 
} 


//function to output to the database 
function updateDrafts(transaction, results){ 
//initialise the listitems variable 
var listitems = ""; 
//get the list holder ul 
var listholder = document.getElementById("drafts"); 

//clear the list of drafts ul 
listholder.innerHTML = ""; 

var i; 
//Iterate through the results 
for (i = 0; i < results.rows.length; i++) { 
    //Get the current row from database 
    var row = results.rows.item(i); 

    listholder.innerHTML += "<li>" + row.Fname + " - " + row.Lname + " - " + row.Country + "(<a href='javascript:void(0);' onclick='deleteDraft(" + row.id + ");'>Delete Draft</a>)"; 
} 
} 

//function to get the list from the database 

function outputDrafts() { 
//check to ensure the mydb object has been created 
if (mydb) { 
    //Get all the data from the database with a select statement, set outputCarList as the callback function for the executeSql command 
    mydb.transaction(function(t) { 
     t.executeSql("SELECT * FROM mydb", [], updateDrafts); 
    }); 
} else { 
    alert("db not found, your browser does not support web sql!"); 
} 
} 
//function to add to the database 

function addDraft() { 
//check to ensure the mydb object has been created 
if (mydb) { 
    //get the values of text inputs 
    var Fname= document.getElementById("Fname").value; 
    var Lname= document.getElementById("Lname").value; 
    var Country = document.getElementById("Country").value; 


    //Test to ensure that the fields are not empty 
    if (Fname !== "" && Lname !== "" && Country !== "") { 
     //Insert the user entered details into the table, note the use of the ? placeholder, these will replaced by the data passed in as an array as the second parameter 
     mydb.transaction(function(t) { 
      t.executeSql("INSERT INTO mydb (Fname, Lname, Country) VALUES (?, ?, ?)", [Fname, Lname, Country]); 
      outputDrafts(); 
     }); 
    } else { 
     alert("You must enter your first name, last name and country!"); 
    } 
} else { 
    alert("db not found, your browser does not support web sql!"); 
} 
} 
//function to remove from the database, passed the row id as it's only parameter 

function deleteDraft(id) { 
//check to ensure the mydb object has been created 
if (mydb) { 

    mydb.transaction(function(t) { 
     t.executeSql("DELETE FROM mydb WHERE id=?", [id], outputDrafts); 
    }); 
} else { 
    alert("db not found, your browser does not support web sql!"); 
} 
} 

outputDrafts(); 

Answer 1

如果單擊JSHint在你的提琴的頂部，它說你已經混合選項卡和空間。 紅色圓點顯示出現JavaScript的位置。 點擊頂部的tidyUp鏈接，然後點擊運行。 一切都很好。

Answer 2

問題是因爲'addDraft'函數調用發生在DOM上之前。解決方法是刪除onclick表單<button type="button" id="addDraft" onclick="addDraft();">Save as draft</button>並將通風口寫入js文件。 更新後的文件如：

//HTML 
<div id="controls"> 
    <p>Save drafts to the database</p> 
    <label>First Name: </label> 
    <input type="text" id="Fname" /> 
    <br /> 
    <label>Last Name: </label> 
    <input type="text" id="Lname" /> 
    <br /> 
    <label>Country: </label> 
    <input type="text" id="Country" /> 
    <br /> 
    <button type="button" id="addcar">Save as draft</button> 
</div> 
<div id="listholder"> 
    <h3>Your saved drafts</h3> 
    <ul id="drafts"> 
    </ul> 
</div> 


//Js 
var mydb = openDatabase("Testdb", "0.1", "Testing Database", 1024 * 1024); 
if (window.openDatabase) { 
    //Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MB 


    //create the table using SQL for the database using a transaction 
    mydb.transaction(function(t) { 
    t.executeSql("CREATE TABLE IF NOT EXISTS mydb (id INTEGER PRIMARY KEY, Fname VARCHAR(50), Lname VARCHAR(50), Country VARCHAR(100))"); 
    }); 

} else { 
    alert("WebSQL is not supported by your browser!"); 
} 


//function to output the list of cars in the database 
function updateDrafts(transaction, results) { 
    //initialise the listitems variable 
    var listitems = ""; 
    //get the list holder ul 
    var listholder = document.getElementById("drafts"); 

    //clear the list of drafts ul 
    listholder.innerHTML = ""; 

    var i; 
    //Iterate through the results 
    for (i = 0; i < results.rows.length; i++) { 
    //Get the current row from database 
    var row = results.rows.item(i); 

    listholder.innerHTML += "<li>" + row.Fname + " - " + row.Lname + " - " + row.Country + "(<a href='javascript:void(0);' onclick='deleteDraft(" + row.id + ");'>Delete Draft</a>)"; 
    } 
} 

//function to get the list of cars from the database 

function outputDrafts() { 
    //check to ensure the mydb object has been created 
    if (mydb) { 
    //Get all the cars from the database with a select statement, set outputCarList as the callback function for the executeSql command 
    mydb.transaction(function(t) { 
     t.executeSql("SELECT * FROM mydb", [], updateDrafts); 
    }); 
    } else { 
    alert("db not found, your browser does not support web sql!"); 
    } 
} 
//function to add the car to the database 

function addDraft() { 
    //check to ensure the mydb object has been created 
    if (mydb) { 
    //get the values of the make and model text inputs 
    var Fname = document.getElementById("Fname").value; 
    var Lname = document.getElementById("Lname").value; 
    var Country = document.getElementById("Country").value; 


    //Test to ensure that the user has entered both a make and model 
    if (Fname !== "" && Lname !== "" && Country !== "") { 
     //Insert the user entered details into the cars table, note the use of the ? placeholder, these will replaced by the data passed in as an array as the second parameter 
     mydb.transaction(function(t) { 
     t.executeSql("INSERT INTO mydb (Fname, Lname, Country) VALUES (?, ?, ?)", [Fname, Lname, Country]); 
     outputDrafts(); 
     }); 
    } else { 
     alert("You must enter a make and model!"); 
    } 
    } else { 
    alert("db not found, your browser does not support web sql!"); 
    } 
} 
//function to remove a car from the database, passed the row id as it's only parameter 

function deleteDraft(id) { 
    //check to ensure the mydb object has been created 
    if (mydb) { 
    //Get all the cars from the database with a select statement, set outputCarList as the callback function for the executeSql command 
    mydb.transaction(function(t) { 
     t.executeSql("DELETE FROM mydb WHERE id=?", [id], outputDrafts); 
    }); 
    } else { 
    alert("db not found, your browser does not support web sql!"); 
    } 
} 

outputDrafts(); 
var link = document.getElementById("addcar"); 

link.onclick = function() { alert(1) 
addDraft(); 
};