Why is my HTML form refreshing instead of alerting once it's submitted, despite adding onsubmit="return false">? and is throwing some error?

Question

Why is this simple HTML and Javascript not working?

I just need to alert once the form is submitted. It instead is refreshing and throwing an error and sometimes throwing a CORS error also, if use type as module.

HTML File

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="JavaScript" src="script.js"></script>
  </head>
  <body>
    <form onsubmit="addUser(); return false">
      <label for="fname">First name:</label><br />
      <input type="text" id="fname" name="fname" value="" required /><br />
      <label for="lname">Last name:</label><br />
      <input type="text" id="lname" name="lname" value="" required /><br />
      <label for="lname">Phone number:</label><br />
      <input type="number" id="phone" name="phone" value="" required /><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

JavaScript File

function addUser() {
  console.log('Hello');
  alert('Hello');
}

`type="JavaScript"` is not a valid MIME type. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type) on what values you should use for `type`. You can remove the `type` attribute altogether if the script is JavaScript. — Ivar, May 24 '23 at 06:57
Instead of returning `false` you need to prevent the default behavior as shown in the [accepted answer](https://stackoverflow.com/a/19454346/3257622). — Reyno, May 24 '23 at 06:58
_Usually_ `return false` should work fine. I'm not sure if a blocking operation such as `alert()` breaks this, since it might take too long before `false` is returned. (Though in this case I think that calling `addUser()` will result in an error because the script isn't imported properly due to the `type` attribute. This error makes it so that `return false` is never reached.) — Ivar, May 24 '23 at 07:01
@DNèp I never said anything about module. Either remove the `type` completely, make it an empty string, or set it to `text/javascript`. If your `src` is truly `src="script.js"` and `script.js` only contains what you show here, then it shouldn't cause any CORS issues. If your script is located elsewhere, or is making calls to external services, then that is a different problem. — Ivar, May 24 '23 at 07:08
@Ivar yes setting it to text/javascript fixed the issue. Thank you — DNèp, May 24 '23 at 07:28
@Ivar please write it as an answer, so that I can accept it. Thanks a lot — DNèp, May 24 '23 at 07:28

score 1 · Accepted Answer · answered May 24 '23 at 07:50

The problem here is that you are using type="JavaScript" on your <script> tag. Because "JavaScript" is not a valid JavaScript MIME-type, the block will be treated as a data block and wont be processed by the browser.

This means that your addUser() function is never loaded in. Calling it will cause an error meaning that return false is never reached and thus the form submission will not be prevented.

To fix it, either use the valid JavaScript MIME-type text/javascript. Or even better, omit the type attribute altogether.

<script src="script.js"></script>

Why is my HTML form refreshing instead of alerting once it's submitted, despite adding onsubmit="return false">? and is throwing some error?

1 Answers1