Onclick vs Onsubmit issues (True/false and alert behaviors?)
Question
Long story short, I'm trying to understand how to utilize onsubmit correctly. The testresults function works fine with onclick, but I can't get it to active on submit (with a button, or hitting enter). Am I missing something here? Ultimately, I just want onsubmit to run a check and give the same sorts of border change/alert as onclick would. Is this not possible?
function testResults(form) {
var TestVar = form.firstname.value;
if (TestVar.length > 0) {
alert("You typed: " + TestVar);
document.getElementById('firstname').style.border = ''
} else {
alert("You didn't typed!" + TestVar);
document.getElementById('firstname').style.border = '1px solid red';
return false;
}
return true;
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="note.css">
<script type="text/javascript" src="formJS2.js"></script>
</head>
<body>
<form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults();"> <span>First name:</span>
<input type="text" name="firstname" id="firstname" value="" />
<br>
<input type="submit" value="Submit">
<input type="button" name="button" value="Click" onClick="testResults(this.form)">
</form>
</body>
</html>
4 answers
solution1
3 ACCPTED 2013-04-04 15:08:31
Yes, you're missing something. Your testResults function has a form parameter, but when you call it in the onSubmit attribute you're not passing any value (so form inside the function will be undefined ). Change it to:
<form NAME="myform" ACTION="" METHOD="GET" onSubmit="testResults(this);">
solution2
2 2013-04-04 15:08:02
simply use :
onSubmit="testResults(this);"
explanation : your Method expects an argument of type form, you need to pass it...
solution3
1 2013-04-04 15:14:18
Your current approach is that you expect form as the first parameter to your onsubmit callback. The other answers already indicated that you simply have to pass it in.
Normally when you have an event handler the first parameter is the event. By overriding it with your own function in this manner you lose the ability to do anything with the event. In this example you can get away with it but if you're looking for a way to do it right then here is my suggestion:
<form method="post" action="submit.php" id="my_form">
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
document.getElementById("my_form").addEventListener("submit", function (event) {
if (false === form_is_valid(event.target)) {
event.preventDefault(); // prevents submitting to submit.php
}
});
</script>
Disclaimer: This is code not complete and will not work in all (older) browser. It's merely to illustrate how to use event handling.
solution4
0 2013-04-04 15:28:39
you can also use this
<input type="button" name="button" value="Click" onClick="return testResults(this.form)">
simply put return before your function and return true or false accordingly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.