Click here to Skip to main content
15,846,346 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi!, Very new to html.
I have been searching for solutions for hoursssss.
I have this problem.

I want to accept only certain user inputs .
in this case, keeperrank shall only be "Senior", "Junior" , "Standard"
if it is , anything else, it will not accept it.

But it keeps accepting other inputs such as "D".
Did i do something wrong in the script?

This is also taking action from a jsp file.
since i connected this to a database from mysql.

or am i supposed to write the code in jsp file?

What I have tried:

Heres my code so far,
<html>
<head>
<title>Course Master</title>
<script>
var keeperrank = document.getElementById("keeperrank");


if (keeperrank.value == '' || keeperrank.value != "Senior" || keeperrank.value != "Junior" || keeperrank.value != "Standard"){
messages.push("Please Enter Valid Ranks Only")
return false;
}
else return true;




</script>
</head>

<body>
	<form action="course_action.jsp">
		Keeper ID : <input type="text" name="keeperID" required><br><br>
		Keeper name : <input type="text" name="keepername"><br><br>
	Keeper rank: <input type="text" name="keeperrank" required><br><br>
		Date of Birth : <input type="text" name="dateofbirth"><br><br>
	
		<button type="submit">Save</button> 
		<button type="refresh">Clear</button>
	</form>
</body>
</html>
Posted
Updated 8-Dec-21 0:54am

Quote:
HTML
<script>
var keeperrank = document.getElementById("keeperrank");


if (keeperrank.value == '' || keeperrank.value != "Senior" || keeperrank.value != "Junior" || keeperrank.value != "Standard"){
messages.push("Please Enter Valid Ranks Only")
return false;
}
else return true;
</script>
Your script runs once, when the page first loads. At that point, the user hasn't had a chance to type anything in yet. Your return statements don't do anything, since there's no function to return from. And you'll get a script error, since you haven't defined the messages variable anywhere.

You also haven't added an ID to your keeperrank field, so document.getElementById("keeperrank") will return null, giving you more script errors.

You need to add the ID attribute to the keeperrank element, and run your script in response to the form being submitted:
JavaScript
document.addEventListener("submit", function(e) {
    if (e.target.tagName.toUpperCase() !== "FORM") { return; }
    
    const rank = document.getElementById("keeperrank").value;
    if (rank === "") {
        alert("Please enter a rank");
        e.preventDefault();
        return;
    }
    
    if (rank !== "Senior" && rank !== "Junior" && rank !== "Standard") {
        alert("Please enter a valid rank");
        e.preventDefault();
        return;
    }
});
If you want to force the correct value, you could use a <select> instead of an <input>, avoiding the need to use script at all:
HTML
<p>Keeper rank: <select name="keeperrank" required>
    <option>(Select one)</option>
    <option value="Senior">Senior</option>
    <option value="Junior">Junior</option>
    <option value="Standard">Standard</option>
</select></p>
<select>: The HTML Select element - HTML: HyperText Markup Language | MDN[^]
 
Share this answer
 
The three expressions need to be connected with the and (&&) operator, not or (||).
That is the tests are
IF the value is blank OR
    the value is not equal to "Senior" AND not equal to "Junior" AND not equal to "Standard"
THEN
    post the error message.

ELSE
    it must be non-blank and equal to one of those words.

JavaScript
if (keeperrank.value == '' || (keeperrank.value != "Senior" && keeperrank.value != "Junior" && keeperrank.value != "Standard"){
messages.push("Please Enter Valid Ranks Only")
return false;
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900