JavaScript在控制台中工作,但不在我的页面上
我试图创建一个基本的登录页面。人们输入用户名和密码。它将检查数据库。如果他们可以验证他们的凭证,他们可以前进到不同的页面。如果不是,则会显示一条错误消息。下面是我有问题行:JavaScript在控制台中工作,但不在我的页面上
else {
// Print login failure message to the user and link them back to your login page
echo '<script>document.getElementById("error").innerHTML = "Invalid username or password." </script>';
}
当我粘贴在引号(省略脚本标记,当然)之间的一切直接进入控制台,一切正常,因为它应该。但是,每当我尝试通过我的PHP文件回显出来,什么都不会发生。任何帮助将不胜感激。
下面是完整的文件:
<?php
session_start(); // Can't forget to start a session!
//Connect to the database
include_once "connect/connect_to_mysql.php";
if ($_POST['username'] || ($_POST['password'])) {
$username = ($_POST['username']);
$password = ($_POST['password']);
// $password = preg_match("[^A-Za-z0-9]", "", $_POST['password']); // only numbers and letters
// $password = md5($password); // Hash the password for security!
// Query the database and then convert all database data into variables.
$sql = mysql_query("SELECT * FROM Users WHERE username='$username' AND password='$password' AND activated='1'");
$login_check = mysql_num_rows($sql);
if($login_check > 0){
while($row = mysql_fetch_array($sql)){
// Get member ID into a session variable
$id = $row["id"];
//session_register('id');
$_SESSION['id'] = $id;
// Get member username into a session variable
$username = $row["username"];
// Get username into a session variable
$_SESSION['username'] = $username;
// Update the 'lastlogin' field to current date/time
mysql_query("UPDATE Users SET lastlogin=now() WHERE id='$id'");
// If successful, redirect to profile
header("location: main.php");
exit();
}
} else {
// Print login failure message to the user and link them back to your login page
echo '<script>document.getElementById("error").innerHTML = "Invalid username or password."</script>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Timeclock Login</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
<div class="largetext">
Timeclock<span style="font-weight:300;">Login</span>
</div>
<div class="loginbox">
<form action="index.php" method="post" enctype="multipart/form-data" name="login" id="login">
<div id="error"></div>
<label><input type="text" name="username" placeholder="Username"></label>
<label><input type="password" name="password" placeholder="Password"></label>
<input type="submit" name="Login" class="loginbutton" value="Log in"></input>
</form>
</div>
</body>
</html>
,您有有关DOM渲染的问题。当您的标记<script>
浏览器,浏览器尚未完全呈现Document Object Model。因此,发生的情况是拨打document.getElementById("error")
不会重新调用任何结果,因此拨打.innerHtml
完成任何操作。
你需要做的是推迟到document.getElementById("error")
的呼叫,直到DOM可用。在常见的JavaScript库,例如jQuery
,一个utility method to defer parsing of JavaScript提供:
$(document).ready(function() {
document.getElementById("error").innerHTML = "Invalid username or password.
});
这can be done in vanilla JavaScript了。如果你不关心IE8或早期的版本:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("error").innerHTML = "Invalid username or password.
});
非常感谢你,本!我非常感谢帮助。我们只是说JavaScript不是我的强项之一。 ;)我需要更多地使用JQuery。你的脚本适合我。万分感谢! – 2014-11-25 04:14:37
<?php
session_start(); // Can't forget to start a session!
//Connect to the database
include_once "connect/connect_to_mysql.php";
?>
<!DOCTYPE html>
<html>
<head>
<title>Timeclock Login</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
<div class="largetext">
Timeclock<span style="font-weight:300;">Login</span>
</div>
<div class="loginbox">
<form action="index.php" method="post" enctype="multipart/form-data" name="login" id="login">
<div id="error"></div>
<label><input type="text" name="username" placeholder="Username"></label>
<label><input type="password" name="password" placeholder="Password"></label>
<input type="submit" name="Login" class="loginbutton" value="Log in"></input>
</form>
</div>
<?php
if ($_POST['username'] || ($_POST['password'])) {
$username = ($_POST['username']);
$password = ($_POST['password']);
// $password = preg_match("[^A-Za-z0-9]", "", $_POST['password']); // only numbers and letters
// $password = md5($password); // Hash the password for security!
// Query the database and then convert all database data into variables.
$sql = mysql_query("SELECT * FROM Users WHERE username='$username' AND password='$password' AND activated='1'");
$login_check = mysql_num_rows($sql);
if($login_check > 0){
while($row = mysql_fetch_array($sql)){
// Get member ID into a session variable
$id = $row["id"];
//session_register('id');
$_SESSION['id'] = $id;
// Get member username into a session variable
$username = $row["username"];
// Get username into a session variable
$_SESSION['username'] = $username;
// Update the 'lastlogin' field to current date/time
mysql_query("UPDATE Users SET lastlogin=now() WHERE id='$id'");
// If successful, redirect to profile
header("location: main.php");
exit();
}
} else {
// Print login failure message to the user and link them back to your login page
echo '<script>document.getElementById("error").innerHTML = "Invalid username or password."</script>';
}
}
?>
</body>
</html>
试试上面。通过这个元素将在脚本执行之前被加载。
在渲染到页面之前,您无法引用元素。 – epascarello 2014-11-25 03:58:28
如果您需要客户端代码或标记方面的帮助,请发布客户端获取的内容(例如show source),而不是生成它的服务器代码。 – RobG 2014-11-25 03:58:49
你能改变回应'';并看看它是否有效 – Satya 2014-11-25 03:58:55