---
{
	"title": "Postback",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Submit web form through AJAX call.",
	"altLangPrefix": "wb-postback",
	"dateModified": "2023-02-01"
}
---
<div class="wb-prettify all-pre hide"></div>

<h2>Purpose</h2>
<p>Submit web form through AJAX call.</p>

<h2>Working example</h2>
<ul>
	<li><a href="../../../demos/wb-postback/wb-postback-en.html">English example</a></li>
	<li><a hreflang="fr" href="../../../demos/wb-postback/wb-postback-fr.html">French example</a></li>
</ul>

<h2>Evaluation and report</h2>
<p>There is no evaluation and report available for this component.</p>

<h2>API (Version 1.0)</h2>
<dl class="dl-horizontal">
	<dt>Function</dt>
	<dd>Version 1.0</dd>
	<dt>Configuration</dt>
	<dd>Version 1.0</dd>
	<dt>User interface (Template)</dt>
	<dd>Version 1.0</dd>
	<dt>Data source</dt>
	<dd>Not applicable</dd>
	<dt>View and style</dt>
	<dd>Not applicable</dd>
	<dt>i18n string</dt>
	<dd>Not applicable</dd>
</dl>

<h3>Function</h3>
<p>(Version 1.0)</p>

<table class="table">
	<thead>
		<tr>
			<th>Function type</th>
			<th>Name</th>
			<th>Trigger</th>
			<th>What it does</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>jQuery Event</td>
			<td><code>wb-init.wb-postback</code></td>
			<td>Triggered manually.</td>
			<td>Used to manually initialize the plugin.</td>
		</tr>
		<tr>
			<td>jQuery Event</td>
			<td><code>wb-ready.wb-postback</code></td>
			<td>Triggered automatically after plugin initializes.</td>
			<td>Used to identify the element where plugin has initialized (target of the event)
			</td>
		</tr>
		<tr>
			<td>jQuery Event</td>
			<td><code>fail.wb-postback</code></td>
			<td>Triggered automatically after the Form submission (HTTP request) fails.</td>
			<td>Allows dynamic customization of the failure message before being shown.  The `response` from the server can be accessed at `event.data.response`.</td>
		</tr>
		<tr>
			<td>jQuery Event</td>
			<td><code>success.wb-postback</code></td>
			<td>Triggered automatically after the Form submission (HTTP request) succeeds.</td>
			<td>Allows dynamic customization of the failure message before being shown.</td>
		</tr>
	</tbody>
</table>

<h3>Configuration</h3>
<p>(Version 1.0)</p>

<table class="table">
	<thead>
		<tr>
			<th>Type</th>
			<th>Option</th>
			<th>Description</th>
			<th>How to configure</th>
			<th>Values</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>HTML attribute</td>
			<td><code>multiple</code></td>
			<td>Allows a single form to be submitted multiple times on the same page.</td>
			<td>Add a data attribute called <code>data-wb-postback-multiple</code>.</td>
			<td>
				<dl>
					<dt><code>""</code>:</dt>
					<dd>Any or no value works without impact</dd>
				</dl>
			</td>
		</tr>
		<tr>
			<td>JSON parameter</td>
			<td><code>success</code> (CSS Selector)</td>
			<td>Identify the success message block, it will remove the CSS class defined by toggle configuration on that element.</td>
			<td><code>{ "success": ".success-message" }</code></td>
			<td>CSS Selector</td>
		</tr>
		<tr>
			<td>JSON parameter</td>
			<td><code>failure</code> (CSS Selector)</td>
			<td>Identify the failure message block, it will remove the CSS class defined by toggle configuration on that element.</td>
			<td><code>{ "failure": ".failure-message" }</code></td>
			<td>CSS Selector</td>
		</tr>
		<tr>
			<td>JSON parameter</td>
			<td><code>toggle</code> (CSS Class)</td>
			<td>CSS class to remove when the success or failure message is being displayed</td>
			<td><code>{ "toggle": "hide" }</code></td>
			<td>CSS class</td>
		</tr>
	</tbody>
</table>

<h3>User interface (Template)</h3>
<p>(Version 1.0)</p>
<pre><code>&lt;form action="wb-postback-en.html" class="wb-postback" data-wb-postback='{"success":".success-message","failure":".failure-message"}'&gt;
	... form content ...
&lt;/form&gt;
&lt;p class="success-message hide"&gt;Thank you!&lt;/p&gt;
&lt;p class="failure-message hide"&gt;Something went wrong. Please submit your information via an alternative method.&lt;/p&gt;</code></pre>

<h2>Source code</h2>
<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/wb-postback">Postback source code on GitHub</a></p>
