Javascript re-load of page before sending data to PHP script

Question

Background: I want to create a login form, the user input the "user ID" and "password". My JavaScript file checks certain parameters. If the data does not comply with them the my page is re-load. If the data is approved then after checking in JavaScript my PHP script kicks in and does other stuff.

Question: the problem I am having is that even though the data is not complaint with the JavaScript check up my page is not re-loading. It keeps sending the data to my PHP script.

Which is want I do not want.

I want to re-loed the same page and not send to PHP. I want to send the data to PHP when the data has passed the JavaScript check up.

CODE:

HTML SECTION

JavaScript SECTION

Thank you

If you guys can suggest a way to approach this situation it would be great.

Thank you.

Answer 1

Your approach is incorrect , you don't need to reload the page in case of none valid entries , I would suggest doing something similar to the following :

 function checkForm(){ if(document.getElementById("whatever").value != 'xyz') { console.log("False !") return false; } return true } 

 <form action="something.php" onsubmit="return checkForm()"> <input type="text" id="whatever"> <input type="submit"> </form>