| (3 intermediate revisions by one other user not shown) | |||
| Line 2: | Line 2: | ||
submit | submit | ||
===Type=== | ===Type=== | ||
| − | + | input | |
===Synopsis=== | ===Synopsis=== | ||
How to submit a form | How to submit a form | ||
| Line 8: | Line 8: | ||
To have a form send to the handler it must have a submit button. | To have a form send to the handler it must have a submit button. | ||
| − | + | input elements of type "'''submit'''" are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server. | |
<code>mwpausebeforerefresh</code> can be added to a submit button, to make FlexForm wait a specified number of seconds before refreshing a page after completing form actions. See example 3. | <code>mwpausebeforerefresh</code> can be added to a submit button, to make FlexForm wait a specified number of seconds before refreshing a page after completing form actions. See example 3. | ||
| Line 21: | Line 21: | ||
Meaning the user will stay on the page without the need to reload a page. This can be very handy if a page has several FlexForms that do various tasks. | Meaning the user will stay on the page without the need to reload a page. This can be very handy if a page has several FlexForms that do various tasks. | ||
| + | |||
| + | When using Ajax (JavaScript) to submit a form you can trigger another JavaScript function (a callback) when the posting has been successful. | ||
| + | |||
| + | The JavaScript function will be loaded by FlexForm on rendering the form. | ||
| + | |||
| + | Name your JavaScript file exactly as the name of the callback function. For example : Is your callback function named : '''myGreatCallBackHandler''' then the name of the file must be : '''myGreatCallBackHandler.js''' | ||
| + | |||
| + | Put your callback JavaScript in the FlexForm extension folder : <code>FlexForm/modules/customJS</code> | ||
| + | |||
| + | '''The callback function will receive the submitted form object.''' | ||
===Parameters=== | ===Parameters=== | ||
| − | + | input type="submit" | |
All other arguments like "class" "id" etc are allowed | All other arguments like "class" "id" etc are allowed | ||
| Line 30: | Line 40: | ||
Example 1 | Example 1 | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| − | < | + | <input type="submit" value="Send Request" /> |
</syntaxhighlight> | </syntaxhighlight> | ||
Example 2 | Example 2 | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| − | < | + | <input type="submit" value="Send Request" mwidentifier="ajax" /> |
</syntaxhighlight> | </syntaxhighlight> | ||
Example 3 | Example 3 | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| − | < | + | <input type="submit" mwpausebeforerefresh="2"/> |
</syntaxhighlight> | </syntaxhighlight> | ||
===Note=== | ===Note=== | ||
| ws-class-props | |||
|---|---|---|---|
| Line 1: | Line 1: | ||
{{Doc properties | {{Doc properties | ||
| − | |Subject version=2.0 | + | |Subject version=2.0,2.1 |
|Doc subject=DevOps:Doc/FlexForm | |Doc subject=DevOps:Doc/FlexForm | ||
|Doc parent=DevOps:Doc/FlexForm/1.0/input | |Doc parent=DevOps:Doc/FlexForm/1.0/input | ||
|Doc sort order=110 | |Doc sort order=110 | ||
|Doc target group=User | |Doc target group=User | ||
| + | |Doc synopsis=How to submit a form | ||
}} | }} | ||
Latest revision as of 14:19, 22 January 2024
Name
submit
Type
input
Synopsis
How to submit a form
Description
To have a form send to the handler it must have a submit button.
input elements of type "submit" are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.
mwpausebeforerefresh can be added to a submit button, to make FlexForm wait a specified number of seconds before refreshing a page after completing form actions. See example 3.
FlexForm has several ways to submit form.
Example 1 is the traditional way
A user clicks the submit button and the page refreshes or, depending on the form settings, brings the user to e.g. a thank you page.
Example 2 is submitting a Form using Ajax
Meaning the user will stay on the page without the need to reload a page. This can be very handy if a page has several FlexForms that do various tasks.
When using Ajax (JavaScript) to submit a form you can trigger another JavaScript function (a callback) when the posting has been successful.
The JavaScript function will be loaded by FlexForm on rendering the form.
Name your JavaScript file exactly as the name of the callback function. For example : Is your callback function named : myGreatCallBackHandler then the name of the file must be : myGreatCallBackHandler.js
Put your callback JavaScript in the FlexForm extension folder : FlexForm/modules/customJS
The callback function will receive the submitted form object.
Parameters
input type="submit"
All other arguments like "class" "id" etc are allowed
Example
Example 1
<input type="submit" value="Send Request" />
Example 2
<input type="submit" value="Send Request" mwidentifier="ajax" />
Example 3
<input type="submit" mwpausebeforerefresh="2"/>
Note
When a user clicks on a submit button. FlexForm disables the button (to prevent clicking more than once), will add a class of "wsform-submitting" to the form while it is being submitted and will add a class "wsform-submitted" when it is done (this last class is only relevant for ajax submit).
Links
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit
