0

我正在尝试将各种选择列表/单选按钮的总值插入 websql 数据库。初始表单正确插入，但是一旦我尝试添加总变量，一切都会中断。我以为我可以使用 getElementByID("total") 并将其添加到表中，但这不起作用。任何想法都非常感谢。（下面的代码在添加似乎破坏它的总 var 更新之前也显示了 db 脚本）

    <div id="content">
    <h1> 
         webSQL example
    </h1>
    <div id="form">
        <form id="myRecord">
            <table class="form">
                <tr><td class="label"> Date </td><td> <input type="date" name="date" /> </td></tr>
                <tr><td class="label"> Name </td><td> <input type="text" name="name" /> </td></tr>
                <tr><td class="label"> Number </td><td> <input type="number" name="number" /> </td></tr>
               <tr><td> <label for="select1">Select characteristics present:</label></td></tr>
                <select name="optionsNew" id="select2" multiple="multiple" data-native-menu="false">
                    <option>Click for Options:</option>
                    <option value="value1" data-value="1">one</option>
                    <option value="value2" data-value="1">two</option>
                    <option value="value3" data-value="1">three</option>
                    <option value="value4" data-value="1">four</option>

                </select>
                <tr><td colspan="2" class="button">
                    <input id="formSubmit" type="button" name="goButton" value="Add" onClick="javascript:dbGo()" />
                </td></tr>
            </table>

        <input id="inputAction" type="hidden" name="action" value="add" />
        <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </div>

    <p id="rcp" class="message">
        There are <span id="rowCount">_</span> rows in the table.
        <input type="button" value="Empty" onClick="javascript:clearDB()" />
    </p>
 <script>
        $(function() {
    $("select[name='optionsNew']").change(function() { updateTotal(); });
    updateTotal();
});

function updateTotal() {
    var newTotal = 0;
    $("select[name='optionsNew'] option:selected").each(function() {
        newTotal += parseFloat($(this).data('value'));
    });
    $("#total").text("Total: " + newTotal);
}
</script>
        <div id="total">Total : </div>
    <div id="results">
    </div>
</div>
         </div>
            </section>

和 db 帮助脚本：

// JavaScript Document

 var db = prepareDatabase();
        var createSQL = 'CREATE TABLE IF NOT EXISTS myDB (' +
                'id INTEGER PRIMARY KEY,' +
                'date TEXT,' +
                'name TEXT,' +
                'number REAL' +

            ')';

        // Check if this browser supports Web SQL
        function getOpenDatabase() {
            try {
                if( !! window.openDatabase ) return window.openDatabase;
                else return undefined;
            } catch(e) {
                return undefined;
            }
        }

        // Open the Web SQL database
        function prepareDatabase() {
            var odb = getOpenDatabase();
            if(!odb) {
                dispError('Web SQL Not Supported');
                return undefined;
            } else {
                var db = odb( 'myDB1', '1.0', ' Database Test', 5 * 1024 * 1024 );
                db.transaction(function (t) {
                    t.executeSql( createSQL, [], function(t, r) {}, function(t, e) {
                        alert('create table: ' + e.message);
                    });
                });
                return db;
            }
        }


 // add or update rows in the table
        function dbGo() {
            if(errorMessage) return;
            var f = element('myRecord');
            var action = f.elements['inputAction'].value;
            var date = f.elements['date'].value;
            var name = f.elements['name'].value;
            var number = f.elements['number'].value;
            <!--var total = document.getElementById("total").value;
-->
            <!--var total = f.elements['total'].value;-->

            var key = f.elements['key'].value;

          // handle either "add" or "update" action
    switch(action) {
    case 'add': 
        if(! (date || name || number)) break;
          db.transaction( function(t) { t.executeSql(' INSERT INTO myDB (date, name, number ) VALUES ( ?, ?, ?) ',
                [ date, name, number ]
            );
        }, function(t, e){ alert('Insert row: ' + e.message); }, function() {
            resetmyRecord();
        });
        break;
    case 'update':
        if(! (date || name || number)) break;
        db.transaction( function(t) {
            t.executeSql(' UPDATE myDB SET date = ?, name = ?, number = ?  WHERE id = ?',
                [ date, name, number , key ]
            );
        }, function(t, e){ alert('Update row: ' + e.message); }, function() {
            resetmyRecord();
        });
        break;
  }
            dispResults();
        }
4

1 回答 1

0

Got it, just bad create statement, and using .html works fine.

var db = prepareDatabase();
        var createSQL = 'CREATE TABLE IF NOT EXISTS myDB (' +
                'id INTEGER PRIMARY KEY,' +
                'date TEXT,' +
                'name TEXT,' +
                 'total INTEGER,' +
                'number REAL' +


            ')';

 function dbGo() {
            if(errorMessage) return;
            var f = element('myRecord');
            var action = f.elements['inputAction'].value;
            var date = f.elements['date'].value;
            var name = f.elements['name'].value;
            var number = f.elements['number'].value;
        var total=$('#total').html();
            var key = f.elements['key'].value;


    switch(action) {
    case 'add': 
        if(! (date || name || number || total )) break;
于 2012-07-08T20:00:36.740 回答