Background
- I am making a transaction recording application in which you add transactions and
PHP
saves it to the MySQL
database.
PHP
echos out the transactions into a table.
- The table has filters.
- One of the columns has a checkbox for a transaction deleting form and one radio button for modifying transactions.
Here are some screenshots:
Table Example
Filters
Actions
Now when I print the table, it is all fine!
When I click the delete/modify buttons, they are also fine.
But when I print the table, and then delete or modify (or check all), nothing happens. I checked the console but nothing is there either. I don't know why...
Here is my Javascript
:
filters.js
function actions()
{
div = document.getElementById("actions");
if (div.style.display == 'none')
{
div.style.display = 'block';
}
else
{
div.style.display = 'none';
}
}
function filters()
{
div = document.getElementById("filters");
if (div.style.display == 'none')
{
div.style.display = 'block';
}
else
{
div.style.display = 'none';
}
}
function filter()
{
// Declare variables
var des,
date,
table,
tr,
desc,
dater,
amount,
merchant,
type,
source,
i;
des = document.getElementById("des").value.toUpperCase();
date = document.getElementById("date").value;
$ = document.getElementById("amount").value.toUpperCase();
merch = document.getElementById("merchant").value.toUpperCase();
typef = document.getElementById("type").value.toUpperCase();
sourcef = document.getElementById("source").value.toUpperCase();
table = document.getElementById("table");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for ( i = 0; i < tr.length; i++)
{
desc = tr[i].getElementsByTagName("td")[1];
dater = tr[i].getElementsByTagName("td")[2];
amount = tr[i].getElementsByTagName("td")[3];
merchant = tr[i].getElementsByTagName("td")[4];
type = tr[i].getElementsByTagName("td")[5];
source = tr[i].getElementsByTagName("td")[6];
if (desc && dater && amount && merchant && type && source)
{
desval = desc.textContent || desc.innerText;
daval = dater.textContent || dater.innerText;
amoval = amount.textContent || amount.innerText;
merval = merchant.textContent || merchant.innerText;
tval = type.textContent || type.innerText;
sval = source.textContent || source.innerText;
filtered = desval.toUpperCase().indexOf(des) > -1 && daval.indexOf(date) > -1 && amoval.indexOf($) > -1 && merval.indexOf(merch) > -1 && tval.indexOf(typef) > -1 && sval.indexOf(sourcef) > -1;
if (filtered)
{
tr[i].style.display = "";
}
else
{
tr[i].style.display = "none";
}
}
}
}
$('#da').submit(function(event)
{
event.preventDefault();
//this will prevent the default submit
if (confirm("Are You Sure You Really Want To Delete All The Transactions?"))
{
$(this).unbind('submit').submit();
}// continue the submit unbind preventDefault
else
{
console.log("User Didn't Delete All The Transactions");
}
});
In Document:
$( document ).ready(function() {
$('#check-all').click(function() {
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function() {
$("input:checkbox").attr('checked', false);
});
var editid = $('#an').val();
var ms = $('#ms');
var ds = $('#ds');
var delete123456 = $('#delete');
var print = $('#print');
$(print).click(pdf)
$(ds).click(delete123)
function delete123() {
if (anyCheckbox()) {
$('#delete').submit()
} else {
alert('Please Choose Some Transactions To Be Deleted First!')
}
}
$(ms).click(modify123)
function modify123() {
if (anyRadio()) {
editid = $('input[name="id"]').val();
loc = "http://localhost/Projects/tests/modify.php?id=" + editid;
window.location.replace(loc);
} else {
alert('Please Choose A Transaction To Be Modifyed First!')
}
}
var restorepage = document.body.innerHTML;
function pdf() {
//$('.toper').remove();
document.querySelectorAll(".toper").forEach(el => el.remove())
document.querySelectorAll("tr").forEach(el => el.deleteCell(0))
window.print();
document.body.innerHTML = restorepage;
}
function anyCheckbox() {
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++)
if (inputElements[i].type == "checkbox")
if (inputElements[i].checked)
return true;
return false;
}
function anyRadio() {
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++)
if (inputElements[i].type == "radio")
if (inputElements[i].checked)
return true;
return false;
}
});
My PHP
file if it helps:
<!DOCTYPE html>
<html>
<head>
<title>View Transactions</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="jquery.js"></script>
<script src='filters.js'></script>
<script>
$( document ).ready(function() {
$('#check-all').click(function() {
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function() {
$("input:checkbox").attr('checked', false);
});
var editid = $('#an').val();
var ms = $('#ms');
var ds = $('#ds');
var delete123456 = $('#delete');
var print = $('#print');
$(print).click(pdf)
$(ds).click(delete123)
function delete123() {
if (anyCheckbox()) {
$('#delete').submit()
} else {
alert('Please Choose Some Transactions To Be Deleted First!')
}
}
$(ms).click(modify123)
function modify123() {
if (anyRadio()) {
editid = $('input[name="id"]').val();
loc = "http://localhost/Projects/tests/modify.php?id=" + editid;
window.location.replace(loc);
} else {
alert('Please Choose A Transaction To Be Modifyed First!')
}
}
var restorepage = document.body.innerHTML;
function pdf() {
//$('.toper').remove();
document.querySelectorAll(".toper").forEach(el => el.remove())
document.querySelectorAll("tr").forEach(el => el.deleteCell(0))
window.print();
document.body.innerHTML = restorepage;
}
function anyCheckbox() {
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++)
if (inputElements[i].type == "checkbox")
if (inputElements[i].checked)
return true;
return false;
}
function anyRadio() {
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++)
if (inputElements[i].type == "radio")
if (inputElements[i].checked)
return true;
return false;
}
});
</script>
</head>
<body>
<?php
$conn = mysqli_connect('localhost', 'admin', 'myphpadmin', 'tests');
// Run the query.
$result = mysqli_query($conn, "SELECT Id, Description, Date, Amount, Merchant, Type, Sub, Source FROM main");
$num = mysqli_num_rows($result);
// Get the result in to a more usable format.
$query = array();
function display($result, $conn)
{
while ($query[] = mysqli_fetch_assoc($result));
array_pop($query);
//echo '<div id = "container" style = "width: 550px; height: 400px; margin: 0
// auto"></div>';
echo "<div id='top'>";
echo "<button onclick='actions()'>Actions</button> <button onclick='filters()'>Filters</button><br>";
echo "<div style='display: none' id='actions'>";
echo '<fieldset><legend>Actions</legend>';
#echo "<input type='text' id='an'>";
echo "<input type='submit' value='Modify Transaction' id='ms'>";
echo "<br><br>";
echo "<input type='submit' value='Delete Transactions' id='ds'>";
echo " <button id='check-all'>Check All</button> 
<button id='uncheck-all'>Uncheck All</button> ";
echo "</fieldset><br></div>";
echo "<div id='filters' style='display: none;'>";
echo "<fieldset><legend>Filters</legend>";
echo "<input type='text' id='des' placeholder='Description'> <input type='text' id='date' placeholder='Date'> ";
echo "<input type='number' id='amount' placeholder='Amount' step='0.01' min='0'> <input type='text' id='merchant' placeholder='Merchant'> ";
echo "<input type='text' id='type' placeholder='Type'> <input type='text' id='source' placeholder='Source'> <input type='submit' value='Apply Filters' onclick='filter()'>";
//echo " <input type='reset' value='Clear Filters' onclick='reset()'>";
echo '</fieldset></div><br>';
echo "</div>";
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…