Блог

Главная - Вопросы по программированию - WebSQL не работает для этой формы с входными данными

WebSQL не работает для этой формы с входными данными

#html

Вопрос:

Я не уверен, почему 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>

Комментарии:

1. Insert Метод определен в транзакции, поэтому область действия отличается от области действия кнопки, которая пытается его вызвать

Ответ №1:

Если вы определяете 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>
Метки: