Envoie via Ajax

Soumission de formulaire via une requête Ajax.

Pour voir cet example en action, vérifier l'onglet réseaux de la console du fureteur afin de voir la requête Ajax envoyé.

View code

<form action="wb-postback-fr.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">Prénom</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">Nom de famille</span></label>
			<input class="form-control" id="lastname1" name="lastname" type="text" data-rule-minlength="2" />
		</div>
		<div class="form-group">
			<label for="preferredNumber1"><span class="field-name">Numéro de téléphone</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">Addresse courriel</span> (test@domaine)</label>
			<input class="form-control" id="email1" name="email" type="email" />
		</div>
		<button class="btn btn-primary">Soumettre</button>
	</div>
</form>
<p class="success-message hide">Merci!</p>
<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>

Variable de bouton de soumission

Soumission de formulaire via une requête Ajax utilisant une variable de bouton de soumission.

Pour voir cet example en action, vérifier l'onglet réseaux de la console du fureteur afin de voir la requête Ajax envoyé.

View code

<form action="wb-postback-fr.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">Soumettre</button>
	</div>
</form>
<p class="success-message-2 hide">Merci!</p>
<p class="failure-message-2 hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>

Plugiciel validation de formulaires

Soumission de formulaire via une requête Ajax en utilisant le plugiciel validation de formulaires .

Pour voir cet example en action, vérifier l'onglet réseaux de la console du fureteur afin de voir la requête Ajax envoyé.

View code

<div class="wb-frmvld">
	<form action="wb-postback-fr.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">Prénom</span> <strong class="required">(obligatoire)</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">Nom de famille</span> <strong class="required">(obligatoire)</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"><span class="field-name">Numéro de téléphone</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">Addresse courriel</span> (test@domaine)</label>
				<input class="form-control" id="email2" name="email" type="email" />
			</div>
			<button class="btn btn-primary">Soumettre</button>
		</div>
	</form>
	<p class="success-message-3 hide">Merci!</p>
	<p class="failure-message-3 hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
</div>

Plugiciel validation de formulaires

Soumission de formulaire via une requête Ajax en utilisant le plugiciel validation de formulaires avec une variable de bouton de soumission.

Pour voir cet example en action, vérifier l'onglet réseaux de la console du fureteur afin de voir la requête Ajax envoyé.

View code

<div class="wb-frmvld">
	<form action="wb-postback-fr.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">Prénom</span> <strong class="required">(obligatoire)</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">Soumettre</button>
		</div>
	</form>
	<p class="success-message-4 hide">Merci!</p>
	<p class="failure-message-4 hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
</div>

Détails de la page

Date de modification :: 2023-03-06