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.
View code
<form action="wb-postback-en.html" class="wb-postback" data-wb-postback='{"success":".success-message","failure":".failure-message"}'>
<div class="form-content">
<div class="form-group">
<label for="firstname1"><span class="field-name">First Name</span></label>
<input class="form-control" id="firstname1" name="firstname" type="text" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="lastname1"><span class="field-name">Last Name</span></label>
<input class="form-control" id="lastname1" name="lastname" type="text" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="preferredNumber1">Preferred: <span class="field-name">Phone Number</span></label>
<input class="form-control" id="preferredNumber1" name="preferredNumber" type="tel" data-rule-phoneUS="true" />
</div>
<div class="form-group">
<label for="email1"><span class="field-name">Email Address</span> (test@domaine)</label>
<input class="form-control" id="email1" name="email" type="email" />
</div>
<button 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 button variable
Submit web form through AJAX call using a submit button variable.
To see this example in action, check the network tab of browser console to see AJAX request sent.
View code
<form action="wb-postback-en.html" class="wb-postback" data-wb-postback='{"success":".success-message-2","failure":".failure-message-2"}'>
<div class="form-content">
<button class="btn btn-primary" name="submitBtn" value="submitBtnValue">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>Form validation plugin
Submit web form through AJAX call using the form validation plugin.
To see this example in action, check the network tab of browser console to see AJAX request sent.
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='{"success":".success-message-3","failure":".failure-message-3"}'>
<div class="form-content">
<div class="form-group">
<label for="firstname2" class="required"><span class="field-name">First Name</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="firstname2" name="firstname" type="text" data-rule-minlength="2" required="required" />
</div>
<div class="form-group">
<label for="lastname2" class="required"><span class="field-name">Last Name</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="lastname2" name="lastname" type="text" data-rule-minlength="2" required="required" />
</div>
<div class="form-group">
<label for="preferredNumber2">Preferred: <span class="field-name">Phone Number</span></label>
<input class="form-control" id="preferredNumber2" name="preferredNumber" type="tel" data-rule-phoneUS="true" />
</div>
<div class="form-group">
<label for="email2"><span class="field-name">Email Address</span> (test@domaine)</label>
<input class="form-control" id="email2" name="email" type="email" />
</div>
<button class="btn btn-primary">Submit</button>
</div>
</form>
<p class="success-message-3 hide">Thank you!</p>
<p class="failure-message-3 hide">Something went wrong. Please submit your information via an alternative method.</p>
</div>Form validation plugin with submit button variable
Submit web form through AJAX call using the form validation plugin with a submit button variable.
To see this example in action, check the network tab of browser console to see AJAX request sent.
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='{"success":".success-message-4","failure":".failure-message-4"}'>
<div class="form-content">
<div class="form-group">
<label for="firstname3" class="required"><span class="field-name">First Name</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="firstname3" name="firstname" type="text" data-rule-minlength="2" required="required" />
</div>
<button class="btn btn-primary" name="submitBtn" value="submitBtnValue">Submit</button>
</div>
</form>
<p class="success-message-4 hide">Thank you!</p>
<p class="failure-message-4 hide">Something went wrong. Please submit your information via an alternative method.</p>
</div>- Date modified: