Question

A call to getElementById() to retrieve a ‘hidden’ field on a form is returning null.

I’ve studied other SO questions and many were using the hidden field’s ‘name’ instead of ‘id’ in the call to getElementById() or were executing getElementById() in a script at top-of-file before the actual html containing the hidden field had been processed by the browser. Both of those errors would explain why getElementById() was returning null for them.

I could be wrong but I don’t think that’s my case here.

This is my form:

  <form name="theDeleteItemForm" id="deleteItemForm" action="deleteTheSelectedItem" 
             method="post"
    <input type="hidden" id="theHiddenField" name="deleteThisSelectedItem" value="">
 </form> 

And here is a Javscript handler that is successfully executing when a ‘delete’ button on the page is clicked (I can tell because my alert() boxes in the handler function below are popping up):

function deleteItem()
{
    alert("Just entered deleteItem()");

    var theFieldToDelete = document.getElementById('theHiddenField');

     // THIS IS THE PLACE WHERE I FOUND THAT 'theFieldToDelete' WAS 'null'
    alert("Just got the hidden field element, which is: " +  theFieldToDelete );

      // THIS DOES NOTHING MORE THAN TO PREVENT THE 'alert' THAT FOLLOWS FROM APPEARING
    theFieldToDelete.value = "upForDeletion";

    alert("deleteItem() was called, about to submit the form");

    document.theDeleteItemForm.submit();    
}

I’m not understanding why I get the null return from getElementById(). I’m under the impression that
getElementById() works FINE for type="hidden" fields.

Furthermore, the id I used for my hidden field — theHiddenField — is 100% unique in my file.

Why am I getting null when I try to get the hidden field via getElementById() ?

Answer 1

Probably it’s because your <form> element isn’t formed properly (as in quoted example – the > is missing in the opening tag)?