I am trying to get my Javascript variables passed back to my PHP function. I am aware that I need to use the GET method but am unsure how to implement it here.
My PHP Function:
function showRailroadSchedule()
{
global $conn;
global $thisPHP;
$sql = "SELECT * FROM trip";
$result = $conn->query($sql);
if ($result->num_rows > 0)
{
echo '<div class="limiter">';
echo '<div class="container-table100">';
echo '<div class="wrap-table100">';
echo '<div class="table100 ver2 m-b-110">';
echo "<h2>Available Trip Reservations</h2>";
echo '<table data-vertable="ver2" id="tableMain">';
echo "<thead><tr class='row100 head'><th>Trip ID</th><th>Arrival Time</th><th>Departure Time</th><th>Train ID</th><th>Arrival Station</th><th>Track ID</th><th>Departure Station</th></tr></thead>";
while($row = $result->fetch_assoc())
{
echo '<tbody><tr class="row100">';
$TRIP_ID = $row["TRIP_ID"];
echo
' <td class="column100 column2" data-column="column2"> ' . $row["TRIP_ID"] .
' </td> <td class="column100 column3" data-column="column3"> ' . $row["TRIP_ARR_TIME"] .
' </td> <td class="column100 column4" data-column="column4"> ' . $row["TRIP_DEP_TIME"] .
' </td> <td class="column100 column5" data-column="column5"> ' . $row["TRAIN_ID"] .
'</td> <td class="column100 column6" data-column="column6"> ' . $row["TS_ARRIVAL"] .
'</td> <td class="column100 column7" data-column="column7"> ' . $row["TRACK_ID"] .
'</td> <td class="column100 column8" data-column="column8"> ' . $row["TS_DEPARTURE"] .
'</td> ';
echo "<form action='{$thisPHP}' method='post' style='display:inline' >";
echo "<input type='hidden' name='cID' value='{$cID}'>";
echo "</td></tr></tbody>";
}
echo "<tfoot><tr><td>'$_GET[w1]'</td><td>Arrival Time</td><td>Departure Time</td><td>Train ID</td><td>Arrival Station</td><td>Track ID</td><td>Departure Station</td></tr></tfoot>";
echo "</table>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
else
{
echo "0 results";
}
}
My Javascript Function:
<script>
$(document).ready(function() {
//=================================================================
//click on table body
//$("#tableMain tbody tr").click(function () {
$('#tableMain tbody').on('click', 'tr', function() {
//get row contents into an array
var tableData = $(this).children("td").map(function() {
return $(this).text();
}).get();
var tripid = tableData[0];
var arrivaltime= tableData[1];
var departuretime = tableData[2];
var trainid = tableData[3];
var arrivalstation = tableData[4];
var trackid = tableData[5];
var departurestation = tableData[6];
//var arrivaltime = tableData[1] + '*' + tableData[2] + '*' + tableData[3] + '*' + tableData[4] + '*' + tableData[5] + '*' + tableData[6] + '*' + tableData[7];
alert(tripid);
window.location.href = "railroadutils.php?w1=" + tripid;
});
$("#thebutton").click(function() {
$('#tableMain > tbody').append('<tr class="datarow"><td>11111</td><td>22222</td><td>33333</td><td>44444</td><td>55555</td></tr>')
})
});
</script>
After a row is clicked, the page refreshes and a blank screen appears, however the link does have the w1 variable in it. I am just wanting to display this w1 variable inside my table.
Thank you in advance!
Without seeing the rendered HTML, it's hard to see what's happening but I think this is your issue:
echo "<tfoot><tr><td>'$_GET[w1]'</td><td>Arrival Time</td><td>Departure Time</td><td>...
^^^^^^^^^^^
I think you need to concatenate it like you did the other echo statements like this:
echo "<tfoot><tr><td>'" . $_GET[w1] . "'</td><td>Arrival Time</td><td>Departure Time</td><td>...
^^^^^^^^^^^^^^^^^^
Related
my code is working as I would like, the principle is to do a search in the table and according to what the user inputs, I will show the attributes in the already designed table in html page. To better understanding, I'll put a picture of the output of my search.
output of the search
since this code has printf I have no idea what is suitable to output the data into my table, i have 12 attributes selected and I am using ajax and javascript
index.html (just part of that)
<br><br>
<!-- Search box. -->
<form method="post" action="index.php">
<input type="text" id="search" name="search" required placeholder="Search for an item" /><input type="submit" value="LOAD"/>
<br></form>
<b>Ex: </b><i>Bread, Milk, Egg, etc or SKU</i>
<br />
<!-- Suggestions will be displayed in below div. -->
<div id="display"></div>
<table id="itemsTable"> <tr> <th>Quantity</th>
<th>Item</th>
<th>SKU</th>
<th>Item Name</th>
<th>Item Price</th>
<th>Subtotal</th>
<th>Cartons Scanned</th>
<th>Individually Scanned</th>
<th>Current Inventory</th>
<th>Location Selected</th>
<th>Image</th>
<th>Edit</th>
</tr><tr><td>
<?php
if (isset($_POST['search'])) {
// SEARCH FOR ITEM NAME
require "2-search.php";
// DISPLAY RESULTS
if (count($results) > 0) {
foreach ($results as $r) {
printf("<div>%s - %s - %s - %s - %s - %s - %s - %s - %s - %s - %s- %s</div>", $r['quantity'], $r['item'], $r['sku'], $r['item_name'], $r['item_price'], $r['subtotal'], $r['cartons_scanned'], $r['ind_scanned'], $r['cur_inventory'], $r['location_sel'], $r['image'], $r['edit']);
}
} else {
echo "No results found";
}
}
?>
</td></tr></table>
<br><br><br>
2-search.php
<?php
// (1) DATABASE CONFIG
// ! CHANGE THESE TO YOUR OWN !
define('DB_HOST', 'localhost');
define('DB_NAME', 'create_order_db');
define('DB_CHARSET', 'utf8');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
// (2) CONNECT TO DATABASE
try {
$pdo = new PDO(
"mysql:host=" . DB_HOST . ";charset=" . DB_CHARSET . ";dbname=" . DB_NAME,
DB_USER, DB_PASSWORD, [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false ]
);
} catch (Exception $ex) {
die($ex->getMessage());
}
// (3) SEARCH
$stmt = $pdo->prepare("SELECT quantity,item,sku,item_name,item_price,subtotal,cartons_scanned,ind_scanned,cur_inventory,location_sel,image,edit FROM `item_new` WHERE `item_name` LIKE ? OR `sku` LIKE ?");
$stmt->execute(["%" . $_POST['search'] . "%", "%" . $_POST['search'] . "%"]);
$results = $stmt->fetchAll();
if (isset($_POST['ajax'])) { echo json_encode($results); }
3-ajax-search
<!DOCTYPE html>
<html>
<head>
<title>
AJAX Search Example
</title>
<script>
function fetch() {
// GET SEARCH TERM
var data = new FormData();
data.append('search', document.getElementById("search").value);
data.append('ajax', 1);
// AJAX SEARCH REQUEST
var xhr = new XMLHttpRequest();
xhr.open('POST', "2-search.php", true);
xhr.onload = function () {
if (this.status==200) {
var results = JSON.parse(this.response),
wrapper = document.getElementById("results");
wrapper.innerHTML = "";
if (results.length > 0) {
for(var res of results) {
var line = document.createElement("div");
wrapper.appendChild(line);
line.innerHTML = res['quantity'] + " - " + res['item'] + " - " + res['sku'] + " - " + res['item_name'] + " - " + res['item_price'] + " - " + res['subtotal'] + " - " + res['cartons_scanned'] + " - " + res['ind_scanned'] + " - " + res['cur_inventory'] + " - " + res['location_sel'] + " - " + res['image'] + " - " + res['edit'];
wrapper.appendChild(line);
}
} else {
wrapper.innerHTML = "No results found";
}
} else {
alert("ERROR LOADING FILE!");
}
};
xhr.send(data);
return false;
}
</script>
</head>
<body>
<!-- [SEARCH FORM] -->
<form onsubmit="return fetch();">
<h1>SEARCH FOR USERS</h1>
<input type="text" id="search" required/>
<input type="submit" value="Search"/>
</form>
<!-- [SEARCH RESULTS] -->
<div id="results"></div>
</body>
</html>
Thank you for the comments, thankfully to #simone I was able to answer my own question.
<table id="itemsTable"> <tr> <th>Quantity</th>
<th>Item</th>
<th>SKU</th>
<th>Item Name</th>
<th>Item Price</th>
<th>Subtotal</th>
<th>Cartons Scanned</th>
<th>Individually Scanned</th>
<th>Current Inventory</th>
<th>Location Selected</th>
<th>Image</th>
<th>Edit</th>
</tr>
<?php
if (isset($_POST['search'])) {
// SEARCH FOR ITEM NAME
require "2-search.php";
// DISPLAY RESULTS
if (count($results) > 0) {
foreach ($results as $r) {
echo "<tr>";
echo "<td>" . $r['quantity'] . "</td>";
echo "<td>" . $r['item'] . "</td>";
echo "<td>" . $r['sku'] . "</td>";
echo "<td>" . $r['item_name'] . "</td>";
echo "<td>" . $r['item_price'] . "</td>";
echo "<td>" . $r['subtotal'] . "</td>";
echo "<td>" . $r['cartons_scanned'] . "</td>";
echo "<td>" . $r['ind_scanned'] . "</td>";
echo "<td>" . $r['cur_inventory'] . "</td>";
echo "<td>" . $r['location_sel'] . "</td>";
echo "<td>" . $r['image'] . "</td>";
echo "<td>" . $r['edit'] . "</td>";
echo "</tr>";
}
} else {
echo "No results found";
}
}
?>
</table>
I've got a form that displays user data in php. Then I've got an input field where the qty should be inputted. Then the JS that executes calculates the total and updates the total input element.
The problem is the referencing to the relevant id element of the input. The JS I have is only referencing to the last element in the php array. So eg the id name is id="qty" . $userid, so for example the id name will be qtyuser001, qtyuser002, qtyuser003, etc, but JS only refers to qtyuser003.
I've been struggling with this for more than a day trying different methods, I can't get it to work. Is there an alternative method I should be approaching to solve this problem?
The php code
$get2 = mysqli_query($con,"SELECT * FROM table WHERE ...");
echo '<form method="post" action="">';
while($row2 = mysqli_fetch_array($get2)) {
$userID = $row2['userID'];
$fn = $row2['FirstName'];
$ln = $row2['LastName'];
echo '<tr>';
echo '<td><input readonly name="userID[]" id="userID ' . $userID . '" value="' . $userID . '"></td>';
echo '<td>' . $fn . ' ' . $ln . '</td>';
echo '<td><input type="text" size="5" name="nrOfQ[]" id="nrOfQ' . $userID . '" onchange="calc()"></td>';
echo '<td><input readonly type="text" size="5" name="total" id="total' . $userID . '"></td>';
echo '</tr>';
}
echo '</table>';
The JS code
<script>
function calc() {
var userid = <?php echo json_encode($userID); ?>;
var myrate = <?php echo json_encode($FieldInterviewerRate); ?>;
var myqty = document.getElementById('nrOfQ' + userid).value;
myResult = myqty * myrate;
var elem = document.getElementById('total' + userid);
elem.value = myResult;
}
</script>
I don't now Javascript that well
your problem that you are not init the JS function each time and you shouldt. The JS code shouldn't depend of PHP and mast be dynamic.
Please Try this
php
$get2 = mysqli_query($con,"SELECT * FROM table WHERE ...");
echo '<form method="post" action="">';
while($row2 = mysqli_fetch_array($get2)) {
$userID = $row2['userID'];
$fn = $row2['FirstName'];
$ln = $row2['LastName'];
echo '<tr>';
echo '<td><input readonly name="userID[]" id="userID ' . $userID . '" value="' . $userID . '">
<input type="hidden" id="myRate' . $userID . '"></td>';
echo '<td>' . $fn . ' ' . $ln . '</td>';
echo '<td><input type="text" size="5" name="nrOfQ[]" id="nrOfQ' . $userID . '" onchange="calc(this)"></td>';
echo '<td><input readonly type="text" size="5" name="total" id="total' . $userID . '"></td>';
echo '</tr>';
}
echo '</table>';
<script>
function calc(obj) {
var id = obj.id;
var userId = id.substr(5);
var myrate = document.getElementById('myRate' + userId).value;
var myqty = document.getElementById('nrOfQ' + userId).value;
myResult = myqty * myrate;
var elem = document.getElementById('total' + userId);
elem.value = myResult;
}
</script>
I am using a date picker in PHP, but I experience a small problem.
When selecting a month, I automatically submit the form to change the amount of days:
<script>
function change()
{
document.getElementById("datepickerform").submit();
}
</script>
But, when I press submit, I also want to execute some extra code (querying a database for some info with the selected date.
Is there a way to make a difference when the OK button is pressed or when the form is "submitted" via the function above?
Hereunder is the entire code (not finished, leap year also not included yet) of my datepicker.php:
<script>
function change(){
document.getElementById("datepickerform").submit();
}
</script>
<?php
// Include global Definitions and variables
// http://stackoverflow.com/questions/18179067/select-from-drop-down-menu-and-reload-page
// Form
define("FORM_DAY", "theday");
define("FORM_MONTH", "themonth");
define("FORM_YEAR", "theyear");
// Date related
$days = array(31,28,31,30,31,30,31,31,30,31,30,31);
// Get result from FORM POST
$submittedday = $_POST[FORM_DAY];
$submittedmonth = $_POST[FORM_MONTH];
$submittedyear = $_POST[FORM_YEAR];
if ($submittedday != '')
{
$currentday = $submittedday;
$currentmonth = $submittedmonth;
$currentyear = $submittedyear;
}
else
{
$currentday = intval(date("d"));
$currentmonth = intval(date("m"));
$currentyear = intval(date("Y"));
}
//DEBUG ON
echo $submittedday."/".$submittedmonth."/".$submittedyear."<br>\r\n";
echo $currentday."/".$currentmonth."/".$currentyear."<br>\r\n";
// DEBUG OFF
echo '<form id="datepickerform" action="' . $_SERVER['PHP_SELF'] . '" method="POST">';
echo '<table border="1" cellpadding="2">';
echo '<tr><td>';
echo '<table border="0" cellpadding="2">';
echo '<tr><th>Day</th><th>Month</th><th>Year</th></tr>';
echo '<tr>';
echo '<td><select name=' . FORM_DAY . '>';
$i = 1;
for ($i==1; $i<=$days[$currentmonth-1]; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentday)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '<td><select name=' . FORM_MONTH . ' onchange="change()">';
$i = 1;
for ($i==1; $i<=12; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentmonth)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '<td><select name=' . FORM_YEAR . '>';
$i = 2015;
for ($i==2015; $i<=2020; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentyear)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '</tr>';
echo '</table>';
echo '</td></tr>';
echo '<tr><td align="middle">';
echo '<input type="submit" value="OK"></td>';
echo '</td></tr>';
echo '</table>';
echo '</form>';
?>
Could anybody help?
Most JS libraries that preform AJAX calls pass an extra header with the request, typically X_REQUESTED_WITH with a value of XMLHttpRequest. If you were using something like jQuery you can check for this using PHP, or you could just use a hidden field that your JS creates and fills in when it is submitted that way.
function change()
{
var form = document.getElementById('datepickerform'),
el = document.createElement('input');
el.type = 'hidden';
el.name = 'js';
el.value = '1';
form.appendChild(el);
form.submit();
}
And then when handling in PHP, use
if (isset($_POST['js'])) {
// ...
}
You can Keep a hidden field in form and if the form is beig submitted using js then change the value of hidden field before submitting the form.
You could change it so that there is an Ajax call when the month changes, and use a button that can be used to invoke processing prior to submit.
Thanks for the above tips, this solved my problem. Also Change value of input then submit form in javascript helped solving my problem.
<script>
function change(){
document.getElementById("datepickerform").submitform.value = '1';
document.getElementById("datepickerform").submit();
}
</script>
<?php
// Include global Definitions and variables
// https://stackoverflow.com/questions/18179067/select-from-drop-down-menu-and-reload-page
// Form
define("FORM_DAY", "theday");
define("FORM_MONTH", "themonth");
define("FORM_YEAR", "theyear");
// Date related
$days = array(31,28,31,30,31,30,31,31,30,31,30,31);
// Get result from FORM POST
$submitform = $_POST["submitform"];
$submittedday = $_POST[FORM_DAY];
$submittedmonth = $_POST[FORM_MONTH];
$submittedyear = $_POST[FORM_YEAR];
if ($submittedday != '')
{
$currentday = $submittedday;
$currentmonth = $submittedmonth;
$currentyear = $submittedyear;
}
else
{
$currentday = intval(date("d"));
$currentmonth = intval(date("m"));
$currentyear = intval(date("Y"));
}
//DEBUG ON
echo $submitform."<br>\r\n";
echo $submittedday."/".$submittedmonth."/".$submittedyear."<br>\r\n";
echo $currentday."/".$currentmonth."/".$currentyear."<br>\r\n";
if ($submitform == '0')
{
echo 'Button pressed.<br>';
}
else
{
echo 'Javascript executed.<br>';
}
// DEBUG OFF
echo '<form id="datepickerform" action="' . $_SERVER['PHP_SELF'] . '" method="POST">';
echo '<table border="1" cellpadding="2">';
echo '<tr><td>';
echo '<table border="0" cellpadding="2">';
echo '<tr><th>Day</th><th>Month</th><th>Year</th></tr>';
echo '<tr>';
echo '<td><select name=' . FORM_DAY . '>';
$i = 1;
for ($i==1; $i<=$days[$currentmonth-1]; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentday)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '<td><select name=' . FORM_MONTH . ' onchange="change()">';
$i = 1;
for ($i==1; $i<=12; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentmonth)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '<td><select name=' . FORM_YEAR . '>';
$i = 2015;
for ($i==2015; $i<=2020; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentyear)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '</tr>';
echo '</table>';
echo '</td></tr>';
echo '<tr><td align="middle">';
echo '<input type="hidden" name="submitform" value="0">';
echo '<input type="submit" value="OK"></td>';
echo '</td></tr>';
echo '</table>';
echo '</form>';
?>
I have used this function to pop up a window, when a user clicked the table row
<script type="text/javascript">
$(document).ready(function() {
$("td.abc").click(function() {
var t = 'Ticket ID: ' + $(this).find('td:eq(0)').html()+'\n'+'\n';
var r = 'Subject: ' + $(this).find('td:eq(1)').html()+'\n'+'\n';
var e = 'Messege: ' + $(this).find('td:eq(2)').html()+'\n'+'\n';
var f = 'Developer: ' + $(this).find('td:eq(3)').html()+'\n'+'\n';
var w = 'Current Status: ' + $(this).find('td:eq(4)').html()+'\n'+'\n';
var q = 'Uploaded Date & Time: ' + $(this).find('td:eq(5)').html()+'\n'+'\n';
var o = $("#79").attr("name")+'\n'+'\n';
alert(t+r+e+f+w+q+o);
});
});
</script>
my table is as follows
echo "<br> <table border='0' id='example' width='980' align='center'>
<tr>
<th width='60'>Ticket ID</th>
<th width='150'>Subject</th>
<th width='670'>Messege</th>
<th width='60'>Developer</th>
<th width='70'>Status</th>
<th width='105'>Date - Time</th>
</tr>";
while($row = mysql_fetch_array($result)) {
//echo $row['jobSatus'];
echo "<tr>";
echo "<td class=\"abc\" width='60'>" . $row['id'] . "</td>";
echo "<td class=\"abc\" width='150'>" . $row['subject'] . "</td>";
echo "<td class=\"abc\" width='670'>" . $row['msg'] . "</td>";
echo "<td class=\"abc\" width='60'>" . $row['developer'] . "</td>";
echo "<td class=\"abc\"width='60'>" . $row['jobstatus'] . "</td>";
echo "<td class=\"abc\" width='105'>" . $row['date_time'] . "</td>";
echo "<input class=\"abc\" type='hidden' name=".$row['image']." id=".$row['id'].">";
echo "</tr>";
}
echo "</table>";
Now inside the pop window I don't get any values. It says "undefined". I would be very thankful if someone could show what I have done wrong.
try to change this...
var t = 'Ticket ID: ' + $(this).find('td:eq(0)').html()+'\n'+'\n';
to this
var t = 'Ticket ID: ' +$(this).closest('td:eq(0)').attr('class');
Hope this will help....
You are clicking on a table cell, not a table row
$("td.abc").click(function() {
^^
Change it to look at the table
$("#example").on("click", "tr", function () {
or
$("#example").on("click", "tr:has(td.abc)", function () {
And your HTML markup is invalid since an input element can not be a child element of a tr.
Set onclick on table-row
$("tr.ticker-row").click(function(ev) {
var $this = $(ev.currentTarget);
var t = 'Ticket ID: ' + $this.find('td:eq(0)').html()+'\n'+'\n';
var r = 'Subject: ' + $this.find('td:eq(1)').html()+'\n'+'\n';
var e = 'Messege: ' + $this.find('td:eq(2)').html()+'\n'+'\n';
var f = 'Developer: ' + $this.find('td:eq(3)').html()+'\n'+'\n';
var w = 'Current Status: ' + $this.find('td:eq(4)').html()+'\n'+'\n';
var q = 'Uploaded Date & Time: ' + $this.find('td:eq(5)').html()+'\n'+'\n';
var o = $this.find('input').attr('name') + '\n'+'\n';
alert(t+r+e+f+w+q+o);
});
On php, do not insert any node in tr except td
while($row = mysql_fetch_array($result)) {
//echo $row['jobSatus'];
echo "<tr class=\"ticket-row\" data-row-index=\"".$row['id']."\">";
echo "<td class=\"abc\" width='60'>" . $row['id'] . "<input class=\"abc\" type='hidden' name=".$row['image']." ></td>";
echo "<td class=\"abc\" width='150'>" . $row['subject'] . "</td>";
echo "<td class=\"abc\" width='670'>" . $row['msg'] . "</td>";
echo "<td class=\"abc\" width='60'>" . $row['developer'] . "</td>";
echo "<td class=\"abc\"width='60'>" . $row['jobstatus'] . "</td>";
echo "<td class=\"abc\" width='105'>" . $row['date_time'] . "</td>";
echo "</tr>";
}
echo "</table>";
I want to create a javascript that will change the value of anotif to 0 once clicked:
Approved:<?php if($anotif<1){
echo 0;
} else {
echo '<a class="anotif" onClick="validator()" href="?anotif">'.$anotif.'</a>';
} ?><br/>
But I am not sure how do that, considering that I'm so new in javascript. I've googled around a bit but I wasn't able to find the answer.
function validator(){
if(document.anotif.clicked){ // I'm not really sure if this is correct.
// if clicked, change value to zero
}
To be more precise, I want it to look like this once clicked:
From:
Approved:3
To:
Approved:0
Approved:<?php if($anotif<1){
echo 0;
} else {
echo '<a class="anotif" onClick="validator()" href="?anotif">'.$anotif.'</a>';
} ?><br/>
This code will lead me to ?anotif for me to view some data from the database in a table. Once approved: is clicked, it must be set to zero at the same time I move to the other page.
The problem is it requires refreshing for it to be set to 0 by the system.
Here is the rest of the code:
$firstname = getuserfield('txtFname');
$lastname = getuserfield('txtLname');
echo 'Hello '.$firstname.' '.$lastname.'.<br/>';
$anotif = 0;
$dnotif = 0;
$anotif = $anotif + getuserfield('approved_notif');
$dnotif = $dnotif + getuserfield('disapproved_notif');
?>
<h3>Notifications:</h3>
Approved:<?php if($anotif<1){echo 0;} else { echo '<a class="anotif" onClick="validator(this);" href="?anotif">'.$anotif.'</a>';}?><br/> //problem is over here
<?php
if(isset($_GET['anotif'])) {
$query = "SELECT * FROM hrf_leave WHERE empid = '$empid' AND formStatus = 1 AND checked = 0";
$query_run = mysql_query($query) or die($query."<br/><br/>".mysql_error());
echo "<table border=1>
<tr>
<th>Type of Leave</th>
<th>Specific Reason</th>
<th>Date From</th>
<th>Date To</th>
<th>Number of Days</th>
</tr>";
echo "<tr>";
while($record = mysql_fetch_array($query_run)){
$leave_id = $record['leave_id'];
echo "<td>" . $record['type_of_leave'] . "</td>";
echo "<td>" . $record['specific_reason'] . "</td>";
echo "<td>" . $record['date_from'] . "</td>";
echo "<td>" . $record['date_to'] . "</td>";
echo "<td>" . $record['num_of_days'] . "</td>";
echo "</tr>";
$query2 = "UPDATE hrf_leave SET checked=1 WHERE leave_id = $leave_id";
if($query_run2 = mysql_query($query2)){
$anotif = 0;
$query3 = "UPDATE hrms_emp_info SET approved_notif=$anotif WHERE empid = $empid";
if($query_run3 = mysql_query($query3)){
}
}
}
echo "</table>";
}
?>
Disapproved:<?php if($dnotif<1){echo 0;} else { echo ''.$dnotif.'<br/>';} ?> //and here
<?php
if(isset($_GET['dnotif'])) {
$query = "SELECT * FROM hrf_leave WHERE empid = '$empid' AND formStatus = 2 AND checked=0";
$query_run = mysql_query($query);
echo "<table border=1>
<tr>
<th>Type of Leave</th>
<th>Specific Reason</th>
<th>Date From</th>
<th>Date To</th>
<th>Number of Days</th>
</tr>";
echo "<tr>";
while($record = mysql_fetch_array($query_run)){
$leave_id = $record['leave_id'];
echo "<td>" . $record['type_of_leave'] . "</td>";
echo "<td>" . $record['specific_reason'] . "</td>";
echo "<td>" . $record['date_from'] . "</td>";
echo "<td>" . $record['date_to'] . "</td>";
echo "<td>" . $record['num_of_days'] . "</td>";
echo "</tr>";
$query2 = "UPDATE hrf_leave SET checked=1 WHERE leave_id = $leave_id";
if($query_run2 = mysql_query($query2)){
$dnotif = $dnotif-1;
$query3 = "UPDATE hrms_emp_info SET disapproved_notif=$dnotif WHERE empid = $empid";
if($query_run3 = mysql_query($query3)){
}
}
}
echo "</table>";
}
You could change your anchor a bit like this:
<a class="anotif" onClick="return validator(this)" href="?anotif">
Then change the validator() function like this:
function validator(element)
{
// element is clicked already, so you can change its value
element.innerHTML = '0';
// prevent click from changing page
return false;
}
However, the real problem here is that the page will be changed to ?anotif and whatever you changed will be wasted effort.
Updated the code with a way to prevent the click from changing the page and just reducing the number to '0'.