Javascript function not being called using onsubmit in html form

Question

I have a pretty simple html file with a validation function in javascript that I am trying to make execute when the form is submitted. However, I can not get the is_checked() function to run as evidence by no console log statements being executed. I am using Eclipse and an Apache TomCat 7 server which is properly executing all jsp, servlet, and html code but no javascript.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Example</title>
<script type="text/javascript">
function is_checked() { 
    console.log("is_checked() was called");
    var taskChecked = document.getElementByID('task').checked;
    var projectChecked = document.getElementByID('project').checked;
    var autoChecked = document.getElementByID('auto').checked;
    var manualChecked = document.getElementByID('manual').checked;

    console.log("taskChecked " + taskChecked);
    console.log("projectChecked " + projectChecked);
    console.log("manualChecked " + manualChecked);
    console.log("autoChecked " + autoChecked);


    if((taskChecked === "true" || projectChecked === "true") 
     && (autoChecked === "true" || manualChecked === "true")) {
        return true;
    } else {
        alert('Must select task or project and either auto or manual!');
        return false;
    }
}
</script>
</head>
<body>
<form action="#" onsubmit="return is_checked()" method="post">
<table>
    <tr>
      <td>Process Level: </td>
      <td>
       <input type="radio" name="process" value="task" id="task">Task
      </td>
      <td>
         <input type="radio" name="process" value="project"
          id="project">Project
    </td>
    </tr>
    <tr>
        <td>Method Type: </td>
        <td>
         <input type="radio" name="method" value="auto" id="auto">Auto
       </td>
        <td>
         <input type="radio" name="method" value="manual" 
             id="manual">Manual
      </td>
    </tr>
    <tr>
        <td colspan="2">
            <textarea name="ids" rows="15" cols="10"></textarea>
        </td>
    </tr>
    <tr>
        <td>
         <input type="submit" value="Submit">
       </td>
    </tr>
</table>
</form> 
</body>
</html>

why do you have is_checked() function in the form tag and in the submit tag? its doing it twice; just have it in the form tag. — unixmiah
– unixmiah, Commented Mar 17, 2015 at 17:11
I tried both methods and just forgot to remove it when I copied the code into the textarea. It is my understanding that onsubmit is what should be used in the form tag. — SciGuyMcQ
– SciGuyMcQ, Commented Mar 17, 2015 at 17:17

E_d · Accepted Answer · 2015-03-17 17:15:16Z

1

You have a typo: document.getElementByID should be replaced with document.getElementById

Btw, you are calling the function twice, you can remove the onClick in the submit input

answered Mar 17, 2015 at 17:15

E_d

1322 silver badges9 bronze badges

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

1 Comment

SciGuyMcQ Over a year ago

Wow If I had enough points to down grade my own question I would. The ID instead of Id was the problem. Thanks for the close eye on that one.

Collectives™ on Stack Overflow

Javascript function not being called using onsubmit in html form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related