如何在不输入表单的情况下显示消息 [英] How to make the message appear without typing in the form

问题描述

我只想在下拉按钮中选择房间和时间后显示消息。我选择了所有这些，它会以这样的形式出现：

data-console =truedata-babel =false>

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< select name =roomsid =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 =timeid =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  -  9am am< / option>< / select>< form action =name =form> < input type =textname =time_roomid =time_room>< / form>< div id =feedback>< / div>   
 
上面的代码在index.php里面，然后当我把这个代码放在里面的时候：

p>

  $（＃feedback）。load（check.php）。hide（）; $（'＃time_room）。on（'input'，function（）{
 $ .post（check.php，{time_room：form.time_room.value}，
函数（result）{
 $（＃feedback）。html（result）.show（）; 
}）; 
}）; 
  

和check.php里面的内容

 <？php 
 $ host =localhost; 
 $ user =root; 
 $ password =; 
 $ database =subject_loading_for_csit; 
 $ con = mysqli_connect（$ host，$ user，$ password，$ database）或死（无法连接）; 
 if（mysqli_connect_errno（））{
 echo连接失败：。mysqli_connect_error（）; 
出口; 
} 
 
 
 $ rmt = $ _POST ['time_room']; 
 
 $ query = mysqli_query（$ con，SELECT * FROM subject_scheduled where room_time ='$ rmt'）; 
 $ count = mysqli_num_rows（$ query）; 
 
 if（$ count == 0）{
 echoOK; 
} else if（$ count> 0）{
 echoAlready; 
}？> 
  

此代码有效，但最终消息不会显示，除非我尝试插入或编辑表格。

这是当我完成选择所有房间和时间时：

当我在表单中输入时。

解决方案

#time_room 的'input'事件只会在手动输入时触发，而不会在javascript / jQuery设置它的值。

将事件处理程序附加到 #time_room 时没有意义，因为它的值只会响应 #rooms 和 #time 被更改。

您需要使 $。当＃房间或＃时间被调用时，将会调用post（...）

  $（document）.ready（function（）{
 $（'＃rooms，#time' ）.on（'change'，function（）{
 var time_room_value = $（'＃rooms'）。val（）+''+ $（'＃time'）。val（）; 
 $（'＃time_room'）。val（time_room_value）; 
 $ .post（'check.ph p'，{'time_room'：time_room_value}，函数（result）{
 $（＃feedback）。html（result）.show（）; 
}）; 
}）; 
 // $（＃feedback）。load（'check.php'）。hide（）; //没有意义加载一条不会被看到的消息？ 
 $（＃feedback）。hide（）; 
}）; 
  

请注意，我将 input 更改为更多通常更改事件。

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:

And when I typed in the form.

解决方案

#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.

这篇关于如何在不输入表单的情况下显示消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！