1

ok so before I ask my question or post any code i'm going to explain what i'm trying to do.

I am using windows 10 and XAMPP. I am trying to create a register form which is mostly made of HTML and PHP however I have decided that it makes more sense to make the browser check if the password chosen by the user and it's confirmation match before even submitting it to the server rather than doing the same with PHP on backend.

for this purpose I have decided to use a simple JS code.

I am trying to bind the text written in the password field and confirmation field to two variables and then use if to check if they match however even when I intentionally type wrong confirmation, the form submits.

I tried using google chrome console to find out why. turns out that the variable I am using for password and confirmation are always equal to "" and since "" = "" the form always submits.

when I type in the console "btn" it shows me the correct HTML element which means that DOM was loaded before JS so that can't be the problem also I have written my js codes after the HTML form.

also I have noticed that in the console when I type " password.value" it always shows correctly what I have written in the field.

is it because I am writing all this in a php file? if so how can I mix JS and PHP to prevent this problem. I will post the form and the js code here.

EDIT: I undertand that my question is a bit vague so I need this edit, I know that I am not stopping the script so the form submits anyways BUT I must get the alert because I intentionally make so that password and confirm don't match!

var btn = document.getElementById('3');
btn.addEventListener('click' , function(){
  var pa = document.getElementById('password').value; 
  var co = document.getElementById('confirm').value;
  if(pa !== co)
  {
    alert("password and confirmation must match!");
  }
 });
<form method="post">
  <label for="email">Please enter your valid email address:</label> 
  <input type="email" name="email" placeholder="enter your email address" required> 
  <br> 
  <br> 
  <label for="password">Please choose a password:</label> 
  <input type="password" name ="password" placeholder="enter your password" required id="pass"> 
  <br> 
  <br> 
  <label for="confirm">Please confirm your password:</label> 
  <input type="password" name="confirm" placeholder="confirm your password" required id="conf"> 
  <br> 
  <label for="agreement">by registering on this website i agree to the <a href="#">terms and conditions!</a></label>
  <input type="checkbox" name="agreement" id=""> 
  <br> 
  <input type="submit" value="Sign Up!" id="3"> 
</form>
illidan
  • 15
  • 5
  • 1
    Can you please make an edit to format your code better? Particularly the HTML portions. – krmckone Oct 22 '19 at 15:49
  • yes I'm trying to do it. – illidan Oct 22 '19 at 15:51
  • Try expanding your if to `if( pa && co && pa !== co )` (empty strings evaluate to `falsy`) – KooiInc Oct 22 '19 at 15:51
  • 1
    Using numbers for element ids is not the best practice. And I do not see you cancelling the form submission. – epascarello Oct 22 '19 at 15:53
  • duly noted! will not use numbers as id again also edited the post the problem is not that the form submits(since I am not stopping it) the problem is that I don't get the alert xD – illidan Oct 22 '19 at 16:05
  • Your Pw/confPw ids don't match what the gEBI(id) comparison validation is looking for? `id="pass"` in the input and `getElementById('password')` in the validation – gordon Oct 22 '19 at 16:10
  • @Quentin - I don't think this is a duplicate, just someone looking for help debugging. @illidan review your debugging technique. There's this "rubber duck" method where you put an actual rubber duck on top of your monitor and you explain every single part of the code to it. You would have to tell it about "Here's the JS that gets the password value of this id from my input with this same id...... oops". In all fairness my rubber duck is rolling its eyes for as long as a couple of hours while I struggle to fix a total newbie error (like `=` when it should be `==`) – gordon Oct 22 '19 at 16:18
  • OMG you are right sir! I was using the name attribute instead of the id attribute in gEBI :OOO – illidan Oct 22 '19 at 16:19
  • @illidan feel free to +1 my comment ;-) – gordon Oct 22 '19 at 16:21
  • man i'm a total noob in stack overflow, I can't find the button to do it lol u really deserve it xD – illidan Oct 22 '19 at 16:36
  • No worries. You might not yet have the privs to get the light gray up arrow and flag icons by the comments. Oh, also, does your browser F12 console show the JS errors when they occur? You should have gotten something like "Object not found" when JS tried to find gEBI("password"). – gordon Oct 22 '19 at 17:22

0 Answers0