How to access to a control connected to a lotus field using javascript

In this post I test how to access via javascript to the following controls connected to a lotus field:

• Edit Box: a control for entering a single line of data
• Hidden Input: a control for hiding data to the user

A Hidden Input control is not such as an Edit Box control with “Visible” unchecked (or with property rendered set to False) because an invisible Edit Box control is not rendered in the page, not even in the html code with an attribute type=”hidden”.

For each of these two cases I consider the case in which the document is in read and edit mode.
To access the control I use a button with a client-side script:

var value = document.getElementById("#{id:[insert the id]}").value;

and a button with a client-side script:

var value = document.getElementById("#{id:[insert the id]}").innerHTML;

1. create a form with a field named Test
2. create a document, insert a value in the field, for example “test value” and save it
3. create a xpage with the following xml code

   <?xml version="1.0" encoding="UTF-8"?>
   <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
   	<xp:label style="font-weight:bold;font-size:24pt" id="lblMode">
   		<xp:this.value><![CDATA[#{javascript:if(document1.isEditable()) {
   	"Document in edit mode";
   	} else {
   	"Document in read mode"
   	}}]]></xp:this.value>
   	</xp:label>
   	<xp:br />
   	<xp:button id="button1">
   		<xp:this.value><![CDATA[#{javascript:if(document1.isEditable()) {
   	"change to read mode";
   	} else {
   	"change to edit mode"
   	}}]]></xp:this.value>
   		<xp:eventHandler event="onclick" submit="true"
   			refreshMode="complete">
   			<xp:this.action>
   				<xp:changeDocumentMode mode="toggle" var="document1" />
   			</xp:this.action>
   		</xp:eventHandler>
   	</xp:button>
   	<xp:br />
   	<xp:br />
   
   	<xp:table>
   		<xp:tr>
   			<xp:td>
   				<xp:label value="Edit Box" id="lblEditBox" />
   			</xp:td>
   			<xp:td>
   				<xp:inputText value="#{document1.Test}" id="myEditBox" />
   
   
   
   			</xp:td>
   			<xp:td>
   				<xp:button value="get value" id="button2">
   					<xp:eventHandler event="onclick" submit="false">
   						<xp:this.script><![CDATA[var value = document.getElementById("#{id:myEditBox}").value;
   alert(value);]]></xp:this.script>
   					</xp:eventHandler>
   				</xp:button>
   			</xp:td>
   			<xp:td>
   				<xp:button value="get innerHTML" id="button3">
   					<xp:eventHandler event="onclick" submit="false">
   						<xp:this.script><![CDATA[var value = document.getElementById("#{id:myEditBox}").innerHTML;
   alert(value);]]></xp:this.script>
   					</xp:eventHandler>
   				</xp:button>
   			</xp:td>
   		</xp:tr>
   		<xp:tr>
   			<xp:td>
   				<xp:label value="Hidden Input" id="lblHiddenInput" />
   			</xp:td>
   			<xp:td>
   				<xp:inputHidden value="#{document1.Test}"
   					disableTheme="true" id="MyHiddenInput"/>
   
   			</xp:td>
   			<xp:td>
   				<xp:button value="get value" id="button4">
   					<xp:eventHandler event="onclick" submit="false">
   
   						<xp:this.script><![CDATA[var value = document.getElementById("#{id:MyHiddenInput}").value;
   alert(value);]]></xp:this.script>
   					</xp:eventHandler>
   				</xp:button>
   			</xp:td>
   			<xp:td>
   				<xp:button value="get innerHTML" id="button5">
   					<xp:eventHandler event="onclick" submit="false">
   						<xp:this.script><![CDATA[var value = document.getElementById("#{id:MyHiddenInput}").innerHTML;
   alert(value);]]></xp:this.script>
   					</xp:eventHandler>
   				</xp:button>
   			</xp:td>
   		</xp:tr>
   	</xp:table>
   	<xp:br />
   	<xp:this.data>
   		<xp:dominoDocument var="document1" formName="[your form name]" />
   	</xp:this.data>
   </xp:view>
   

In this example there is a table with two rows and four columns, containing a label in the first column, the control to be tested in the second one, a button getting the control using the .value property in the third one, a button getting the control using the .innerHTML property in the fourth one and the HTML source of the page in the fifth one.
At the line 85 replace [your form name] with the name of the form created at step 1.

To test the code, open the lotus document with a browser and see what happens using the buttons.
The following table shows the different possibilities:

<span id="view:_id1:myEditBox">test value</span>

<span id="view:_id1:lblHiddenInput">Hidden Input</span>

<input type="text" value="test value" id="view:_id1:myEditBox" name="view:_id1:myEditBox">

<input type="hidden" id="view:_id1:MyHiddenInput" name="view:_id1:MyHiddenInput" value="test value">

In read mode, you can only get the value of Edit Box control using the .innerHTML(), while in edit mode you can get the values of Edit Box and Hidden Input controls with .value()