<!DOCTYPE html>
<html>
<head>
<title>Password Protected Form</title>
</head>
<body>
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit" id="submit-button" disabled>Submit</button>
</form>
<script>
// Change this variable to the correct password
const correctPassword = "password123";
// Get the password input and submit button elements
const passwordInput = document.getElementById("password");
const submitButton = document.getElementById("submit-button");
// Add an event listener to the password input that checks if the entered password is correct
passwordInput.addEventListener("input", () =>
{
if (passwordInput.value === correctPassword)
{
submitButton.disabled = false;
} else
{
submitButton.disabled = true;
}
});
</script>
</body>
</html>
The arrow function in this case checks if the entered password matches the correct password. If the entered password is correct, the submit button is enabled. Otherwise, the submit button remains disabled.
