Tag Name: <a2:submit />

Description

Render a submit button

Render a submit button. The submit tag is used together with the form tag to provide asynchronous form submissions. The submit can have three different types of rendering:

Please note that the button type has advantages by adding the possibility to seperate the submitted value from the text shown on the button face, but has issues with Microsoft Internet Explorer at least up to 6.0

Examples 

  <a:submit value="%{'Submit'}" />  
  Render an image submit: <a:submit type="image" value="%{'Submit'}" label="Submit the form" src="submit.gif"/>  
  Render an button submit: <a:submit type="button" value="%{'Submit'}" label="Submit the form"/>
THE FOLLOWING IS ONLY VALID WHEN AJAX IS CONFIGURED The remote form has three basic modes of use, using the resultDivId, the notifyTopics, or the onLoadJS. You can mix and match any combination of them to get your desired result. All of these examples are contained in the Ajax example webapp. Lets go through some scenarios to see how you might use it: Show the results in another div. If you want your results to be shown in a div, use the resultDivId where the id is the id of the div you want them shown in. This is an inner HTML approah. Your results get jammed into the div for you. Here is a sample of this approach: 
  Remote form replacing another div: <div id='two' style="border: 1px solid yellow;">Initial content</div> <a:form id='theForm2' cssStyle="border: 1px solid green;" action='/AjaxRemoteForm.action' method='post' theme="ajax"> <input type='text' name='data' value='Struts User' /> <a:submit value="GO2" theme="ajax" resultDivId="two" /> </a:form >
Notify other controls(divs) of a change. Using an pub-sub model you can notify others that your control changed and they can take the appropriate action. Most likely they will execute some action to refresh. The notifyTopics does this for you. You can have many topic names in a comma delimited list. eg: notifyTopics="newPerson, dataChanged" . Here is an example of this approach: 
  <a:form id="frm1" action="newPersonWithXMLResult" theme="ajax" > <a:textfield label="Name" name="person.name" value="person.name" size="20" required="true" /> <a:submit id="submitBtn" value="Save" theme="ajax" cssClass="primary" notifyTopics="personUpdated, systemWorking" /> </a:form > <a:div href="/listPeople.action" theme="ajax" errorText="error opps" loadingText="loading..." id="cart-body" > <a:action namespace="" name="listPeople" executeResult="true" /> </a:div>
Massage the results with JavaScript. Say that your result returns some h appy XML and you want to parse it and do lots of cool things with it. The way to do this is with a onLoadJS handler. Here you provide the name of a JavaScript function to be called back with the result and the event type. The only key is that you must use the variable names 'data' and 'type' when defining the callback. For example: onLoadJS="myFancyDancyFunction(data, type)". While I talked about XML in this example, your not limited to XML, the data in the callback will be exactly whats returned as your result. Here is an example of this approach: 
  <script language="JavaScript" type="text/javascript"> function doGreatThings(data, type) { //Do whatever with your returned fragment... //Perhapps.... if xml... var xml = dojo.xml.domUtil.createDocumentFromText(data); var people = xml.getElementsByTagName("person"); for(var i = 0;i < people.length; i ++){ var person = people[i]; var name = person.getAttribute("name") var id = person.getAttribute("id") alert('Thanks dude. Person: ' + name + ' saved great!!!'); } } </script> <a:form id="frm1" action="newPersonWithXMLResult" theme="ajax" > <a:textfield label="Name" name="person.name" value="person.name" size="20" required="true" /> <a:submit id="submitBtn" value="Save" theme="ajax" cssClass="primary" onLoadJS="doGreatThings(data, type)" /> </a:form>

Attributes

Name

Required

Default

Type

Description
resultDivId false   String The id of the HTML element to place the result (this can the the form's id or any id on the page.
onLoadJS false   String Javascript code that will be executed after the form has been submitted. The format is onLoadJS='yourMethodName(data,type)'. NOTE: the words data and type must be left like that if you want the event type and the returned data.
notifyTopics false   String Topic names to post an event to after the form has been submitted.
listenTopics false   String Set listenTopics attribute.
preInvokeJS false   String Javascript code that will be executed before invokation. The format is preInvokeJS='yourMethodName(data,type)'.
label false   Object/String Supply a submit button text apart from submit value. Will have no effect for input type submit, since button text will always be the value parameter. For the type image, alt parameter will be set to this value.
src false   Object/String Supply an image src for image type submit button. Will have no effect for types input and button.
action false   String Set action attribute.
method false   String Set method attribute.
align false   String HTML align attribute.
type false input String The type of submit to use. Valid values are input, button and image.
templateDir false   Object/String The template directory.
theme false   Object/String The theme (other than default) to use for rendering the element
template false   Object/String The template (other than default) to use for rendering the element
cssClass false   Object/String The css class to use for element
cssStyle false   Object/String The css style definitions for element ro use
title false   Object/String Set the html title attribute on rendered html element
disabled false   Object/String Set the html disabled attribute on rendered html element
labelposition false   Object/String define label position of form element (top/left)
requiredposition false   Object/String define required position of required form element (left|right)
name false   Object/String The name to set for element
required false false Boolean If set to true, the rendered element will indicate that input is required
tabindex false   Object/String Set the html tabindex attribute on rendered html element
value false   Object/String Preset the value of input element.
onclick false   Object/String Set the html onclick attribute on rendered html element
ondblclick false   Object/String Set the html ondblclick attribute on rendered html element
onmousedown false   Object/String Set the html onmousedown attribute on rendered html element
onmouseup false   Object/String Set the html onmouseup attribute on rendered html element
onmouseover false   Object/String Set the html onmouseover attribute on rendered html element
onmousemove false   Object/String Set the html onmousemove attribute on rendered html element
onmouseout false   Object/String Set the html onmouseout attribute on rendered html element
onfocus false   Object/String Set the html onfocus attribute on rendered html element
onblur false   Object/String Set the html onblur attribute on rendered html element
onkeypress false   Object/String Set the html onkeypress attribute on rendered html element
onkeydown false   Object/String Set the html onkeydown attribute on rendered html element
onkeyup false   Object/String Set the html onkeyup attribute on rendered html element
onselect false   Object/String Set the html onselect attribute on rendered html element
onchange false   Object/String Set the html onchange attribute on rendered html element
accesskey false   Object/String Set the html accesskey attribute on rendered html element
tooltip false String Set the tooltip of this particular component
tooltipConfig false String Set the tooltip configuration
id false   Object/String id for referencing element. For UI and form tags it will be used as HTML id attribute

Back to Taglib Index