Html Question posted in
Some basic documentation can be found here.

Html – onsubmit event not working if in the form is a input with confirm name

onsubmit event not working if in the form is a input with confirm name or id .

if i add below input to the form the onsubmit event not working

  <input type="checkbox" name="confirm" id="confirm">

<form action="/" method="post" onsubmit="return confirm('Are you sure ?')">
  <input type="text" name="name">
  <br>
  <input type="checkbox" name="confirm" id="confirm">
  <button type="submit">submit</button>
</form>

when i removed the input with confirm name the onsubmit event work!!!
it is very strange and unusual.

Tags:

4

Answers


  1. 0

    Avoid using reserved words or built-in function names for form element names or IDs.
    This issue occurs b/c confirm is a built_in JS function that shows a dialog box with OK & cancel buttons. When a form input is named or has an ID of "confirm", it conflicts with this function, which causes the onsubmit event to fail.

    Rename the checkbox to something like confirmCheck.

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form action="/" method="post" onsubmit="return confirm('Are you sure ?')">
    <input type="text" name="name">
    <br>
    <input type="checkbox" name="confirmCheck" id="confirmCheck">
    <button type="submit">submit</button>
</form>
</body>
</html>
    Login or Signup to reply.
  2. 0

    The confirmation dialog for the form’s onsubmit property is probably interfering with the form submission process, which is causing the issue you’re seeing. In particular, the form submission will be stopped if the user does not confirm the dialog. This can be problematic if you anticipate specific actions to be performed independent of the user’s approval.

    Here’s a summary of how you can deal with this better:

    Ensure Checkbox-Based Form Submission: You must check the checkbox’s state in the Java Script function if you want to make sure the form only submits when the user confirms the dialog and the checkbox is checked.

    JavaScript Validation: Change the onsubmit function to first ask for confirmation after determining whether the checkbox is checked.

    This is the most recent version of your form:

    <form action="/" method="post" onsubmit="return validateForm()">
  <input type="text" name="name">
  <br>
  <input type="checkbox" name="confirm" id="confirm"> I agree
  <button type="submit">submit</button>
</form>

<script>
  function validateForm() {
    var checkbox = document.getElementById('confirm');
    if (!checkbox.checked) {
      alert('You must agree to the terms.');
      return false;
    }
    return confirm('Are you sure?');
  }
</script>

    Within this code:

    • The validateForm function verifies whether the ID confirm checkbox is
      ticked.
    • An alert notifies the user that they were must accept the terms if
      the checkbox is not checked.
    • The confirmation dialog box opens if the checkbox is selected. The
      user cannot submit the form if they select "Cancel" in the
      confirmation popup.

    This guarantees that the form submission will only continue if the user approves the action and the checkbox is checked.

    Login or Signup to reply.
  3. 0

    Your issue is that the scope of onXYZ attribute handlers (DOM level 0 handlers) is "augmented" in a way that adds the form’s identifiers to the scope of your script specified in the attribute, and so confirm ends up referring to your input element, not the browser’s confirm method (window.confirm).

    To do this, the browser creates an ad-hoc function and puts the content of your attribute into this function (return confirm('Are you sure ?')), which gets executed when the event (in your case onsubmit) is fired, however, most browsers will change the scope chain of this function so that it’s populated with properties from the document, the form and the current element. So your onsubmit code is wrapped in a function more or less that looks like this (see reference):

    function onsubmit(event) {
  with (document) {
    with (this.form) { // in your case `undefined` (not applicable in this scenario, but good to know for when you add `onXYZ` attributes to input elements inside a form for example)
      with (this) { // in your case, `this` is the form element (and has properties like the `confirm` and `name` inputs)
        return confirm('Are you sure ?') // contents of your onsubmit attribute is inserted into here (here `confirm` refers to the input element, not the browsers confirm method due to the with-block above)
      }
    }
  }
}

    Since the scope of your onsubmit method is modified to have bindings for the properties of your form, accessing confirm (or name) accesses the DOM input elements, not the global confirm method. The easiest fix for this is to access window.confirm, or change your form name and id so it doesn’t conflict with a global:

    <form action="/" method="post" onsubmit="return window.confirm('Are you sure ?')">
  <input type="text" name="name">
  <br>
  <input type="checkbox" name="confirm" id="confirm">
  <button type="submit">submit</button>
</form>

    But the more appropriate fix would be to avoid using DOM level 0 attribute event handlers, and instead, use addEventListener() with e.preventDefault() to stop the form from submitting.

    const form = document.getElementById("form");

form.addEventListener("submit", event => {
  if(!confirm('Are you sure ?')) {
    event.preventDefault();
  }
});
    <form action="/" method="post" id="form">
  <input type="text" name="name">
  <br>
  <input type="checkbox" name="confirm" id="confirm">
  <button type="submit">submit</button>
</form>
    Login or Signup to reply.
  4. 0

    The issue occurs because the confirm() function in your onsubmit event is being overridden by the confirm input element. When you have an element with an id, it creates a global variable with that name, which can interfere with built-in JavaScript functions.

    To fix this, you have a few options:

    1. Change the name and id of the checkbox:
    <!-- 
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
  <form action="/" method="post" onsubmit="return confirm('Are you sure ?')">
  <input type="text" name="name">
  <br>
  <input type="checkbox" name="agreement" id="agreement">
  <button type="submit">submit</button>
</form>
</body>

</html>
    1. Use a different function name for the confirmation:
    <!-- 
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
  <form action="/" method="post" onsubmit="return confirmSubmission()">
  <input type="text" name="name">
  <br>
  <input type="checkbox" name="confirm" id="confirm">
  <button type="submit">submit</button>
</form>

<script>
function confirmSubmission() {
  return confirm('Are you sure ?');
}
</script>
</body>

</html>
    1. Use addEventListener instead of the inline onsubmit attribute:
    <!-- 
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Browser</title>
</head>

<body>
    <form action="/" method="post" id="myForm">
        <input type="text" name="name">
        <br>
        <input type="checkbox" name="confirm" id="confirm">
        <button type="submit">submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            if (!confirm('Are you sure ?')) {
                event.preventDefault();
            }
        });
    </script>
</body>

</html>

    Any of these solutions should resolve the issue and allow your form submission confirmation to work properly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search