Getting form id. It is not what you think

I had a case in which I had this form:

<form id="hello">
   <input type="hidden" name="id" />
</form>

And i tried to retrieve its Id using javascript:

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

But this resulted returning the:

   <input type="hidden" name="id" />

HTMLElement instead. Thus in order to mitigate this issue I used the getAttribute function instead:

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

Where I used it

At first thought the example seems the issue kinda irrelevant. But in my case I was developing a utility library that a HTMLElement was received as an 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
}

In my case I used this function to place a logic for form enabling and because a hidden input with name id was as input field in my form Button failed to be retrieved.

Therefore, instead I did:

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
}

Ensuring that I received the id attribute regarding the Input and their names that exist inside my form.

The above is the detailed content of Getting form id. It is not what you think. For more information, please follow other related articles on the PHP Chinese website!