Getting form id, obvious solution not working. Here's an alternate approach.
Dimitrios Desyllas
Posted on October 2, 2024
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.
Posted on October 2, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 28, 2024