在 Web SQL 数据库中保存表单值

Posted 2023-03-23

【中文标题】在 Web SQL 数据库中保存表单值

【英文标题】：Saving form values in Web SQL database

【发布时间】：2014-03-25 22:36:37

【问题描述】：

我无法将表单值保存到 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();

【问题讨论】：

我在 console.log 中收到以下错误：Uncaught ReferenceError: addDraft is not defined line 120.

【参考方案1】：

如果您单击小提琴顶部的 JSHint，则表示您混合了制表符和空格。 红点显示在 javascript 中发生这种情况的位置。 单击顶部的 tidyUp 链接，然后单击运行。 那么一切都很好。

【参考方案2】：

问题是因为“addDraft”函数调用发生在它出现在 DOM 上之前。解决的办法是去掉onclick表单<button type="button" id="addDraft" onclick="addDraft();">Save as draft</button>，写出vent这个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();
;