Fix HTML & JavaScript for Azure SQL with browser form and table
Budget: $10 – $30 AUD
Code assistance in VS Code with Table creation in AZURE SQL database.
This is the part of the HTML write. However, when I open browser the form fields are present but the create table function and display table results are not working as expected.
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web SQL Database with HTML and Javascript</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/Javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form>
<fieldset>
<label for="item">Item Name</label>
<input type="text" class="form-control" name="" id="item">
<label for="quantity">Quantity</label>
<input type="number" class="form-control" id="quantity" name="">
<button type="button" id="insert" class="btn btn-success">Insert</button>
<button type="button"id="create" class="btn btn-success">Create Table</button>
<button type="button"id="remove" class="btn btn-danger">Delete Table</button>
<button type="button"id="list" class="btn btn-success">Fetch Record</button>
</fieldset>
</form>
<hr>
<h4>Record</h4>
<table class="table table-bordered table-hover"></table>
</div>
</div>
<script type="text/javascript">
var db=openDatabase("spdevgroup1-db")
$(function(){
$("#create").click(function(){
db.transaction(function(transaction){
var sql="CREATE TABLE items "+
"(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,"+
"item VARCHAR(100) NOT NULL,"+
"quantity INT(5) NOT NULL)";
transaction.executeSql(sql,undefined,function(){
alert("Table is created successfully");
},function(){
alert("Table is already being created");
})
});
});
</body>
</html>
This is the part of the HTML write. However, when I open browser the form fields are present but the create table function and display table results are not working as expected.
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web SQL Database with HTML and Javascript</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/Javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form>
<fieldset>
<label for="item">Item Name</label>
<input type="text" class="form-control" name="" id="item">
<label for="quantity">Quantity</label>
<input type="number" class="form-control" id="quantity" name="">
<button type="button" id="insert" class="btn btn-success">Insert</button>
<button type="button"id="create" class="btn btn-success">Create Table</button>
<button type="button"id="remove" class="btn btn-danger">Delete Table</button>
<button type="button"id="list" class="btn btn-success">Fetch Record</button>
</fieldset>
</form>
<hr>
<h4>Record</h4>
<table class="table table-bordered table-hover"></table>
</div>
</div>
<script type="text/javascript">
var db=openDatabase("spdevgroup1-db")
$(function(){
$("#create").click(function(){
db.transaction(function(transaction){
var sql="CREATE TABLE items "+
"(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,"+
"item VARCHAR(100) NOT NULL,"+
"quantity INT(5) NOT NULL)";
transaction.executeSql(sql,undefined,function(){
alert("Table is created successfully");
},function(){
alert("Table is already being created");
})
});
});
</body>
</html>
Related categories:
JavaScript
SQL
CSS
Azure
HTML
jQuery / Prototype
Bootstrap
Web Development
jQuery
Database Management