J'ai eu un cas dans lequel j'avais ce formulaire :

Et j'ai essayé de récupérer son identifiant en utilisant javascript :

const form  = document.getElementById("#hello")
console.log(form.id)

Mais cela a entraîné le retour du :

HTMLElement à la place. Ainsi, afin d'atténuer ce problème, j'ai utilisé la fonction getAttribute :

const form  = document.getElementById("#hello")
console.log(form.getAttribute('id'))

Où je l'ai utilisé

À première vue, l'exemple semble être un problème peu pertinent. Mais dans mon cas, je développais une bibliothèque d'utilitaires dans laquelle un HTMLElement était reçu comme argument :

function formEnable(form,enable,resetFeedback=true){

    // checks whether for is an actual form are ommited for simplicity
    const formId = form.id
    const submitBtn = form.querySelector(`button[type="submit"]`)?? document.querySelector(`button[form="${formId}"][type="submit"]`) ?? document.querySelector(`button[form="${formId}"]`);

   if(!submitBtn){
        throw Error("Unable to enable or disable form")
   }
  // Form Enabling Logic
}

Dans mon cas, j'ai utilisé cette fonction pour placer une logique d'activation du formulaire et parce qu'une entrée cachée avec un identifiant de nom était comme champ de saisie dans mon formulaire, le bouton n'a pas pu être récupéré.

Par conséquent, j'ai fait :

function formEnable(form,enable,resetFeedback=true){

    // checks whether for is an actual form are ommited for simplicity
    const formId = form.getAttribute('id');
    const submitBtn = form.querySelector(`button[type="submit"]`)?? document.querySelector(`button[form="${formId}"][type="submit"]`) ?? document.querySelector(`button[form="${formId}"]`);

   if(!submitBtn){
        throw Error("Unable to enable or disable form")
   }
  // Form Enabling Logic
}

Assurer que j'ai reçu l'attribut id concernant l'entrée et leurs noms qui existent dans mon formulaire.