时间戳

首页 > 解决方案 > WebSql 不适用于此表单的输入

html - WebSql 不适用于此表单的输入

问题描述

我不确定为什么 WebSql 不适用于这个 html 代码。我希望将输入的值保存到 WebSql 中，单击保存时，需要刷新页面才能将数据存储在数据库中。但它没有像我想要的那样工作

这是html代码

<!DOCTYPE html>
<html>

<head>
    <title>Open DataBase</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>

        var Database_Name = 'MyDatabase';
        var Version = 1.0;
        var Text_Description = 'My First Web-SQL Example';
        var Database_Size = 2 * 1024 * 1024;
        var dbObj = openDatabase(Database_Name, Version, Text_Description, Database_Size);
        dbObj.transaction(function (tx) {

            tx.executeSql('CREATE TABLE IF NOT EXISTS Employee_Table (id unique, Name, Location,did)');
        function Insert() {

                var id = document.getElementById("tbID").value;
                var name = document.getElementById("tbName").value;
                var location = document.getElementById("tbLocation").value;
                var did = document.getElementById("tbLdept").value;
                dbObj.transaction(function (tx) {
                    tx.executeSql('insert into Employee_Table(id, Name, Location,did) values(' + id + ',"' + name + '","' + location + '",' + did + ')');
                  });
        }
    </script>
</head>
<body>
    <p id="hh"></p>
    <form id="frm1">
        <table id="tblinsert">
            <tr>
                <td>ID:</td>
                <td id="tdorginal"><input type="text" id="tbID" /><span style="color:red">*ID must be unique</span></td>
                <td id="tdid" style="display:none">
                    <select id="ddlid" onchange="myFunction()"></select>
                </td>
            </tr>
            <tr id="rowName">
                <td>Name:</td>
                <td><input type="text" id="tbName" /></td>

            </tr>
            <tr id="rowLocation">
                <td>Location:</td>
                <td><input type="text" id="tbLocation" /></td>
            </tr>

            <tr id="rowdept">
                <td>Dept:</td>
                <td><input type="text" id="tbLdept"></td>
            </tr>

            <tr>

            </tr>
        </table>
    </form>
    <br />
    <button id="btnInsert" onclick="Insert()" style="color:green;display:block">Save</button>

标签： html

解决方案

如果您click在初始事务中定义处理程序，一切都应该没问题，因为Insert定义函数的范围现在是相同的。我修改了 SQL 以在 Department ( ) 周围添加引号，did因为我认为这将是文本 - 尽管这不一定是真的。我测试了以下，它工作正常。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script>
            document.addEventListener('DOMContentLoaded',(e)=>{
            
                var Database_Name = 'MyDatabase';
                var Version = 1.0;
                var Text_Description = 'My First Web-SQL Example';
                var Database_Size = 2 * 1024 * 1024;

                var dbo = openDatabase( Database_Name, Version, Text_Description, Database_Size );

                dbo.transaction(function(tx){

                    tx.executeSql('CREATE TABLE IF NOT EXISTS Employee_Table ( id unique, Name, Location, did )');
                    
                    function Insert(){
                        var id = document.getElementById("tbID").value;
                        var name = document.getElementById("tbName").value;
                        var location = document.getElementById("tbLocation").value;
                        var did = document.getElementById("tbLdept").value;
                        
                        dbo.transaction(function(tx){
                            tx.executeSql('insert into Employee_Table( id, Name, Location, did ) values(' + id + ',"' + name + '","' + location + '","' + did + '")');
                        });
                    };
                    
                    document.querySelector('button[data-name="save"]').addEventListener('click',Insert)
                });
            })
        </script>
    </head>
    <body>
    
        <p id="hh"></p>
        
        <form id="frm1">
            <table id="tblinsert">
                <tr>
                    <td>ID:</td>
                    <td id="tdorginal">
                        <input type="text" id="tbID" value=23 />
                        <span style="color:red">*ID must be unique</span>
                    </td>
                    <td id="tdid" style="display:none">
                        <select id="ddlid" onchange="myFunction()"></select>
                    </td>
                </tr>
                <tr id="rowName">
                    <td>Name:</td>
                    <td><input type="text" id="tbName" value='Terl 14' /></td>

                </tr>
                <tr id="rowLocation">
                    <td>Location:</td>
                    <td><input type="text" id="tbLocation" value='Planet Zarg' /></td>
                </tr>

                <tr id="rowdept">
                    <td>Dept:</td>
                    <td><input type="text" id="tbLdept" value='Asteroid Collision Counter' /></td>
                </tr>

                <tr>

                </tr>
            </table>
        </form>
        
        <br />
        
        <button data-name='save' style="color:green;display:block">Save</button>
    </body>
</html>

推荐阅读