Disable the date when the current date count is 8 in ajax,php, mysql – Jquery ajax

EDIT: Scroll down!

WARNING You are wide open to SQL Injections (SQLI Attacks). Please make use of Prepared Statements and Parametized queries.

With that said, I will be rewriting your PHP page to follow the guidelines of Prepared Statements and Parametized queries.

As for the jQuery part of your question, I believe what you’re looking for is the property function, .prop("disabled", true);. You already used it for your submitButton, except there you enable the button by setting the property to false.

jQuery Exampled, using your code:

 $(document).ready(function() {
    $('#txtDate').change(function(){
        var selectedDate = $(this).val();
        $.ajax({
            type: 'GET',
            url: "http://localhost/check_date.php?selectedDate=" +selectedDate, 
            success: function(data) {
                var status= JSON.parse(data);
                if((status=="SUCCESS")) {
                    $('#submitButton').prop('disabled', false);
                } else {
                    $('#txtDate').prop("disabled", true);
                }
            }
        });
    });
});

Your PHP page, using Prepared Statement and Parametized query:

<?php
// Your input GET variable
$selectedDate = $_GET['selectedDate'];

// DB variables
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if($conn->connect_error){
  die("Connection failed: " . $conn->connect_error);
}

// Declare the query
$sql = "SELECT COUNT(*) as booking_count FROM shrine_mass WHERE mass_date = ?";

// Prepare and bind
$stmt = $conn->prepare($sql);
$stmt->bind_param('s', $selectedDate);

// Execute the query
$stmt->execute();

// Bind result variable and fetch value
$stmt->bind_result($booking_count);
$stmt->fetch();

// Close connection
$stmt->close();
$conn->close();

if($booking_count < 8) {
    echo json_encode("SUCCESS");

} else {
    echo json_encode("FAIL");
}
?>

Snippet example, displaying the .prop("disabled", true); in action:

 $(document).ready(function() {
	$('#txtDate').prop("disabled", true);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row d-flext justify-content-center">
	<div class="col-md-4">
		<input type="date" name="mass_date" id="txtDate" class="form-control" required="required" />
	</div>
</div>

Codepen Example here.

EDIT:

Since you wanted to disable a specific date in particular depending on the count of that date in your database, then I would recommend using either jQuery datepicker or Bootstrap datepicker. I will move forward using jQuery datepicker.

More about jQuery datepicker here.

First you will need to query your database for the dates where your logic applies, i.e. where the date occurs more than 8 times.

Example:

SELECT
    mass_date
FROM
    mass_table
GROUP BY
    mass_date
HAVING
    COUNT(*) > 8;

DB Fiddle here.

The idea is that you create a JavaScript array, which contains the dates you want to disable. You then want to populate this array with the dates that fit your logic.

This is how your main page could look like:

<?php
// DB variables
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if($conn->connect_error){
  die("Connection failed: " . $conn->connect_error);
}

// Declare the query
$sql = "SELECT mass_date FROM mass_table GROUP BY mass_date HAVING COUNT(*) > 8";

// Prepare
$stmt = $conn->prepare($sql);

// Execute the query
$stmt->execute();

// Get result of query
$result = $stmt->get_result();

// Close connection
$stmt->close();
$conn->close();
?>

<script>
// The array containing the dates to be disabled in the datepicker
let disabledDates = [];

<?php
// Loop through our query results
while($data = $result->fetch_assoc()) {
    ?>
    // Push the dates into the disabledDates array
    disabledDates.push("<?php $data['mass_date']; ?>");
    <?php
}
?>

// jQuery datepicker function
$('#txtDate').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ disabledDates.indexOf(string) == -1 ]
    }
});
</script>

<div class="row d-flext justify-content-center">
    <div class="col-md-4">
        <input type="date" name="mass_date" id="txtDate" class="form-control" required="required" />
    </div>
</div>

Codepen Example of jQuery datepicker disabled dates here.