# Form 1.0.5+

# Form Draft

1.0.7+ | 1.1.2+

# Basic usage

See PHP / Controller Plugin / Form Draft.

# TeslaCloud.Form.Draft (tc-form-draft)

# Arguments

Argument	Type	Default value	Description
draftSaveUrl	string		URL for requests to save a draft.
draftLoadUrl	string		URL for draft load requests.
createTrigger	string	\| .js-tc-clib-createDraft	Trigger element selector for creating a draft.
updateTrigger	string	\| .js-tc-clib-updateDraft	Trigger element selector for updating the current draft.
menuTrigger	string	\| .js-tc-clib-draftMenuTrigger	Draft menu trigger element selector.
draft	string	.js-draft	Draft selector in the menu.
loadTrigger	string	.js-loadTrigger	Trigger element selector for loading a draft.
titleEditTrigger	string	.js-titleEditTrigger	Trigger element selector for editing the draft title.
deleteTrigger	string	.js-deleteTrigger	Trigger element selector for deleting a draft.
noDraftsMessage	string	.js-noDraftsMessage	No drafts created message block selector.

# Inline edit

1.0.7+ | 1.1.2+

# Basic usage

<xf:comment>The JavaScript inclusion below is only required for XenForo versions prior to 2.3.0</xf:comment>
<xf:js src="TC/ComponentLibrary/form.js" addon="TC/ComponentLibrary" min="1" />

<div class="block">
	<div class="block-container">
		<div class="block-body">
			<div class="block-row">
				<span>
					<span class="js-tc-clib-inlineEditable"
						  data-name="test_input">
                        Default value
                    </span>
					<xf:button class="button--plain button--iconOnly"
							   fa="fa-pen"
							   data-xf-click="tc-inline-edit"
							   data-edit-url="/" />
				</span>
			</div>
		</div>
	</div>
</div>

# TeslaCloud.Form.InlineEdit (tc-inline-edit)

# Arguments

Argument	Default value	Description
target	< :up \| .js-tc-clib-inlineEditable	Selector of an element with editable content.
editUrl		URL to save the new value to.

# Editable content attributes

Attribute	Description
data-name / name	The key with which the new value will be passed when saving.

# Reset Input

# Basic usage

<xf:comment>The JavaScript inclusion below is only required for XenForo versions prior to 2.3.0</xf:comment>
<xf:js src="TC/ComponentLibrary/form.js" addon="TC/ComponentLibrary" min="1" />

<xf:form class="block" data-xf-init="tc-reset-input">
	<div class="block-container">
		<div class="block-body">
			<xf:hiddenval name="hidden_val" value="Test hidden val" />

			<xf:radiorow name="radio"
						 label="Radio">
				<xf:option value="test1" data-default="true">Test 1</xf:option>
				<xf:option value="test2">Test 2</xf:option>
			</xf:radiorow>

			<xf:checkboxrow label="Check box">
				<xf:option name="checkbox[test1]" value="1"
						   data-default="true">Test 1
				</xf:option>
				<xf:option name="checkbox[test2]" value="1"
						   data-default="true">Test 2
				</xf:option>
			</xf:checkboxrow>

			<xf:selectrow name="select" label="Select">
				<xf:option value="test1">Test 1</xf:option>
				<xf:option value="test2" data-default="true">Test 2</xf:option>
				<xf:option value="test3">Test 3</xf:option>
				<xf:option value="test4">Test 4</xf:option>
			</xf:selectrow>

			<xf:selectrow name="select_multiple" label="Select multiple" multiple="true">
				<xf:option value="test1">Test 1</xf:option>
				<xf:option value="test2" data-default="true">Test 2</xf:option>
				<xf:option value="test3">Test 3</xf:option>
				<xf:option value="test4" data-default="true">Test 4</xf:option>
			</xf:selectrow>

			<xf:textboxrow name="text_box"
						   label="Text box"
						   data-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />

			<xf:numberboxrow name="number"
							 label="Number"
							 data-default="1337" />

			<xf:passwordboxrow name="password"
							   label="Password" />

			<xf:dateinputrow name="date"
							 label="Date"
							 data-default="04-06-2010" />

			<xf:textarearow name="textarea"
							label="Textarea"
							size="5" />

			<xf:codeeditorrow name="code"
							  label="Code"
							  class="codeEditor--autoSize" />

			<xf:editorrow name="editor"
						  label="Editor"
						  data-min-height="100" />
		</div>

		<xf:submitrow icon="save">
			<xf:html>
				<xf:button class="js-tc-clib-inputResetTrigger">{{ phrase('reset') }}</xf:button>
			</xf:html>
		</xf:submitrow>
	</div>
</xf:form>

# TeslaCloud.Form.ResetInput (tc-reset-input)

# Arguments

Argument	Default value	Description
inputs	\| :input:not([type=hidden]):not(:button)	Input container selector.
resetTrigger	\| .js-tc-clib-inputResetTrigger	Input reset trigger selector.

# Input attributes

Attribute	Description
data-default	Default input value. If not specified, the input will be empty after reset.

# TeslaCloud.Form

1.0.7+ | 1.1.2+

# Serialization options

Option	Type	Default value	Description
skipEmpty	bool	true	If `true`, only elements with non-empty values will be serialized.
includePassword	bool	false	If `false`, elements of type `password` will not be serialized.
includeHidden	bool	false	If `false`, elements of type `hidden` will not be serialized.

# serializeArray

Serializes a form into an array of objects containing the names of the form elements and their values.

serializeArray(elements, options = {})

# Arguments

Argument	Type	Default value	Description
elements	HTMLFormElement\|NodeList\|HTMLCollection\|jQuery	true	Object to be serialized. A jQuery object can only contain an HTML form or its container.
options	Object		See Serialization options.

# serializeFormData

Serializes a form into a FormData object.

serializeArray(elements, options = {})

# Arguments

Argument	Type	Default value	Description
elements	HTMLFormElement\|NodeList\|HTMLCollection\|jQuery	true	Object to be serialized. A jQuery object can only contain an HTML form or its container.
options	Object		See Serialization options.

# serializeJSON

Serializes a form into a JSON object.

serializeArray(elements, options = {})

# Arguments

Argument	Type	Default value	Description
elements	HTMLFormElement\|NodeList\|HTMLCollection\|jQuery	true	Object to be serialized. A jQuery object can only contain an HTML form or its container.
options	Object		See Serialization options.

# deserialize

Deserializes forms.

deserialize(elements, data)

# Arguments

Argument	Type	Description
elements	HTMLFormElement\|NodeList\|HTMLCollection\|jQuery	Object to be deserialized. A jQuery object can only contain an HTML form or its container.
data	Array\|FormData\|Object	Data to be deserialized.