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.

You have included a <script> tag in your html file, that references your javascript file, right? — Maurice Perry
– Maurice Perry, Commented Dec 15, 2014 at 6:50
i found its working perfectly in latest chrome 39.0 and IE 9. Also there doesn't seem any issue with your code. Can you please update the browser version in which its not working? You may wish to use document.getElementById('actualFirstName') instead of document.form01.actualFirstName — Amitesh
– Amitesh, Commented Dec 15, 2014 at 6:52

deviloper · Accepted Answer · 2014-12-15 06:58:40Z

1

<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>

edited Dec 15, 2014 at 6:58

answered Dec 15, 2014 at 6:30

deviloper

7,25210 gold badges52 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

xngvue Over a year ago

It works only if I add in the JS file into the HTML file as a script, but when I separate them into two different files, as an HTML and JS file, and use the onsubmit event handler, it still does not fire my JS. This is just a condensed version of my HTML and JS file; originally the coding is a lot more. Thanks for your help though. :)

deviloper Over a year ago

As Maurice Perry said, You have included a <script> tag in your html file, that references your javascript file, right?

Alfred Alfizo Mosima Over a year ago

Try script tag like to reference your js file obviously depending on your file structure <script src="/jsfiles/validateTextbox.js" type="text/javascript"></script>

Awanish · Accepted Answer · 2014-12-15 07:19:14Z

0

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>

answered Dec 15, 2014 at 7:19

Awanish

3671 gold badge3 silver badges16 bronze badges

4 Comments

xngvue Over a year ago

Works on the "Run Code Snippet" here on stackoverflow, but does not work for me. I copied and paste your code directly into a new HTML and JS file (just changing file names), tested the HTML page and still DID NOT work for me. I also changed the <script src="myscripts.js"></script> to <script src="/javaScriptFiles/newArtist.js" type="text/javascript"></script>. I don't know what is going on.

Awanish Over a year ago

I tried it on my local before sharing this. It worked fine for me.. I have html file and myscripts.js file in the same folder. I event tried moving the js file to new folder javaScriptFiles. For that you have to remove the slash before javascript - "javaScriptFiles/newArtist.js". What is the folder structure you are using? I have put html file and javaScriptFiles folder in same location.. and it works..

xngvue Over a year ago

I figured it out. It was how I was typing in the file directory. I was typing <script src="/javaScriptFiles/newArtist.js" type="text/javascript"></script> instead of <script src="../javaScriptFiles/newArtist.js" type="text/javascript"></script>

Awanish Over a year ago

Cool.. that is same as what I mentioned above without "/".. Both "../javaScriptFiles/newArtist.js" and "javaScriptFiles/newArtist.js" would be fine.. Good to know that you are able to proceed further..

Collectives™ on Stack Overflow

HTML Forms - Calling JavaScript via the onsubmit event handler

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related