pAxrXwp2

1	//This html is to create a form in which it will make the system viewable and interactable with the user
2	<form style="margin-top:60px;margin-bottom:20px;"onsubmit="SaveDB(); return false;">
3        <hr>
4        <label>Name: </label><input type="text" id="Name"></input>
5        <label>Email: </label><input type="text" id="Email"></input>
6        <br/>
7        <textarea rows="5" cols="100" id="Comment"style="margin-top:25px;"></textarea>
8        <br/>
9        <input type="submit" value="Submit" id="Submit"></input>
10      </form>
11
12	
13    <script>
14	 
15      var EmailPattern=new RegExp("[a-z]{1,}\.[a-z]{1,}\@[a-z]{1,}\.[a-z]{2,}|[a-z]{1,}\@[a-z]{1,}\.[a-z]{2,}");
16
17      var db = null;
18
19      try{
20        db = openDatabase('CommentDB', '1.0', 'Comment DB', 2 * 1024 * 1024);
21      }catch(ignore){
22        console.error("local DB is not supported");
23      }
24
25      function createLocalDB(){
26        if(db != null){
27          db.transaction(
28            function (transaction) {
29              transaction.executeSql(
30                'CREATE TABLE IF NOT EXISTS User(Name TEXT NOT NULL , Email TEXT NOT NULL PRIMARY KEY, Comment TEXT NOT NULL);',
31                [],
32                function dataHandler(transaction, results){},
33                function errorHandler(transaction, error){
34                  console.error("Error creating table: " + error.code + ": " + error.message);
35                }
36              );
37            }
38          );
39        }
40      }
41      function SaveDB(){
42        if(db != null&&document.getElementById("Name").value!=""&&document.getElementById("Email").value!=""&&document.getElementById("Comment").value!=""){
43
44
45          var name=document.getElementById("Name").value;
46          var email=document.getElementById("Email").value;
47          var comment=document.getElementById("Comment").value;
48          if(!EmailPattern.test(email)){
49            alert("Invalid email");
50            return;
51          }
52          alert("Comment is submited");
53          db.transaction(
54            function (transaction) {
55              transaction.executeSql(
56                'INSERT INTO User (Name, Email, Comment) VALUES (?, ?, ?);',
57                [name,email,comment],
58                function dataHandler(transaction, results){},
59                function errorHandler(transaction, error){
60                  console.error("Error inserting into table: " + error.code + ": " + error.message);
61                }
62              );
63            }
64          );
65          document.getElementById("Name").value="";
66          document.getElementById("Email").value="";
67          document.getElementById("Comment").value="";
68        }else{
69          alert("Please fill in all the fields");
70          return;
71        }
72        return -1;
73      }
74      function DisplayDB(){
75        if(db != null){
76          db.transaction(
77            function (transaction) {
78              //transaction.executeSql('DROP TABLE ' +'User');
79              transaction.executeSql(
80                'select * from User;',
81                [],
82                function processResult(transaction, results){
83
84
85                  var html="";
86                  for(var i=0;i<results.rows.length;i++){
87                    html+="<h4>"+ results.rows[i].Name+": "+ "</h4>";
88
89                    html+="<textarea rows='5' cols='100' readOnly=true>"+results.rows[i].Comment+"</textarea>";
90                    //console.log(results.rows[i]);
91                  }
92
93                  document.getElementById("Comments").innerHTML=html;
94
95                },
96                function errorHandler(transaction, error){
97                  console.error("Error reading records: " + error.code + ": " + error.message);
98                }
99              );
100            }
101          );
102        }
103      }
104
105    </script>