如何提交表格數據到html5本地數據庫

我正在寫這個非常小的應用程序在iPod上運行。它旨在存儲基於我輸入的鍛鍊的信息。存儲將是html5本地數據庫。我的問題是，如何從具有多個練習的表單中獲取信息，併爲每個練習創建一個新記錄？的HTML是：如何提交表格數據到html5本地數據庫

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>lower</title> 
     <meta name="description" content="" /> 
     <meta name="author" content="john" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
     <script src="work.js" type="text/javascript" charset="utf-8"></script> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
     <meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=0.6; minimum-scale=0.6; user-scalable=0;" />   
    </head> 

    <body> 
     <h1>Lower Body</h1> 
     <div> 
      <form method="post" id="workout_form">   
       <div> 
       <table id="hipadd"> 
        <label for="hipAddReps">Hip Adductor</label> 
        <tr><td>Seat <input type="text" id="hipAddSeatSetting" size="1"/></td></tr> 
        <tr><td>Reps <input type="text" id="hipAddReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="hipAddWeight" size="3" /></td></tr> 
       </table> 
      </div><br /> 
      <div> 
       <table id="hipab"> 
        <label for="hipAbReps">Hip Abductor</label> 
        <tr><td>Seat <input type="text" id="hipAbSeatSetting" size="1"/></td></tr> 
        <tr><td>Reps <input type="text" id="hipAbReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="hipAbWeight" size="3"/></td></tr> 
       </table> 
      </div><br /> 
      <div> 
       <table id="legcurl"> 
        <label for="legCurlReps">Leg Curl</label> 
        <tr><td>Back <input type="text" id="legCurlBackSetting" size="1"/></td><td>Feet </td><td><input type="text" id="legCurlFeetSetting" size="1"/></td></tr> 
        <tr><td>Reps <input type="text" id="legCurlReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legCurlWeight" size="3"/></td></tr> 
       </table> 
      </div><br /> 
      <div> 
       <table id="legext"> 
        <label for="legExtensionReps">Leg Extension</label> 
        <tr><td>Back <input type="text" id="legExtensionBackSetting" size="1"/></td></tr> 
        <tr><td>Reps <input type="text" id="legExtensionReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legExtensionWeight" size="3"/></td></tr> 
       </table> 
      </div><br /> 
      <div> 
       <table id="legpress"> 
        <label for="legPressReps">Leg Press</label> 
        <tr><td>Back <input type="text" id="legPressBackSetting" size="1"/></td><td>Seat </td><td><input type="text" id="legPressSeatSetting" size="1"/></td></tr> 
        <tr><td>Reps <input type="text" id="legPressReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legPressWeight" size="3"/></td></tr> 
       </table> 
      </div><br /> 
      <div> 
       <table id="glute"> 
        <label for="gluteReps">Glute</label> 
        <tr><td>Seat <input type="text" id="gluteSeatSetting" size="1"/></td></tr> 
        <tr><td>Reps <input type="text" id="gluteReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="gluteWeight" size="3"/></td></tr> 
       </table> 
      </div><br /> 
      <div> 
       <button type="button" onclick="insertData()">Submit</button> 
      </div> 
      </form> 
     </div> 

    </body> 
</html>

和JavaScript我到目前爲止是

$(function(){ initDatabase(); 

}); 

function initDatabase() { 
    try { 
     if (!window.openDatabase) { 
      alert('Local Databases are not supported by your browser.'); 
     } else { 
      var shortName = 'WorkoutDB'; 
      var version = '1.0'; 
      var displayName = 'Workout Database'; 
      var maxSize = 100000; 
      db = openDatabase(shortName, version, displayName, maxSize); 
      createTables(); 
     } 
    } catch(e) { 
     if (e == 2) { 
      // Version mismatch. 
      console.log("Invalid database version."); 
     } else { 
      console.log("Unknown error "+ e +"."); 
     } 
     return; 
    } 
} 

$(document).ready(function(){ 
     db.transaction(function (transaction) { 
      //transaction.executeSql('drop table workout'); 
      transaction.executeSql('CREATE TABLE IF NOT EXISTS workout(name TEXT, back TEXT, seat TEXT, feet TEXT, reps TEXT, weight TEXT);', [], nullDataHandler, errorHandler); 
     } 
    ); 
    //insertData(); 
}); 

function insertData(){ 
    var data = [$("label[for=hipAddReps]").text(), '', $('#hipAddSeatSetting').val(), '', $('#hipAddReps').val(), $('#hipAddWeight').val()]; 
     db.transaction(function (transaction) {   
      transaction.executeSql("INSERT INTO Workout(Name, Back, Seat, Feet, Reps, Weight) VALUES (?, ?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4], data[5]]); 
    }); 
} 


function errorHandler(transaction, error){ 
    if (error.code==1){ 
     // DB Table already exists 
    } else { 
     // Error is a human-readable string. 
     console.log('Oops. Error was '+error.message+' (Code '+error.code+')'); 
    } 
    return false; 
} 


function nullDataHandler(){ 
    console.log("SQL Query Succeeded"); 
}

所以我要的是填補了這一切形式的字段，並在底部點擊提交按鈕，爲每個練習插入一條新記錄。

來源

2012-08-08 John Stewart

那麼你是說這樣的答案是唯一的方法嗎？ http://stackoverflow.com/a/2227399/1060248 實質上爲每個練習創建一個新的數組和一個新的插入語句？ – 2012-08-08 21:53:07

你說你正在爲ipod製作這個應用程序，我假設你是用HTML5做的，還有一些中間應用程序讓應用程序進入IOS。也許你使用[appcelerator]（http://www.appcelerator.com/）或[phonegap]（http://phonegap.com/）？更多信息將有助於回答你的問題。 – 2012-08-08 22:05:10

我還沒有到那個時候，所以我還沒有決定，在我走得更遠之前是否需要做出決定？我只是試圖讓它正常工作，然後我會考慮我需要做什麼才能在iPod上播放它。對不起，如果這是模糊的，這是我第一次遇到這種類型的事情。 – 2012-08-08 22:08:10

由於您要爲iOS（iPod）製作應用程序，您通常會在目標C中執行此操作，但要在HTML5中執行此操作，您應該查看一個良好的框架。看看Phonegap。他們甚至有一個getting started guide讓你快速啓動並運行。另一種方法是appcelerator，雖然它不完全免費。

如果要將表單數據保存到手機中，您需要考慮使用輕量級數據庫或平面文件存儲。這裏是phonegap's storage建議的鏈接。

例子：

<!DOCTYPE html> 
<html> 
<head> 
<title>Contact Example</title> 

<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script> 
<script type="text/javascript" charset="utf-8"> 

// Wait for PhoneGap to load 
// 
document.addEventListener("deviceready", onDeviceReady, false); 

// PhoneGap is ready 
// 
function onDeviceReady() { 
    var db = window.openDatabase("test", "1.0", "Test DB", 1000000); 
} 

</script> 
</head> 
<body> 
    <h1>Example</h1> 
    <p>Open Database</p> 
</body> 
</html>

如果您想了解更多關於iPhone，iPod和iOS開發一個偉大的書，我會建議Big Nerd Ranch's書，它是一個偉大的第一次的書，引導您完成所有的繁文縟節與蘋果的開發帳戶設置。

祝你好運，我建議重新發布你的問題與phonegap和iOS標籤，以獲得更多的曝光。

來源

2012-08-09 17:08:56

如何提交表格數據到html5本地數據庫

回答

相關問題