webSQL-read/read.html at master · Zorig/webSQL-read · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form id="add" onsubmit="return false;">
      <input type="text" name="student_id" id="student" value="" autofocus maxlength="10">
      <button type="submit" style="display: none;">++</button>
  </form>
  <div class="time-code">
    <ul id="list">
      <li></li>
    </ul>
  </div>
  <script src="jquery-1.9.1.min.js"></script>
  <script>

  $(function(){
    $('#add button[type="submit"]').click(function(){
      var val = $('#add input[name="student_id"]').val();
      var mytime = $.now();
      $('#add input[name="student_id"]').val('');
      $('#add input[name="student_id"]').focus();
      //$('#list').html('<li> '+val+ '-' +mytime'</li>');
      console.log(val)
      })
  });

  if (window.openDatabase){
        //Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MB
        var mydb = openDatabase("Testdb", "0.1", "Testing  Database", 1024 * 1024);

         //create the  table using SQL for the database using a transaction
         mydb.transaction(function(t){
           t.executeSql("CREATE TABLE IF NOT EXISTS mydb (id INTEGER PRIMARY KEY, student VARCHAR(50))");
      });

  }else{
    alert("WebSQL is not supported by your browser!");
  }

  //function to add the code

  function addDraft() {
      //check to ensure the mydb object has been created
      if (mydb) {
          //get the values of the make and model text inputs
        var student= val;

          //Test to ensure that the user has entered both a make and model
          if (student !== "") {
              //Insert the user entered details into the cars table, note the use of the ? placeholder, these will replaced by the data passed in as an array as the second parameter
              mydb.transaction(function(t) {
                  t.executeSql("INSERT INTO mydb (student) VALUES (?, ?, ?)", [student]);
                  outputDrafts();
              });
          } else {
              alert("You must enter a make and model!");
          }
      } else {
          alert("db not found, your browser does not support web sql!");
      }
  }

  </script>
</body>
</html>