JSFiddle - React, Tailwind, and code Playground

by Johan Preynat

HTML

<label for="username"> Username   :</label>
<label for="pass"> Password :</label>
<input name="password" type="password" id="pass" placeholder="your password" size="20"  maxlength="20"  width="20" />
<label for="firstname"> Firstname   :</label>
<input type="text" name="firstname" id="firstname"  placeholder="your full name"/>
<label for="lastname"> Lastname  :</label>
<input type="text" name="lastname" id="lastname"  placeholder="your last name"/>
<label for="hobby"> Hobby                :    </label>
<input type="text" name="hobby" id="hobby" placeholder="your hobby" /><br ><br >
<label for="email"> Email :</label>
<input type="text" name="email" id="email"  placeholder="Your email address"/><br > 
   <br >
<a href="#" class="ui-btn ui-btn-inline ui-corner-all ui-btn-b "id="update" type="submit" >Update</a>

JavaScript

var updateStatement = "UPDATE login SET username=?,password=?,firstname = ?, lastname = ? ,hobby=?,email=? WHERE id=?";
var db=window.openDatabase('MYFORM','1.0','MYFORM',200000);

$(document).ready(function() {
    initDatabase();
    $("#update").click(updateRecord);
});


function initDatabase() {  // Function Call When Page is ready.
    try {
        if (!window.openDatabase) {  // Check browser is supported SQLite or not.
            alert('Databases are not supported in this browser.');
        }
        else {
            showRecords();
        }
    } catch (e) {
        if (e == 2) {
            // Version number mismatch.
            console.log("Invalid database version.");
        } else {      
            console.log("Unknown error " + e + ".");
        }

    return;
    }
}

function updateRecord() { // Get id of record . Function Call when Delete Button Click..
    
    var usernamenew = $('input:text[id=username]').val().toString();
    var passwordnew = $('input:password[id=pass]').val().toString();
    var firstnamenew = $('input:text[id=firstname]').val().toString();
    var lastnamenew = $('input:text[id=lastname]').val().toString();
    var hobbynew = $('input:text[id=hobby]').val().toString();
    var emailnew= $('input:text[id=email]').val().toString();
    var useridnew = $("#id").val();

    db.transaction(function (tx) { 
        tx.executeSql(updateStatement,
                     [usernamenew,
                      passwordnew,
                      firstnamenew,
                      lastnamenew,
                      hobbynew,
                      emailnew,
                      Number(useridnew)],
                      loadAndReset,
                      onError)
    });
}