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
<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
<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>Page details
- Date modified: