Please make sure you have read the Tag Syntax document and understand how tag attribute syntax works.

Description

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:

• input: renders as html <input type="submit"...>
• image: renders as html <input type="image"...>
• button: renders as html <button type="submit"...>

THE FOLLOWING IS ONLY VALID WHEN AJAX IS CONFIGURED

• resultDivId
• notifyTopics
• onLoadJS
• preInvokeJS

This tag works with all themes, but has special importance when combined with the form tag in the ajax theme. Please read up on the ajax theme for more information.

Parameters

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.
theme	false		Object/String	The theme (other than default) to use for rendering the element
templateDir	false		Object/String	The template directory (other than default) to used to find the themes and hence the template.
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	left	Object/String	deprecated.
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 ekement
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

Examples

Example 1

<ww:submit value="%{'Submit'}" />

Example 2

Render an image submit:
<ww:submit type="image" value="%{'Submit'}" label="Submit the form" src="submit.gif"/>

Example 3

Render an button submit:
<ww:submit type="button" value="%{'Submit'}" label="Submit the form"/>

Example 4

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>
<ww:form
      id='theForm2'
      cssStyle="border: 1px solid green;"
      action='/AjaxRemoteForm.action'
      method='post'
      theme="ajax">

  <input type='text' name='data' value='WebWork User' />
  <ww:submit value="GO2" theme="ajax" resultDivId="two" />

</ww:form >

Example 5

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:

<ww:form id="frm1" action="newPersonWithXMLResult" theme="ajax"  >
    <ww:textfield label="Name" name="person.name" value="person.name" size="20" required="true" />
    <ww:submit id="submitBtn" value="Save" theme="ajax"  cssClass="primary"  notifyTopics="personUpdated, systemWorking" />
</ww:form >

<ww:div href="/listPeople.action" theme="ajax" errorText="error opps"
        loadingText="loading..." id="cart-body" >
    <ww:action namespace="" name="listPeople" executeResult="true" />
</ww:div>

Example 6

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>

<ww:form id="frm1" action="newPersonWithXMLResult" theme="ajax"  >
    <ww:textfield label="Name" name="person.name" value="person.name" size="20" required="true" />
    <ww:submit id="submitBtn" value="Save" theme="ajax"  cssClass="primary"  onLoadJS="doGreatThings(data, type)" /> 
</ww:form>