DevOps:Doc/FlexForm/2.0/Form options - Revision history

Maintenance script: Imported by PageSync

2025-07-15T08:36:36Z

Imported by PageSync

ws-class-props
← Older revision		Revision as of 10:36, 15 July 2025
Line 1:		Line 1:
	{{~~Doc~~ properties		{{Csp class properties
	\|Subject version=2.0		\|Subject version=2.0
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm

Charlot at 07:45, 24 March 2023

2023-03-24T07:45:16Z

← Older revision		Revision as of 09:45, 24 March 2023
Line 50:		Line 50:
	==== '''no_disable_on_submit''' ====		==== '''no_disable_on_submit''' ====

	====== 'Change the default form disabled and spinner on submit' =====		====== ''Change the default form disabled and spinner on submit'' =====
	By default when someone presses the submit button to submit a form, FlexForm will show a spinner and disable the submit button, to make sure people do not press the submit button twice.		By default when someone presses the submit button to submit a form, FlexForm will show a spinner and disable the submit button, to make sure people do not press the submit button twice.
	When you add this argument to a form, you will disable this default behavior and FlexForm will not show a spinner and will not disable the submit button.		When you add this argument to a form, you will disable this default behavior and FlexForm will not show a spinner and will not disable the submit button.

Charlot at 07:44, 24 March 2023

2023-03-24T07:44:50Z

← Older revision		Revision as of 09:44, 24 March 2023
Line 45:		Line 45:
	====== ''Redirect to this page after submitting the form'' ======		====== ''Redirect to this page after submitting the form'' ======
	When a form is submitted FlexForm will return to the page the Form was submitted from. You can change it to go to another page ( like a thank-you page for example ) by setting mwreturn. mwreturn="Thank-you-page". Provide a URL (the [https://www.mediawiki.org/wiki/Help:Magic_words#URL_data <code>localurl</code> and <code>fullurl</code> magic words] may come in handy).		When a form is submitted FlexForm will return to the page the Form was submitted from. You can change it to go to another page ( like a thank-you page for example ) by setting mwreturn. mwreturn="Thank-you-page". Provide a URL (the [https://www.mediawiki.org/wiki/Help:Magic_words#URL_data <code>localurl</code> and <code>fullurl</code> magic words] may come in handy).

			<hr>

			==== '''no_disable_on_submit''' ====

			====== 'Change the default form disabled and spinner on submit' =====
			By default when someone presses the submit button to submit a form, FlexForm will show a spinner and disable the submit button, to make sure people do not press the submit button twice.
			When you add this argument to a form, you will disable this default behavior and FlexForm will not show a spinner and will not disable the submit button.


	<hr>		<hr>

Charlot at 09:12, 28 February 2023

2023-02-28T09:12:08Z

← Older revision		Revision as of 11:12, 28 February 2023
Line 153:		Line 153:
	====== ''Tell FlexForm to load a specific JavaScript with a form'' ======		====== ''Tell FlexForm to load a specific JavaScript with a form'' ======
	Sometimes it can be handy to load a JavaScript to work with a Form. For example for Validation or Realtime look-ups and you only need to load that JavaScript for a specific form, instead of having it always be loaded in e.g. common.js.		Sometimes it can be handy to load a JavaScript to work with a Form. For example for Validation or Realtime look-ups and you only need to load that JavaScript for a specific form, instead of having it always be loaded in e.g. common.js.
	'''loadscript''' by default looks into the ''FlexForm/Modules/customJS/loadScripts'' extension folder to find the JavaScript you have entered as value for loadscript. If your JavaScript is called validateForms.js, then you copy that JavaScript into the default folder and add loadscript="validateForms" to the Form tag.
			'''loadscript''' by default looks into the ''FlexForm/Modules/customJS/loadScripts'' extension folder to find the JavaScript you have entered as value for loadscript. If your JavaScript is called validateForms.js, then you copy that JavaScript into the default folder and add '''loadscript="validateForms"''' to the Form tag.


	You can also specify a different default folder using the config setting : '''$wgFlexFormConfig['loadScriptPath']''' = <path to your scripts>. See also ''Installation of FlexForm''.		You can also specify a different default folder using the config setting : '''$wgFlexFormConfig['loadScriptPath']''' = <path to your scripts>. See also ''Installation of FlexForm''.
	By request, if the script cannot be found, the form will not be rendered and a message is shown, so there is always a visual check available.		By request, if the script cannot be found, the form will not be rendered and a message is shown, so there is always a visual check available.

Charlot at 09:10, 28 February 2023

2023-02-28T09:10:55Z

← Older revision		Revision as of 11:10, 28 February 2023
Line 148:		Line 148:
	</form>		</form>
	</syntaxhighlight>		</syntaxhighlight>

			<hr>
			==== '''loadscript''' ====
			====== ''Tell FlexForm to load a specific JavaScript with a form'' ======
			Sometimes it can be handy to load a JavaScript to work with a Form. For example for Validation or Realtime look-ups and you only need to load that JavaScript for a specific form, instead of having it always be loaded in e.g. common.js.
			'''loadscript''' by default looks into the ''FlexForm/Modules/customJS/loadScripts'' extension folder to find the JavaScript you have entered as value for loadscript. If your JavaScript is called validateForms.js, then you copy that JavaScript into the default folder and add loadscript="validateForms" to the Form tag.
			You can also specify a different default folder using the config setting : '''$wgFlexFormConfig['loadScriptPath']''' = <path to your scripts>. See also ''Installation of FlexForm''.
			By request, if the script cannot be found, the form will not be rendered and a message is shown, so there is always a visual check available.

	<hr>		<hr>

Ebc16062-dd09-4928-8cf3-821f492b0c44 at 08:24, 10 February 2023

2023-02-10T08:24:50Z

← Older revision		Revision as of 10:24, 10 February 2023
Line 132:		Line 132:

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="addToWiki" id="test-autosave-form" autosave={{#if:...\|auto\|none}} >		<form action="addToWiki" id="test-autosave-form" autosave="{{#if:...\|auto\|none}}" >
	<input type="text" />		<input type="text" />
	<input type="submit" />		<input type="submit" />

Ebc16062-dd09-4928-8cf3-821f492b0c44 at 08:24, 10 February 2023

2023-02-10T08:24:07Z

← Older revision		Revision as of 10:24, 10 February 2023
Line 81:		Line 81:
	This feature has 3 options:		This feature has 3 options:

	Save a form in the background on '''oninterval''', on '''onchange''' or '''onboth'''.		Save a form in the background on '''oninterval''', on '''onchange''' or '''onboth'''.<br>
	As ~~off~~ v1.1.28 '''onintervalafterchange''' has been added.		As of v1.1.28 '''onintervalafterchange''' has been added.<br>

	It support "normal" forms as well as a form with mwidentifier="ajax", meaning a form setup to be posted as an Ajax call. Also tested with TinyMCE ( tinymce extension ).		It support "normal" forms as well as a form with mwidentifier="ajax", meaning a form setup to be posted as an Ajax call. Also tested with TinyMCE ( tinymce extension ).
Line 127:		Line 127:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="addToWiki" id="unique id per form" autosave="onintervalafterchange"></form>		<form action="addToWiki" id="unique id per form" autosave="onintervalafterchange"></form>
			</syntaxhighlight>

			Set autosave to '''none''' to not have autosave. This can be useful for templates that contain forms, when they should only have autosave in specific situations.

			<syntaxhighlight lang="html">
			<form action="addToWiki" id="test-autosave-form" autosave={{#if:...\|auto\|none}} >
			<input type="text" />
			<input type="submit" />
			</form>
	</syntaxhighlight>		</syntaxhighlight>

Charlot at 14:19, 3 January 2023

2023-01-03T14:19:59Z

← Older revision		Revision as of 16:19, 3 January 2023
Line 33:		Line 33:

	See example 2		See example 2
			<hr>

			==== '''attachmessageto''' ====

			====== ''Where to show the message'' ======
			By default, except for Ajax form submit, the default ''MediaWiki Message notifier'' is used to show your '''messageonsuccess''' or any of the other messages FlexForm might give (e.g. an error). Sometimes it can be handy to control where the notification pops-up, instead of the default right-top. You can use '''attachmessageto''' to attach the notification to an id of a certain HTML element. The notification will happen there. E.g. <code><nowiki><form attachmessageto="#my-unique-id"></nowiki></code>
	<hr>		<hr>

Charlot at 20:22, 13 December 2022

2022-12-13T20:22:29Z

← Older revision		Revision as of 22:22, 13 December 2022
Line 1:		Line 1:
	===Name===		===Name===
	~~_form~~		form
	===Type===		===Type===
	~~_form~~		form
	===Synopsis===		===Synopsis===
	Various FlexForm options		Various FlexForm options

Charlot at 20:21, 13 December 2022

2022-12-13T20:21:59Z

← Older revision		Revision as of 22:21, 13 December 2022
Line 100:		Line 100:
	This will set autosave to auto.		This will set autosave to auto.
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" id="unique id per form" autosave=""></~~_form~~>		<form action="addToWiki" id="unique id per form" autosave=""></form>
	</syntaxhighlight>		</syntaxhighlight>

Line 106:		Line 106:
	Set autosave to interval only :		Set autosave to interval only :
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" id="unique id per form" autosave="oninterval"></~~_form~~>		<form action="addToWiki" id="unique id per form" autosave="oninterval"></form>
	</syntaxhighlight>		</syntaxhighlight>

Line 112:		Line 112:
	Set autosave to change only :		Set autosave to change only :
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" id="unique id per form" autosave="onchange"></~~_form~~>		<form action="addToWiki" id="unique id per form" autosave="onchange"></form>
	</syntaxhighlight>		</syntaxhighlight>
	'''Note: A form needs to have an unique identifier set by its id'''		'''Note: A form needs to have an unique identifier set by its id'''
Line 120:		Line 120:

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" id="unique id per form" autosave="onintervalafterchange"></~~_form~~>		<form action="addToWiki" id="unique id per form" autosave="onintervalafterchange"></form>
	</syntaxhighlight>		</syntaxhighlight>

Line 129:		Line 129:
	This can be really handy to describe what form or action was responsible for the changes in the Wiki.		This can be really handy to describe what form or action was responsible for the changes in the Wiki.
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" setwikicomment="Edit user preference form" >		<form action="addToWiki" setwikicomment="Edit user preference form" >
	Your flexform elements here		Your flexform elements here
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>

Line 140:		Line 140:
	You can create an extension for FlexForm that can do additonal tasks to a Form. See extension Docs for more information		You can create an extension for FlexForm that can do additonal tasks to a Form. See extension Docs for more information
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" extension="<name of your extension" >		<form action="addToWiki" extension="<name of your extension" >
	Your flexform elements here		Your flexform elements here
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>

Line 149:		Line 149:
	Example 1 : formtarget		Example 1 : formtarget
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" formtarget="https://example.com/handleform.php" >		<form action="addToWiki" formtarget="https://example.com/handleform.php" >
	Your flexform elements here		Your flexform elements here
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>
	Example 2 : messageonsuccess		Example 2 : messageonsuccess
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" messageonsuccess="Information posted, thanks!">		<form action="addToWiki" messageonsuccess="Information posted, thanks!">
	Your flexform elements here		Your flexform elements here
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>
	Example 3 : no_submit_on_return		Example 3 : no_submit_on_return
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" no_submit_on_return>		<form action="addToWiki" no_submit_on_return>
	Your flexform elements here		Your flexform elements here
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>
	Example 4 : reCaptcha v3		Example 4 : reCaptcha v3
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="addToWiki" recaptcha-v3-action="contactform">		<form action="addToWiki" recaptcha-v3-action="contactform">
	Your flexform elements here		Your flexform elements here
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>