웹 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> 

내 자바 스크립트 : 당신이 당신의 바이올린의 상단에 JSHint을 클릭하면 그것이 말하는

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

당신이 혼합 한 탭과 공백 붉은 점들은 자바 스크립트에서 이것이 나타나는 곳을 보여줍니다. 상단의 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(); 
};