I have been trying to figure out this prob of mine for a while now. Please see my code below. I want to compare my password and confirm my password. If it is not equal, then I want my button to be disabled. Then if it matched, then I want the button to be enabled. I'm using ejs template, so it's hard for me to put js inside. I am just a beginner. like this
javascript code for disabled and enabled button
<%- include('partials/header') %>
<%function check_pass() {%>
<% if (document.getElementById('password').value == document.getElementById('conpassword').value) {%>
<% document.getElementById('submit').disabled = false;%>
<% }else {%>
<% document.getElementById('submit').disabled = true;%>
<% }%>
<% }%>
<div class="login-page">
<form autocomplete="off" action="/register" method="POST">
<h1> Sign Up</h1>
<label for="lastname"> Last Name </label>
<input autocomplete="off" type="text" name="lastname" />
<label for="firstname"> First Name </label>
<input autocomplete="off" type="text" name="firstname" />
<label for="email"> Email </label>
<input autocomplete="off" type="email" name="username" />
<label for="password"> Password </label>
<input name="password" id="password" type="password" onchange='check_pass()'/>
<label for="password"> Confirm Password </label>
<input name="conpassword" id="conpassword" type="password"onchange='check_pass()' />
<button type="submit" class="submit" id="submit" disabled>>Sign up</button>
</form>
</div>
Remove <% your script %> tag from your script and wrap in tag script HTML, it's like writing in HTML format. For more information (tags EJS) see here: documentation.
<script>
function check_pass() {
if (document.getElementById('password').value == document.getElementById('conpassword').value) {
document.getElementById('submit').disabled = false;
}else {
document.getElementById('submit').disabled = true;
}
}
check_pass();
</script>