HTML Forms - Calling JavaScript via the onsubmit event handler
Question
I am creating a simple HTML form and calling a JavaScript file via the onsubmit event handler. Oddly, whenever I click the submit button, my JS file does not fire. Help?
**UPDATED CODES
This is what I have for my condensed HTML file:
<html>
<form name="form01" id="form01" action="http://itins3.madisoncollege.edu/echo.php"
method="post" onsubmit="return checkAllTextBoxes();">
<label for="actualFirstName" class="setWidth">First Name:</label>
<input type="text" name="actualFirstName" id="actualFirstName" />
<input type="submit" value="Send Form" />
</form>
</html>
<script src="/javaScriptFiles/newArtist.js" type="text/javascript"></script>
This is what I have for my JS file:
function checkAllTextBoxes()
{
if (document.form01.actualFirstName.value.length < 2)
{
alert("First name is too short- must be at least two characters or more.");
return false;
}
return true;
}
I have been trying to figure out what went wrong, but can't seem to find the bug in my code. Tried JSHint, Firebug (FireFox), and even HTML online validators and no bugs came up. Another pair of coding eyes will be a big help. Thanks.
2 answers
solution1
1 2014-12-15 06:30:46
<form name="form01" id="form01" method="post">
<label for="actualFirstName" class="setWidth">First Name:</label>
<input type="text" name="actualFirstName" id="actualFirstName" />
<input type="submit" value="Send Form" onClick="return checkAllTextBoxes();" />
</form>
<Script>
function checkAllTextBoxes()
{
if (document.form01.actualFirstName.value.length < 2)
{
alert("First name is too short- must be at least two characters or more.");
return false;
}
else{
document.form01.action = "http://itins3.madisoncollege.edu/echo.php";
document.form01.submit;
return true;
}
</script>
solution2
0 2014-12-15 07:19:14
You have to link your js file to your html. Add link at the bottom of your html page after end tag
Here's what I tried and it works..
function checkAllTextBoxes() { if (document.form01.actualFirstName.value.length < 2) { alert("First name is too short- must be at least two characters or more."); return false; } return true; }
<html> <form name="form01" id="form01" action="http://itins3.madisoncollege.edu/echo.php" method="post" onsubmit="return checkAllTextBoxes();"> <label for="actualFirstName" class="setWidth">First Name:</label> <input type="text" name="actualFirstName" id="actualFirstName" /> <input type="submit" value="Send Form" /> </form> </html> <script src="myscripts.js"></script>
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.