Menu
My purpose: If the user field and password field are blank, I want to stop form submitting. This is my Code that I am trying:
<!DOCTYPE html> <html> <head> <script> function doit() { var usr = document.getElementById('ur').value; var psw = document.getElementById('pw').value; if ((usr.trim() == '') && (psw.trim() == '')) { alert("cannot Submit form"); return false; } } </script> </head> <body> <form action="post.php" method="post" onsubmit="doit()"> User: <input type="text" id="ur" name="user"> <br> <br> Pass: <input type="password" id="pw" name="pass"> <br> <br> <button>Submit</button> </form> </body> </html> I am learning JavaScript. Will be helpful if you correct the code with a little explanation why it is not working.
834
return false cancels the default submit action(stops the submission of form).
Use the return value of the function to stop the execution of a form in JavaScript. False would return if the form fails to submit.
You use return false to prevent something from happening. So if you have a script running on submit then return false will prevent the submit from working. Show activity on this post. When a return statement is called in a function, the execution of this function is stopped.
It stops executing of function and make this function return value passed ( false in this case). Your function is "submit" event callback. If this callback returns false , form will not be submitted actually. Otherwise, it will be submitted as it would do without JavaScript.
return false is working fine, the way you are calling that function is wrong.
<form action="post.php" method="post" onsubmit="doit()"> Just calls it, doesn't do anything with the return value
<form action="post.php" method="post" onsubmit="return doit()"> ^ Will stop the form post on a false returned value.
Read this note on MSDN although it is not IE specific
You can override this event by returning false in the event handler. Use this capability to validate data on the client side to prevent invalid data from being submitted to the server. If the event handler is called by the onsubmit attribute of the form object, the code must explicitly request the return value using the return function, and the event handler must provide an explicit return value for each possible code path in the event handler function.
Now onto another important point.
Your if condition will only stop form submission when both the fields are blank, whereas it should do that even if any one of those two fields is blank. That && (AND) should be an || (OR), and at the end of your functions if nothing returned false, return true then.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
