submit est-il un mot réservé en Javascript?

Jetez un oeil à ce code:

<html>
  <head>
    <script>
    function sayHello(){
        console.log('Hello!');
    }

    function submit(){
        console.log('Submit!')
    }
    </script>
  </head>
  <body>
    <form>
      <button onclick="sayHello()">Say hello</button>
      <button onclick="submit()">Submit</button>
    </form>

    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="submit()">Submit - outside</button>
  </body>
</html>

J'essaie de comprendre pourquoi je ne peux pas appeler la fonction submit() à l'intérieur de la balise <form> mais cela fonctionne en dehors de la balise. Je pense que c'est un mot réservé même parce que changer le nom de la fonction le script fonctionne bien mais je ne trouve aucune information à ce sujet sur mdn

Je ne suis pas un gourou JS, alors quelqu'un peut-il m'aider à comprendre ce comportement étrange?

3
Ema.jar 16 avril 2018 à 23:18

3 réponses

Meilleure réponse

Le problème est que submit() est une fonction intégrée qui est appelée chaque fois qu'un <form> est soumis. Pour lancer des fonctionnalités personnalisées dans lesquelles un formulaire est soumis, vous devrez non seulement utiliser un nom de fonction différent, mais également empêcher la soumission de formulaire par défaut avec event.preventDefault(), en passant l'événement dans la fonction.

Cela peut être vu dans ce qui suit - notez que le sayHello() effacera l'écran (avec une tentative de soumission de formulaire), tandis que customSubmit() ne le fera pas:

<html>
  <head>
    <script>
    function sayHello(){
        console.log('Hello!');
    }

    function customSubmit(e){
        e.preventDefault();
        console.log('Submit!')
    }
    </script>
  </head>
  <body>
    <form>
      <button onclick="sayHello()">Say hello</button>
      <button onclick="customSubmit(event)">Submit</button>
    </form>

    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="customSubmit(event)">Submit - outside</button>
  </body>
</html>
3
Obsidian Age 16 avril 2018 à 20:24

Appuyer sur un bouton dans un formulaire recharge la page.

<html>
  <head>
  </head>
  <body>
    <!--Any button in the form will submit the form and reload the page-->
    <form>
      <button id="btn1">Say hello</button>
      <button id="btn2">Submit</button>
      <button>Anything</button>
    </form>

    <!--these ones don't-->
    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="submit()">Submit - outside</button>
    <script>
      // notice the page loads when we click the 'anything' button, even without an event handler
      //the delay allows you to see it happening

      console.log("loading page...");
      setTimeout(welcome, 500);

      function welcome() {
        console.log("page has been loaded");
      }

      // adding preventDefault to these, stops the form from submitting
      function sayHello(e) {
          console.log('Hello!');
          e.preventDefault();
      }

      function submit(e) {
          console.log('Submit!')
          e.preventDefault();
      }


      //This is how you add event handlers

      let btn1 = document.getElementById('btn1');
      let btn2 = document.getElementById('btn2');

      btn1.addEventListener('click', sayHello);
      btn2.addEventListener('click', submit);
    </script>
  </body>
</html>
0
Graeme Stuart 16 avril 2018 à 20:36

Les boutons à l'intérieur des formulaires soumettent automatiquement le formulaire, tant que le bouton n'a pas de gestionnaire d'événements, ou a un gestionnaire d'événements qui ne preventDefault():

<form>
  <button>Say hello</button>
  <button>Submit</button>
</form>

(voir comment le formulaire est envoyé - la page de l'extrait disparaît)

Cela n'a rien à voir avec le nom de la fonction submit.

Cependant, l'utilisation de gestionnaires d'événements en ligne est une mauvaise pratique et entraîne un code mal factorisé et difficile à gérer. Pensez sérieusement à attacher vos événements avec JavaScript à la place, par exemple: https: //developer.mozilla. org / en / DOM / element.addEventListener.

Les gestionnaires en ligne doivent être évités autant que eval doivent être évités.

Si vous souhaitez empêcher un bouton dans un formulaire de soumettre le formulaire, appelez e.preventDefault() comme ceci:

function sayHello(){
  console.log('Hello!');
}
function submit(){
  console.log('Submit!')
}
const [b1, b2] = Array.from(document.querySelectorAll('button'));
b1.addEventListener('click', (e) => {
  e.preventDefault();
  sayHello();
});
b2.addEventListener('click', (e) => {
  e.preventDefault();
  submit();
});
<form>
  <button>Say hello</button>
  <button>Submit</button>
</form>
1
CertainPerformance 16 avril 2018 à 20:30