# <netui:anchor> Tag

The <netui:anchor> tag generates a link to another document or invokes an action method in the Controller file.

## Syntax

<netui:anchor
[accessKey="string_accessKey"]
[action="string_action"]
[formSubmit="boolean_formSubmit"]
[forward="string_forward"]
[href="string_href"]
[id="string_id"]
[linkName="string_linkName"]
[location="string_location"]
[onBlur="string_onBlur"]
[onClick="string_onClick"]
[onDblClick="string_onDblClick"]
[onFocus="string_onFocus"]
[onKeyDown="string_onKeyDown"]
[onKeyPress="string_onKeyPress"]
[onKeyUp="string_onKeyUp"]
[onMouseDown="string_onMouseDown"]
[onMouseMove="string_onMouseMove"]
[onMouseOut="string_onMouseOut"]
[onMouseOver="string_onMouseOver"]
[onMouseUp="string_onMouseUp"]
[page="string_page"]
[style="string_Style"]
[styleClass="string_Class"]
[tabindex="string_tabIndex"]
[tagId="string_tagId"]
[target="string_action"] />

## Description

The <netui:anchor> tag generates a link to another document or invokes an action method in the Controller file. The <netui:anchor> tag also supports JavaScript-based form submission and URL re-writing.

An anchor must have one of five attributes to correctly create the hyperlink:

> - `action` - the action method invoked by clicking the hyperlink
> - `forward` - the forward to redirect to
> - `href` - the URL to go to
> - `linkName` - an internal place in the page to move to
> - `page` - the module-relative page URL to which this hyperlink will be rendered

## Attributes

accessKey | The keyboard navigation key for the element. The following values are not recommended because they are often used by browsers: `A, C, E, F, G, H, V, left arrow, and right arrow`
Required | Supports runtime expression evaluation | Data bindable
No | No | No
action | The action method to invoke. The action method must be in the Controller file of the Page Flow directory.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
formSubmit | Boolean. If `formSubmit` is set to true, and the <netui:anchor> tag is within a <netui:form> tag, then the form data will be submitted to the method named in the <netui:form> tag's `action` attribute.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
forward | The logical forward name from which to retrieve the hyperlink URI.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
href | The URL to go to.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
id | The id attribute is deprecated, use the `tagId` attribute instead. The id attribute of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
linkName | An internal place on the page to go to.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
location | Location within the URI to visit.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
onBlur | The onBlur JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onClick | The onClick JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onDblClick | The onDblClick JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onFocus | The onFocus JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyDown | The onKeyDown JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyPress | The onKeyPress JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyUp | The onKeyUp JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseDown | The onMouseDown JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseMove | The onMouseMove JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseOut | The onMouseOut JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseOver | The onMouseOver JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseUp | The onMouseUp JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
page | The page attribute is deprecated. The module-relative page URL to which this hyperlink will be rendered.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
style | The style of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
styleClass | The class of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
tabindex | The tabIndex of the rendered HTML tag. This attribute determines the position of the rendered HTML tag in the sequence of tags that the user may advance through by pressing the TAB key.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
tagId | String value. Sets the `id` (or `name`) attribute of the rendered HTML tag. Note that the real id attribute rendered in the browser may be changed by the application container (for example, Portal containers may change the rendered id value to ensure the uniqueness of id's on the page). In this case, the real id rendered in the browser may be looked up through the JavaScript function getNetuiTagName( tagId, tag ). For example, assume that some tag's `tagId` attribute is set to `foo`.
        <netui:textBox tagId="foo" />
Then the following JavaScript function will return the real id attribute rendered in the browser:
        getNetuiTagName( "foo", this )
To get a <netui:form> element and all of its children elements in JavaScript, use the same JavaScript function `getNetuiTagName( tagId, tag )`. For example, assume that there is a <netui:form> whose tagId attribute is set to `bar`.
        <netui:form tagId="bar" >
Then the following JavaScript function will return the <netui:form> element and its children (packaged as an array).
        document[getNetuiTagName( "bar", this )]
To retreive the value entered into a <netui:textBox> within the <netui:form> tag, use the following JavaScript expression.
        document[getNetuiTagName("bar", this)][getNetuiTagName("foo", this)].value
The second parameter ensures that the JavaScript function begins its search within the correct Portlet scope. Pass the JavaScript keyword `this` as the second parameter. For detailed information on using the function `getNetuiTagName( tagId, tag )` see Using JavaScript in Page Flow and Portal Applications.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
target | The window target.
Required | Supports runtime expression evaluation | Data bindable
No | No | No

## Sample

Submitting Form Data

In this sample, clicking on this anchor submits the form data and invokes the method `submitForm`.

          <netui:form action="formSubmit">
              Firstname:
              <netui:textBox dataSource="{actionForm.firstname}"/>
              Lastname:
              <netui:textBox dataSource="{actionForm.lastname}"/>
              <netui:anchor formSubmit="true">Submit</netui:anchor>
          </netui:form>

If the `formSubmit` attribute is set to `true` and no `onClick` attribute is set, the following JavaScript function will be written to the HTML page. This JavaScript function will be referenced by the `onclick` attribute of the generated anchor tag.

      function anchor_submit_form(netuiName, newAction)
      {
        for (var i=0; i<document.forms.length; i++) {
           if (document.forms[i].id == netuiName) {
              document.forms[i].method = "POST";
              document.forms[i].action = newAction;
              document.forms[i].submit();
           }
         }
      }

The JavaScript function will be invoked by the generated HTML anchor tag as follows:

     <a href="/WebApp/tagSamples/anchor/formSubmit.do"
           onClick='anchor_submit_form("Netui_Form_0","/WebApp/tagSamples/anchor/formSubmit.do");return false;'>Submit</a>

Custom JavaScript Functions

It is possible to write a custom `onClick` JavaScript event handler that would do additional work, for example form validation, and still POST the form correctly. To accomplish this, add the custom JavaScript method to the page:

     function SubmitFromAnchor()
     {
       // implement custom logic here

       for(var i=0; i<document.forms.length; i++)
       {
         // submit to the action /aWebapp/formPost.do
         if (document.forms[i].action == "/aWebapp/formPost.do")
         {
           document.forms[i].method="POST";
           document.forms[i].action="/aWebapp/formPost.do";
           document.forms[i].submit();
         }
       }
     }

Then reference the JavaScript method from the <netui:anchor> tag:

     <netui:anchor formSubmit="true" onClick="SubmitFromAnchor(); return false;">Submit</netui:anchor>

## Code Sample

[BEA_HOME]/weblogic81/samples/workshop/SamplesApp/WebApp/tagSamples/netui/anchor/

## Related Topics

<netui:anchor> Tag Sample

How Do I: Define an Action That Forwards Users to Another Page?

<netui:form> Tag