PHP - SQL - Disable, Hide or Enable Button based on Data

PHP
, ,
1

Aim

Hide, Disable or Enable buttons based on the data retrieved from the Database

SQL - Database Table (SchoolData)

+-----+--------+------------+------------+----------------+-----------+
|  ID |  Class |   Teacher  |  YearMonth |   Description  |   Status  |
+-----+--------+------------+------------+----------------+-----------+
|  1  |  Alpha |    Sara    |  2017/01   |  Good & Clean  |  Pending  |
+-----+--------+------------+------------+----------------+-----------+
|  2  |  Beta  |    John    |  2016/11   |   Big & Clean  |  Official |
+-----+--------+------------+------------+----------------+-----------+

Webpage

+---------------------------------------------------------------+
|                                                               |
| |>Select Class<|   |>Select Teacher<|   |>Select Year/Month<| |
|                                                               |
|                         (Search)                              |
|                                                               |
|                                                               |
|>>>>>>>>>>>>>>>>>>>>>>>>>>INPUT<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<|
|                                                               |
|      {Class}           {Teacher}           {Description}      |
|                                                               |
|                                                               |
|     (RE-SUBMIT)         (Draft)             (Submit)          |
|                                                               |
+---------------------------------------------------------------+

  • Legend

    Drop down List - |><|

    Button - ()

    Text Input - {}

Webpage Description

RE-SUBMIT button is only available for the Admin

If the staff searches | Alpha | Sara | 2017/01 | for the “Class”, “Teacher”, and “Year/Month” respectively, since the data already exist and is saved as Pending, the staff will be able to input data again and choose to either click Draft or Submit.

If the staff clicks Draft, the Status of that data will be saved as “Pending” but if the staff clicks Submit, the Status of that data will be saved as “Official”. Once the Status of a set of Data is saved as “Official”, the Submit button will be disabled even though the staff Searches for the data again.

For example if the staff searches | Beta | John | 2016/11 |, the staff will only be able to view the data and the DISABLED buttons. The staff will not be able to submit the new data. The reason for this is because if status of the data is “Official”, it means that it has been finalized and will require the Admin to re-enable the “Submit” button again

Only the Admin will be able to re-enable the Submit button by clicking on the “RE-SUBMIT” button. The Admin will have to search for the data that was submitted as “Official” to only be able to click on the “RE-SUBMIT” button. When the Admin clicks on the “RE-SUBMIT” button the status of the of the searched Data will once again be changed to “Pending” in order to allow the staff to re-submit input.

Logic

This is just the logic of the desired solution. This isn’t the actual codes that I was implementing. It is just used to give a clearer picture of the Web Description.

(StatusQuery) 
	SELECT status 
	FROM SchoolData sd 
    WHERE SelectedClass = sd.Class 
    AND SelectedTeacher = sd.Teacher 
    AND SelectedYearMonth = sd.YearMonth
	
if((StatusQuery) == "Official"){
	set.(btn.Submit).disabled
	set.(btn.Draft).disabled
	set.(btn.ReSubmit).enabled
}else if((StatusQuery) == "Draft"){
	set.(btn.Submit).enabled
	set.(btn.Draft).enabled
	set.(btn.ReSubmit).disabled
}

Additional Notes

I’m very new to PHP and JQuery, like few days new and I had to take over from a previous developer. This link Disable submit button unless original form data has changed is quite similar but its solution will enable the Submit button once input is changed.

Whereas I only want the Admin to re-enable the Submit button through the RE-SUBMIT button. And if the RE-SUBMIT button has been clicked for the selected data, it will change the Status of the data to “Draft” in order to allow the Staff to once again submit new data. Not only that but my intentions are to disable the Submit button once the data for the Selected Class, Teacher, and Year/Month has been submitted.

Meaning that, if I were to enter Data for ID 1 as shown in the Database but I click on the “Submit” button instead of the “Draft” button. The data saved will have the status “Official”. Once the status of the data is “Official” no one can ever submit data for that again.

2

And what is the problem you’ve encountered?

3

I was able to disable the Submit Button by using if($row[“_status”] == “Submit”)…input readonly attribute but The RE-SUBMIT button only enable the Submit button for the admin side and not the Staff side. The reason for this is because I did not include a function for the RE-SUBMIT button to change the status of the data selected from “Official” to “Pending” which would re-enable the Submit button on the Staff side

4

Update (1)

I am able to disable the “Submit” button for the selected data after it has been submitted by the staff and have added a HTML input readonly Attribute to only present the data and not allow any changes to the input. Now when the Staff searches for the data via Class, Teacher, and YearMonth, the data presented can no longer be edited or resubmitted. The RE-SUBMIT button however still does not work.

5

I believe Javascript is more appropriate for this kind of action. If you want the buttons to change “on the fly”, then Javascript should of been your first choice. “Disabling submit button after submission” can already be achieved through Javascript without PHP’s help.

6

Thank you for your reply, yes I have manged to Disable the Submit button after submission and even when the Staff searches for the same data he or she will not be able to resubmit it. But right now I don’t know how to code the RE-SUBMIT button which will change the Status of the selected data from “Official” to “Pending”.

The SQL Update will look like this

UPDATE SchoolData 
SET Status = 'Pending' 
WHERE  Class= '$className' 
AND Teacher = '$teacherName' 
AND YEAR(MonthYear)= YEAR('$date') 
AND MONTH(MonthYear)= MONTH('$date');

but I don’t know how to put it into Javascript as this is my codes for the RE-SUBMIT button

//RE-SUBMIT
	$(function (){
		$("button#btnReSubmit").on('click', function (e){
			e.preventDefault();
			$("#inputStatus").val("reSubmit");
			$.ajax({
				type: 'post'
				url: 'changeClassStatus.php',
				data: $('#prodForm').serialize(),
			});
		}
	}

The “changeClassStatus.php” is the file where the UPDATE SQL is stored

7

It’s in Jquery which is also a Javascript plugin. You need to run it through PHP now.

Also, be sure to check this line.

You’re missing a comma.

1 Like
8

Thanks for pointing that out and Sorry, please be patient with me…but I don’t know what you meant by > You need to run it through PHP now

9

What I am saying is that now you need to use PHP to run your update query. You should also consider using prepared statements. Stuffing raw data into a query string is dangerous let alone bad practice.

11

What does this mean? “Does not insert”? “Does not stay on page”? “Does not disable button”? “Does not eat food”?

Please explain what you mean by “does not work”. It’s too vague.

12

Hahaha I mean that it does not Update the status of the selected data to “Pending”. I have also updated my codes for my RE-SUBMIT button,

13

Shall we see it then?

14

Sorry I didn’t copy it to my comment. Really sorry.

// RE-SUBMIT button
	$(function (){
		$("button#btnReSubmit").on('click', function (e){
			e.preventDefault();
			$("#inputStatus").val("reSubmit");
			var form = document.getElementById('prodForm');

			form.method = "POST";
			form.action = 'changeClassStatus.php';
			form.submit();
		}
	}

Thanks for replying :slight_smile:

15

Your first Jquery code should of sufficed. I looked further into your Jquery code and you’re missing 2 parentheses.

##1 Rule of thumb in programming

End everything you started. This means that if you start with 1

{

You must end that corresponding curly brace with

}

No matter how much you nest or write, you must always double check and count how many curly braces, parentheses, and brackets you use. You must always end them.

Reason why I said that is because I’ve seen that you haven’t ended 2 parentheses. Not sure if it was a typo or that you’re new to this, but I’m telling you as a rule of thumb. If you also use your console log, it will tell you where you are missing them.

This is the first thing I noticed and why your Jquery does not silently submit the form, but refreshes the page instead.

Another thing to note about using PHP. You are using mysqli_* and that’s fine. However, you need to understand that once user inputs come into play, then your query is no longer safe. To avoid query manipulation (SQL Injection/ Blind Injection), you must escape the user input. Escaping user input is very tedious work and takes up too much space and time. Rather than escaping, you should be using something called Prepared Statements. Prepared Statements treat the user input as a regular string and not a literal SQL translation.

Here’s an example of SQL Injection/Blind Injection. A malicious user can do something like

random_page.php?id=2 and 1=2

If they are successful and they know that your website can be tampered with, then can do something like

random_page.php?id=1'; DROP TABLE ......

Well now look. Your database is gone.

1 Like
16

Thank you very much for your detailed explanation :smiley: I really appreciate it. I think it was a type because I have just checked and there’s no console log as I am using Notepad++. I just took over this project from a previous developer and I’m just started learning PHP and JQuery few days ago. I’ve checked with the other developers about using a development tool to look through the log files but Notepad++ is the tool used. We save the file and refresh the webpage. I’m still looking if I’ve missed the 2 parentheses. Thank you for informing me about the threat of SQL Injection, I’ll try to implement Prepared Statements.

This was my RE-SUBMIT Function

//RE-SUBMIT
	$(function (){
		$("button#btnReSubmit").on('click', function (e){
			e.preventDefault();
			$("#inputStatus").val("reSubmit");
			$.ajax({
				type: 'post',
				url: 'changeClassStatus.php',
				data: $('#prodForm').serialize(),
				success: function (result) {
					$('#getSubmit').html(result);
					jQuery("#getSubmitModal").modal('show');
				}
			});
		}
	}

and This is my changeClassStatus.php

<?php
  //**************Connection to database********************//
  include "databaseConc.php";
  //Those data are setting for checking data existance in the database
  $teacher= trim($_POST['teacher']);
  $date   = $_POST['date'];
  $class= trim($_POST['class']);
  $date   = $date."/01";
  $status = $_POST['status'];
  
	if($status == 'reSubmit'])){
		$sqlUpdate = mysqli_query($conn,"UPDATE SchoolData SET Status='Pending' WHERE (Teacher= '$teacher' AND Class= '$class' AND YEAR(MonthYear)= YEAR('$date') AND MONTH(MonthYear)= MONTH('$date'));";
		$sqlExecute=$conn->query($sqlUpdate)or exit("Error code ({$conn->errno}): {$conn->error}");
	}
?>

I will be making changes shortly

17

Notepad++ is the tool you used for editing the code, and is a perfectly good editor for this kind of work IMO. It even helps you with open/close braces of various kinds as it will highlight the “pair” when you get the cursor alongside an open or close brace.

The console log is part of the browser developer tools. For example in Google Chrome, click on the menu, then “More Tools”, then “Developer Tools”, and you’ll see a tab marked “console”. In JavaScript, you can use “console.log(string)” to output debug messages there, and you’ll see error messages automatically.

2 Likes
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.