The following topic explains how to access page elements, such as forms and user input elements, with JavaScript.
In a stand alone web application, JavaScript typically accesses page elements by the id and name attributes. Page elements are given unique id or name attributes...
<form name="myForm" onSubmit="return validateForm()" action="myAction">
First Name: <input type="text" id="firstName"><br>
Last Name: <input type="text" id="lastName"><br>
<input type="submit" value="Submit">
</form>
...and then the page elements are accessed by JavaScript functions which refer to the id and name attributes...
<script language="JavaScript">
function validateForm()
{
var error_message = "";
if (document.myForm.firstName.value =="") error_message += "- your first name \n";
if (document.myForm.lastName.value =="") error_message += "- your last name \n";
if(error_message)
{
alert("Please fill in the following fields:\n" + error_message);
return false;
}
return true;
}
</script>
But when a web application is incorporated into a Portal application, this JavaScript technique does not suffice. This is because Portal applications may contain a collage of different web applications, with no guarantee that the page elements have unique id or name attributes. If two applications in the Portal each have page elements with the same id or name attributes, there is no way for JavaScript to access the one of these page elements, since JavaScript will always return the first page element it encounters as it searches for an element with a specified name or id. For this reason, Portal applications can be made to rewrite the name and id attributes of page elements, to ensure that each page element in the Portal has a unique identifier.
To ensure that Page Flow page elements have unique identifiers inside a Portal, use the tagId attribute to identify the page elements. Workshop will append Portal and portlet context information to the tagId and write the result to the id and name attributes that are rendered in the browser. For example, the following Page Flow elements have been given tagId attributes.
MyJSP.jsp
<netui:form tagId="myForm" onSubmit="return validateForm2()" action="myAction2">
First Name: <netui:textBox tagId="firstName" dataSource="{actionForm.firstName}"/><br>
Last Name: <netui:textBox tagId="lastName" dataSource="{actionForm.lastName}"/><br>
<netui:button type="submit" value="Submit"/>
</netui:form>
When these Page Flow elements are contained in a Portal, they are rendered in the browser as the following HTML. Notice that Workshop has rewritten the id attributes to include context information about the Portal and portlet in which the Page Flow elements appear.
<form id="portlet_3_1myForm" method="post" onsubmit="return validateForm()">
First Name: <input type="text" id="portlet_3_1{actionForm.firstName}" value=""/><br>
Last Name: <input type="text" id="portlet_3_1{actionForm.lastName}" value=""/><br>
<input type="submit" value="Submit"/>
</form>
To ensure that these page elements are available to client-side JavaScript, Workshop also provides a mapping function, getNetuiTagName( tagId, tag ), that maps the tagId values to the re-written id (and name) values that are rendered in the browser. The mapping is encoded into a JavaScript object written to the HTML source of the page.
// Build the netui_names table to map the tagId attributes
// to the real id written into the HTML
if (netui_names == null)
var netui_names = new Object();
netui_names.myForm="portlet_3_1myForm"
netui_names.firstName="portlet_3_1{actionForm.firstName}"
netui_names.lastName="portlet_3_1{actionForm.lastName}"
The function getNetuiTagName( tagId, tag ) reads this mapping object to retrieve the actual id or name attribute rendered in the browser.
The following JavaScript expression accesses the form element on the page MyJSP.jsp above.
document[getNetuiTagName("myForm",this)]
The function call getNetuiTagName( "myForm", this ) resolves to the value portlet_3_1myForm. So the JavaScript expression points at the form element on the page.
document["portlet_3_1myForm"]
To access the firstName element on MyJSP.jsp above, use the following JavaScript expression.
document[getNetuiTagName("myForm",this)][getNetuiTagName("firstName",this)]
The following JavaScript function performs simple client-side validation on MyJSP.jsp.
<script language="JavaScript">
function validateForm()
{
var error_message = "";
if (document[getNetuiTagName("myForm",this)][getNetuiTagName("firstName",this)].value =="") error_message += "- your first name \n";
if (document[getNetuiTagName("myForm",this)][getNetuiTagName("lastName",this)].value =="") error_message += "- your last name \n";
if(error_message)
{
alert("Please fill in the following fields:\n" + error_message);
return false;
}
return true;
}
</script>
If you need to pass the value of the tagId attribute to an HTML tag, use the <netui:getNetuiTagName> tag. The <netui:getNetuiTagName> returns the value of a specified tagId attribute. In the following example, the HTML tag <label> is given access to the value of the tagId attribute.
<netui:form action="processData">
<netui:radioButtonGroup dataSource="{actionForm.selection}">
<label for="<netui:getNetuiTagName tagId="radio1"/>">Display Text 1</label><netui:radioButtonOption tagId="radio1" value="value1"/><br>
<label for="<netui:getNetuiTagName tagId="radio2"/>">Display Text 2</label><netui:radioButtonOption tagId="radio2" value="value2"/><br>
<label for="<netui:getNetuiTagName tagId="radio3"/>">Display Text 3</label><netui:radioButtonOption tagId="radio3" value="value3"/><br>
</netui:radioButtonGroup>
<netui:button value="Submit" />
</netui:form>