Problem with getElementById and accessing a <div>

HCL Domino Domino Forum
1

May want a fresh cup of coffee for this post as it is somewhat wordy:

Setup (Notes form):

  • Web Only.

  • Form contains a

    on the form (not a page).

  • The CSS (internal for now, will eventually end up in a file) hides the DIV section via:

#changepassword { visibility:hidden; display:none; }

  • Form also contains a link which calls a Javascript function to display the password section when clicked. This is accomplished by:

      document.getElementById('changepassword').style.visibility = "visible";	

  document.getElementById('changepassword').style.display = "block";

The function works and the password “section” is now viewable/editable on the browser.

  • There is a Notes field called HTTPPassword within that div.

  • The idea behind all this is to allow users to click on a link, display a section where they can enter in a new password, and then submit it. There is a different link that the user clicks to (1) validate the password and then (2) submit the form.

Problem:

I am having issues with the getElementById to access a div’s content on a form (not a page). Firefox generates a javascript error when running the following code:

alert(‘POS’) ;

var passwordelement = document.getElementById(‘HTTPPassword’) ;

alert('passwordelement → ’ + passwordelement.value );

The first alert displays, and then the second one. However, there is no value displayed for the: passwordelement.value. This code is present in the Javascript function that is called when the user attempts to save the form.

The error in Firefox is:

Error: passwordelement has no properties and code stops executing

In IE 6.0, it also does not have a value either but IE allows the code to continue executing.

It seems the form tag generated by Domino is causing the issue. I took some html code that wasn’t working when served up by Domino and created an HTML file and placed it in the HTML directory. The getelementbyid worked as expected. Pasting that same code into a form would stop working. When I added a at the top of the form, the getelementbyid would work as expected.

HOWEVER, the code which displays the password section, i.e., document.getElementById(‘changepassword’).style.visibility = “visible”; works as expected without inserting the . The link that runs that code is within a DIV itself, although that DIV is not “hidden” via CSS or Notes

Any ideas?

Caveats:

  • No, I don’t want to use a Domino refresh

  • No, I don’t want a pop up window

thnx,

2

Subject: Problem with getElementById and accessing a

Go to the field’s HTML Properties and give it an ID (notes gives fields a “name”)

-Joe

3

Subject: A curveball

Joe, thanks. I had already tried assigning an ID to the field to no affect. However, I now realize the problem (in this case): the httppassword is a password type field, i.e., displays asterisks for the user entry. The getelementbyid and subsequent .value were always empty. However, using doc.forms. does display the value! For example:

#1 var passwordelement = document.getElementById(‘myHTTPPassword’) ;

#2 alert('passwordelement → ') + passwordelement.id ;

#3 alert('value for passwordelement → ') + passwordelement.value ;

#4 var mepw1 = document.forms[0].HTTPPassword.value;

#5 alert("mepw1: " + mepw1 ) ;

I assigned myHTTPPassword as the ID for the field. Alert #2 did not display a value. However the code keeps executing. Accessing the value in line #4 via the

document.forms[0].HTTPPassword.value; statement does provide the value! I guess getElementByID will not provide the value if is a password type field. I added a text field type and was able to access it via getelementbyid and subsequent .value of that element.

thnx,