function displayMessage() {
var isConfirmed = confirm("Do you want to proceed?");
if (isConfirmed) {
window.location = "./proceed";
}
};
function checkIfEmpty(){
console.log("checkIfEmpty");
};@CHARSET "ISO-8859-1";
form {
margin:0 auto;
width:300px
}
input {
margin-bottom:3px;
padding:10px;
width: 100%;
border:1px solid #CCC
}
button {
padding:10px
}
label {
cursor:pointer
}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/MyProject/js/customJavaScript.js"></script>
<link href="/MyProject/css/LoginRegister.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login</title>
</head>
<body>
<form id='login-form' action="./login" method='POST'>
<label></label>
<input onkeyup="checkIfEmpty()" type="text" name="userName" placeholder="Username" required>
<input onkeyup="checkIfEmpty()" type="password" name="password" placeholder="Password" required>
<button type='submit'>Login</button>
<label><a href="./register">Register</span></label>
</form>
</body>
</html>js file with two functions in. The File:
function displayMessage() {
var isConfirmed = confirm("Are you sure you want to logout ?");
if (isConfirmed) {
window.location = "./logout";
}
}
function checkIfEmpty(){
console.log("isEmpty");
}
I am importing the file in the jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<c:url value='/js/customJavaScript.js'/>"></script>
<link href="<c:url value="/"/>css/LoginRegister.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login</title>
</head>
<body>
<form id='login-form' action="./login" method='POST'>
<label>${errorMsg}</label>
<input onkeyup=displayMessage() type="text" name="userName" placeholder="Username" required>
<input onkeyup=checkIfEmpty() type="password" name="password" placeholder="Password" required>
<button type='submit'>Login</button>
<label><a href="./register">Register</span></label>
</form>
<c:remove var="errorMsg" scope="session"/></body></html>
When activate the onkeyup on the input with the displayMessage function it is working perfectly, the confirm box is shown successfully.
However, when activating the onkeyup on the input with the checkIfEmpty function, an error is displayed in the console:
Uncaught ReferenceError: checkIfEmpty is not defined at HTMLInputElement.onkeyup
Does anyone have any suggestions?