0
websql 데이터베이스에 다양한 선택 목록/라디오 버튼의 합계 값을 삽입하려고합니다. initital 양식이 올바르게 삽입되지만 총 변수를 추가하면 모든 것이 깨집니다. 나는 그냥 getElementByID ("total")을 사용하여 테이블에 추가 할 수 있다고 생각했지만 그다지 효과가 없었다. 아이디어가 많이 감사합니다.websql 데이터베이스에 자바 스크립트 값을 삽입하십시오.
<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 도우미 스크립트 (아래 코드는 그것을 깰 것으로 보인다 총 VAR 업데이트를 추가하기 전에 또한 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();
}