Fatal编程技术网
  • javascript/
  • Javascript 如何将表单数据提交到html5本地数据库

Javascript 如何将表单数据提交到html5本地数据库

javascript jquery html

Javascript 如何将表单数据提交到html5本地数据库,javascript,jquery,html,local-database,Javascript,Jquery,Html,Local Database,我正在编写一个非常小的应用程序，在iPod上运行。它是为了存储基于我输入的训练的信息。存储将是html5本地数据库。我的问题是如何从包含多个练习的表单中获取信息，并为每个练习创建新记录？html是： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>lower</title>

我正在编写一个非常小的应用程序，在iPod上运行。它是为了存储基于我输入的训练的信息。存储将是html5本地数据库。我的问题是如何从包含多个练习的表单中获取信息，并为每个练习创建新记录？html是：

<!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>
因此，我想要的是填写此表单上的所有字段，然后点击底部的提交按钮，为我的每个练习插入一条新记录

由于您要为iOS（iPod）制作一个应用程序，您通常会在objective C中进行此操作，但是要在HTML5中进行此操作，您应该考虑一个好的框架。看看Phonegap。他们甚至有一个可以让你快速起跑的方法。另一种选择是，尽管它不是完全免费的

如果您想将表单数据保存到您的手机中，您需要考虑使用轻量级数据库或平面文件存储。这里是建议的链接

例如：

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


联系方式
//等待PhoneGap加载
//
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
//PhoneGap已经准备好了
//
函数ondevicerady（）{
var db=window.openDatabase（“test”，“1.0”，“test db”，1000000）；
}
例子
开放数据库
如果你想要一本关于iphone、ipod和iOS开发的好书，我会推荐这本书，这是一本很棒的第一次阅读的书，它会带你走过苹果开发人员帐户设置的所有繁文缛节

祝你好运，我建议用phonegap和iOS标签重新发布你的问题，以获得更多曝光

那么你是说像这样的答案是唯一的办法？基本上是为每个练习创建一个新的数组和一个新的insert语句？你说你是为一个ipod制作这个应用程序，我想既然你是用HTML5制作的，就有一个中间应用程序可以将这个应用程序制作成IOS。也许你正在使用或？更多的信息将有助于回答你的问题。我还没有到那一点，所以我还没有决定，在我继续之前我需要决定吗？我只是想让它工作，然后我会考虑我需要做什么来把它放在我的iPod上。抱歉，如果这是含糊不清的，这是我第一次接触这种东西。 
 <!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>