Postback

Submit web form through AJAX call.

To see this example in action, check the network tab of browser console to see AJAX request sent.

Thank you!

Something went wrong. Please submit your information via an alternative method.

View code
<form action="wb-postback-en.html" class="wb-postback" data-wb-postback="{&quot;success&quot;:&quot;success-message&quot;,&quot;failure&quot;:&quot;failure-message&quot;}">
	<div class="form-content">
		<div class="form-group">
			<label for="firstname"><span class="field-name">First Name</span></label>
			<input class="form-control" id="firstname" name="firstname" type="text" data-rule-minlength="2" />
		</div>
		<div class="form-group">
			<label for="lastname"><span class="field-name">Last Name</span></label>
			<input class="form-control" id="lastname" name="lastname" type="text" data-rule-minlength="2" />
		</div>
		<div class="form-group">
			<label for="preferredNumber">Preferred: <span class="field-name">Phone Number</span></label>
			<input class="form-control" id="preferredNumber" name="preferredNumber" type="tel" data-rule-phoneUS="true" />
		</div>
		<div class="form-group">
			<label for="email"><span class="field-name">Email Address</span> (test@domaine)</label>
			<input class="form-control" id="email" name="email" type="email" />
		</div>
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>
<p class="success-message hide">Thank you!</p>
<p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p>

Submit web form through AJAX call using also the Form Validation plugin.

To see this example in action, check the network tab of browser console to see AJAX request sent.

Thank you!

Something went wrong. Please submit your information via an alternative method.

View code

Consider adding an aria-hidden="true" attribute to <strong class="required"> (i.e. <strong class="required" aria-hidden="true">) in required field labels. Hardcoding it will prevent screen readers from announcing "required" twice in the noscript and basic HTML versions of the page. The form validation plugin automatically adds the attribute to the JavaScript version. Don't use the attribute in required <legend> elements.


		<div class="wb-frmvld">
		<form action="wb-postback-en.html" class="wb-postback" data-wb-postback="{&quot;success&quot;:&quot;success-message-2&quot;,&quot;failure&quot;:&quot;failure-message-2&quot;}">
	<div class="form-content">
		<div class="form-group">
			<label for="firstname" class="required"><span class="field-name">First Name</span> <strong class="required">(required)</strong></label>
			<input class="form-control" id="firstname" name="firstname" type="text" data-rule-minlength="2" required="required" />
		</div>
		<div class="form-group">
			<label for="lastname" class="required"><span class="field-name">Last Name</span> <strong class="required">(required)</strong></label>
			<input class="form-control" id="lastname" name="lastname" type="text" data-rule-minlength="2" required="required"/>
		</div>
		<div class="form-group">
			<label for="preferredNumber">Preferred: <span class="field-name">Phone Number</span></label>
			<input class="form-control" id="preferredNumber" name="preferredNumber" type="tel" data-rule-phoneUS="true" />
		</div>
		<div class="form-group">
			<label for="email"><span class="field-name">Email Address</span> (test@domaine)</label>
			<input class="form-control" id="email" name="email" type="email" />
		</div>
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>
<p class="success-message-2 hide">Thank you!</p>
<p class="failure-message-2 hide">Something went wrong. Please submit your information via an alternative method.</p>
</div>
Date modified: