class Mess {
 MessyMethod() {
   startSession = function () {
     document.querySelector('.rds-form').addEventListener('submit', function(e) {
       e.preventDefault();
       alert('form submitted');
     });
   }
 }
}
<form class="rds-form">
  <input /><button id="continueButton" type="submit">Submit</button>
</form>

Les gars, j'ai un projet dont la logique JavaScript a quelque chose comme ceci:

export class Mess {
  constructor(title, username) {
    this.title = title;
    this.username = username;
    this.container = document.getElementById('originalContainer');
  }

  MessyMethod() {

    this.startSession = function () {
       var self = this;
       let pwForm = pwAuthForm();
       let div = document.createElement('div');
       document.templates = [];
       div.innerHTML = pwForm;
       this.container.appendChild(div);

       document.querySelector('.rds-form').addEventListener('submit', function(e) {
          e.preventDefault();
         alert('form submitted!');
      });
    }
  }
}

L'index.html est:

<form class="rds-form">
  <input /><button id="continueButton" type="submit">Submit</button>
</form>

Donc, ce qui précède ne fonctionne pas en termes de soumission réussie, sauf si je tire ce document.querySelector() hors du this.startSession qui se trouve à l'intérieur de MessyMethod. On m'a demandé où startSession est appelé, eh bien, il n'a été appelé nulle part. Cela fonctionnait avant quand document.querySelector("continueButton").addEventListener("click", function ())

Mais je crois comprendre que c'est une mauvaise forme, il devrait cibler la classe du formulaire et écouter pour soumettre, sinon un utilisateur pourrait cliquer n'importe où dans la page et le formulaire se soumettra. Est-ce que je vais sur un mauvais chemin ici?

0
Daniel 25 sept. 2020 à 02:13

2 réponses

Meilleure réponse

Votre code fonctionne

Votre problème est de savoir comment vous appelez le startSession

Voici un exemple de travail (même code):

    class Mess {
        constructor(title, username) {
          this.title = title;
          this.username = username;
          this.container = document.getElementById('originalContainer');
        }
      
        MessyMethod() {



          this.startSession = function () {
             var self = this;
             document.querySelector('.rds-form').addEventListener('submit', function(e) {
                e.preventDefault();
               alert('form submitted!');
            });
             
             //let pwForm = pwAuthForm();
             //let div = document.createElement('div');
             //document.templates = [];
             //div.innerHTML = pwForm;
             //this.container.appendChild(div);

  
          }
        }
      }

    // I added these 3 lines
    var mess = new Mess("title !","user name !")  
    mess.MessyMethod()
    mess.startSession()    
<html>
    <body>
    <form class="rds-form">
        <input /><button type="submit">Submit</button>
      </form>
    </body>
</html>

Si vous voulez garder le même code skelaton (je suggère de refactoriser)

Sachez que la méthode startSession n'est créée que lorsque vous exécutez MessyMethod

Vous devez donc appeler MessyMethod d'abord, puis appeler startSession pour ajouter réellement l'écouteur d'événement d'envoi

0
tawfik nasser 24 sept. 2020 à 23:36

Utilisez plutôt l'écouteur onSubmit directement sur le formulaire

function submit () {
  alert('form submitted!')
}

<form class="rds-form" onsubmit="submit()">
  <input /><button type="submit">Submit</button>
</form>

https://www.w3schools.com/jsref/event_onsubmit.asp

0
user2258152 24 sept. 2020 à 23:29