So the idea of this website is that when you press the button it deletes the corresponding row from the database. However, the issue with my code is that after the first press the button fills the id variable and then executes the php on the next press. How can I avoid this and get he php to fit and execute the php on the first press of the button?
Included is the HTML page with the php embedded:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>Untitled Document</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="container-fluid">
<h2 style"text-align:center";>Please enter the item you want to add to the list below </h2>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
$sql = "CREATE DATABASE myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "CREATE TABLE freezerinventory (
id INT AUTO_INCREMENT PRIMARY KEY,
item VARCHAR(30) NOT NULL,
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
if(isset($_POST['itemx']))
{
$itemvar = $_POST["itemx"];
$sql = "INSERT INTO freezerinventory (item)
VALUES ('$itemvar')";
$add = mysqli_query($conn, $sql);
}
else {
$sql = "";
}
mysqli_close($conn);
?>
<form action="<?=$_SERVER['PHP_SELF'];?>" class="needs-validation" novalidate method="post">
<div class="form-group">
<label for="uname"></label>
<input type="text" class="form-control" id="itemx" placeholder="Enter an item for the freezer here" name="itemx" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<button id = "SubmitButton" name = "SubmitButton" type="button submit" class="btn btn-primary">Add to list</button>
</form>
</div>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
$aVar = mysqli_connect('localhost','root','','myDB');
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM freezerinventory";
$result = mysqli_query($aVar, $sql);
echo "<table><tr>
<th>Item name</th>
<th>Date added</th>
<th>remove</th>
</tr> ";
while($row = mysqli_fetch_array($result)) {
echo "<tr><td>" . $row['item'] . "</td><td>" . $row['reg_date'] . "</td><td><form action='' method='POST'>
<div class= 'input-group'> <div class='input-group-append'>
<button class='btn btn-danger' onclick='deleteitem()' id = 'delete' type='submit'>Remove</button>
<input type='hidden' name='id' value=".$row['id']." />
</div></div>
</form></td></tr>";
}
echo "</table>";
?>
<script>
function deleteitem (e) {
e.preventDefault();
<?php
$id = $_POST['id'];
$delete = "DELETE FROM freezerinventory WHERE id=$id";
$del = mysqli_query($conn, $delete);
?>
}
else {
}
</script>
<script>
function myFunction() {
confirm("I am an alert box!");
}
</script>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>