I just want to appear the message after I select the room and time in the drop down buttons. I select all of this, it will appear in the form like this:
$(document).ready(function(){
$('#rooms, #time').bind('input', function() {
$('#time_room').val($('#rooms').val() + ' ' +
$('#time').val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="rooms" id="rooms">
<option value="" style="display: none;">SELECT</option>
<option value="cas 104">cas 104</option>
<option value="cas 105">cas 105</option>
</select>
<select name="time" id="time">
<option value="" style="display: none;">SELECT</option>
<option value="7:00 - 8:00 am">7:00 - 8:00 am</option>
<option value="8:00 - 9:00 am">8:00 - 9:00 am</option>
</select>
<form action="" name="form">
<input type="text" name="time_room" id="time_room">
</form>
<div id="feedback"></div>
The code above was inside of the index.php, then when I put this code inside of it:
$("#feedback").load("check.php").hide();
$("#time_room").on('input', function(){
$.post("check.php", { time_room: form.time_room.value },
function(result){
$("#feedback").html(result).show();
});
});
and inside of the check.php
<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "subject_loading_for_csit";
$con = mysqli_connect($host, $user, $password, $database) or die ("could not connect");
if (mysqli_connect_errno()) {
echo "connection failed:".mysqli_connect_error();
exit;
}
$rmt = $_POST['time_room'];
$query = mysqli_query($con, "SELECT * FROM subject_scheduled where room_time = '$rmt' ");
$count = mysqli_num_rows($query);
if ($count == 0) {
echo "OK";
}else if($count > 0){
echo "Already taken";
}?>
This codes works but eventually, the message won't shown up unless I try to insert or edit the form.
This is when I Finish to select all the room and time:
</div>
#time_room
's 'input' event will fire only on manual input, not when its value is set by javascript/jQuery.
There seems to be no point in attaching an event handler to #time_room
as its value will (or should) only ever change in response to #rooms
and #time
being changed.
You need to cause $.post(...)
to be called when either #rooms
or #time
is changed.
$(document).ready(function() {
$('#rooms, #time').on('change', function() {
var time_room_value = $('#rooms').val() + ' ' + $('#time').val();
$('#time_room').val(time_room_value);
$.post('check.php', { 'time_room': time_room_value }, function(result) {
$("#feedback").html(result).show();
});
});
// $("#feedback").load('check.php').hide(); // no point loading a message that will not be seen?
$("#feedback").hide();
});
Note, I changed input
to the more usual change
event.