问WebSql不适用于此表单的输入
EN

Stack Overflow用户

提问于 2021-07-14 16:00:10

回答 1查看 12关注 0票数 0

我不确定为什么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

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-14 16:39:40

如果在初始事务中定义click处理程序，那么一切都应该正常，因为定义Insert函数的作用域现在是相同的。我修改了SQL，在部门(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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68374203

复制

相似问题

问WebSql不适用于此表单的输入
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问WebSql不适用于此表单的输入EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问WebSql不适用于此表单的输入
EN