РЕДАКТИРОВАТЬ: Прокрутите вниз!
ПРЕДУПРЕЖДЕНИЕ Вы широко открыты для SQL инъекций (атак SQLI). Пожалуйста, используйте Подготовленные операторы и параметризованные запросы .
С учетом сказанного, я буду переписывать вашу PHP страницу в соответствии с рекомендациями для подготовленных операторов и параметризованных запросов.
Что касается части вашего вопроса jQuery, я считаю, что вы ищете функцию property , .prop("disabled", true);. Вы уже использовали его для своего submitButton , за исключением того, что вы включаете кнопку, задав для свойства значение false .
jQuery Пример с использованием вашего кода :
$(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);
}
}
});
});
});
Ваша страница PHP с использованием Подготовленного оператора и параметризованного запроса:
<?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");
}
?>
Пример фрагмента, отображающий .prop("disabled", true); в действии:
$(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>
Пример кода здесь .
РЕДАКТИРОВАТЬ:
Поскольку вы хотел отключить конкретную дату c, в частности, в зависимости от количества этой даты в вашей базе данных, тогда я бы рекомендовал использовать либо jQuery datepicker , либо Bootstrap datepicker . Я буду двигаться дальше, используя jQuery datepicker .
Подробнее о jQuery datepicker здесь .
Сначала вам нужно будет запросить вашу базу данных для дат, к которым применяется ваш logi c, т.е. когда дата встречается более 8 раз.
Пример:
SELECT
mass_date
FROM
mass_table
GROUP BY
mass_date
HAVING
COUNT(*) > 8;
DB Fiddle здесь .
Идея состоит в том, что вы создаете массив JavaScript, содержащий даты, которые вы хотите отключить. Затем вы хотите заполнить этот массив датами, соответствующими вашему logi c.
Вот как может выглядеть ваша главная страница:
<?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 Пример jQuery дат отключенных датпикера здесь .