Question

我有一个带有下拉框，登录按钮和注销按钮的表单。我的要求是在用户从下拉列表中选择用户名后点击登录或注销按钮时插入日期和时间。此外，当用户单击登录按钮时，必须通过更改背景颜色而不加载页面来启用。注销选项也需要相同的功能。

现在，我可以从数据库中的下拉列表中选择用户名。我没有页面加载就插入了我需要的插入部分。

点击登录按钮后，我需要在没有页面加载的情况下插入数据。

任何帮助都会很明显。提前谢谢。

代码：

的index.php

<?php
include_once "database.php";
?>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
} 
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
$sql_user="SELECT * FROM users";
$result_user=mysql_query($sql_user);

?>
<form>
<select name="users" onchange="showUser(this.value)" style="width: 210px;height: 36px; font-size:17px;">
<option style="height:30px;" value="">Select a person:</option>
<?php while($row_user=mysql_fetch_array($result_user)){?><option style="height:30px;" value="<?php echo $row_user['id'];?>"><?php echo $row_user['username'];?></option><?php }?>

</select>
</form>
<br>
<div id="txtHint"></div>
</body>
</html>

getuser.php

<style>
button{
width: 100px;
height: 38px;
background:white;
color:black;
}
</style>

<?php
$q = intval($_GET['q']);

include_once "database.php";

$sql="SELECT * FROM users WHERE id = '$q'";
$result = mysql_query($sql);
$row=mysql_fetch_array($result);
$entry=$row['entry'];
?>
<form method="post" name="">
<table>
<tr><td>
<button id="btnSave" <?php if($entry=='0'){?> style=" background:#6DAAD4;"<?php }?>> Login</button>
 </td><td>
 <button <?php if($entry=='1'){?> style=" background:#6DAAD4;"<?php }?>> Logout</button>
 </td></tr>
 </table>
 </form>

Answer 1

在按钮

中绑定onclick =“func（）”

在func方法中，以这种方式改变颜色：

的document.getElementById（ “formID”）style.backgroundColor = “lightblue”;

Answer 2

在你的getuser.php中删除表单标签并添加功能＆＃39; insertDateTime（）＆＃39;按钮点击事件，如：

<table>
    <tr>
       <td>
           <button id="btnSave" onclick="insertDateTime(this,'<?php echo $q;?>');"> Login</button>
       </td>
       <td>
           <button id="btnSave" onclick="insertDateTime(this,'<?php echo $q;?>')"> Logout</button>
       </td>
   </tr>
</table>

向index.php添加一个函数

<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script> //better to download and us locally 

<script>
function insertDateTime(obj, id)
{
    $("[id^='"+obj.id+"']").css('background', '#FFFFFF');
    $(obj).css('background', '#6DAAD4');

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    var params = "id="+id;

    xmlhttp.open("POST","insertdate.php",true);

    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            //alert(xmlhttp.responseText);
        }
    }        
    xmlhttp.send(params);
}
</script>

并在insertdate.php中编写代码以在数据库中插入日期和时间。您可以使用$ _POST [＆＃39; id＆＃39;]获取您的ID在insertdate.php中。

启用和禁用没有页面加载的按钮

2 个答案: