---
{
	"title": "Envoie via Ajax",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Soumission de formulaire via une requête Ajax.",
	"tag": "wb-postback",
	"parentdir": "wb-postback",
	"altLangPrefix": "wb-postback",
	"dateModified": "2023-03-06"
}
---
<div class="wb-prettify all-pre hide"></div>

<p>Soumission de formulaire via une requête Ajax.</p>

<p>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é.</p>

<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>
<details class="mrgn-tp-md mrgn-bttm-md">
	<summary>View code</summary>
	<pre><code>&lt;form action="wb-postback-fr.html" class="wb-postback" data-wb-postback='{"success":".success-message","failure":".failure-message"}'&gt;
	&lt;div class="form-content"&gt;
		&lt;div class="form-group"&gt;
			&lt;label for="firstname1"&gt;&lt;span class="field-name"&gt;Prénom&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="firstname1" name="firstname" type="text" data-rule-minlength="2" /&gt;
		&lt;/div&gt;
		&lt;div class="form-group"&gt;
			&lt;label for="lastname1"&gt;&lt;span class="field-name"&gt;Nom de famille&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="lastname1" name="lastname" type="text" data-rule-minlength="2" /&gt;
		&lt;/div&gt;
		&lt;div class="form-group"&gt;
			&lt;label for="preferredNumber1"&gt;&lt;span class="field-name"&gt;Numéro de téléphone&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="preferredNumber1" name="preferredNumber" type="tel" data-rule-phoneUS="true" /&gt;
		&lt;/div&gt;
		&lt;div class="form-group"&gt;
			&lt;label for="email1"&gt;&lt;span class="field-name"&gt;Addresse courriel&lt;/span&gt; (test@domaine)&lt;/label&gt;
			&lt;input class="form-control" id="email1" name="email" type="email" /&gt;
		&lt;/div&gt;
		&lt;button class="btn btn-primary"&gt;Soumettre&lt;/button&gt;
	&lt;/div&gt;
&lt;/form&gt;
&lt;p class="success-message hide"&gt;Merci!&lt;/p&gt;
&lt;p class="failure-message hide"&gt;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.&lt;/p&gt;</code></pre>
</details>

<section>
<h2>Variable de bouton de soumission</h2>

<p>Soumission de formulaire via une requête Ajax utilisant une variable de bouton de soumission.</p>

<p>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é.</p>

<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>
<details class="mrgn-tp-md mrgn-bttm-md">
	<summary>View code</summary>
	<pre><code>&lt;form action="wb-postback-fr.html" class="wb-postback" data-wb-postback='{"success":".success-message-2","failure":".failure-message-2"}'&gt;
	&lt;div class="form-content"&gt;
		&lt;button class="btn btn-primary" name="submitBtn" value="submitBtnValue"&gt;Soumettre&lt;/button&gt;
	&lt;/div&gt;
&lt;/form&gt;
&lt;p class="success-message-2 hide"&gt;Merci!&lt;/p&gt;
&lt;p class="failure-message-2 hide"&gt;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.&lt;/p&gt;</code></pre>
</details>
</section>

<section>
<h2>Plugiciel validation de formulaires</h2>

<p>Soumission de formulaire via une requête Ajax en utilisant le plugiciel <a href="https://wet-boew.github.io/wet-boew/demos/formvalid/formvalid-fr.html">validation de formulaires</a> .</p>

<p>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é.</p>

<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>
<details class="mrgn-tp-md mrgn-bttm-md">
	<summary>View code</summary>
	{{>alertariahidden}}
	<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="wb-postback-fr.html" class="wb-postback" data-wb-postback='{"success":".success-message-3","failure":".failure-message-3"}'&gt;
		&lt;div class="form-content"&gt;
			&lt;div class="form-group"&gt;
				&lt;label for="firstname2" class="required"&gt;&lt;span class="field-name"&gt;Prénom&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
				&lt;input class="form-control" id="firstname2" name="firstname" type="text" data-rule-minlength="2" required="required" /&gt;
			&lt;/div&gt;
			&lt;div class="form-group"&gt;
				&lt;label for="lastname2" class="required"&gt;&lt;span class="field-name"&gt;Nom de famille&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
				&lt;input class="form-control" id="lastname2" name="lastname" type="text" data-rule-minlength="2" required="required" /&gt;
			&lt;/div&gt;
			&lt;div class="form-group"&gt;
				&lt;label for="preferredNumber2"&gt;&lt;span class="field-name"&gt;Numéro de téléphone&lt;/span&gt;&lt;/label&gt;
				&lt;input class="form-control" id="preferredNumber2" name="preferredNumber" type="tel" data-rule-phoneUS="true" /&gt;
			&lt;/div&gt;
			&lt;div class="form-group"&gt;
				&lt;label for="email2"&gt;&lt;span class="field-name"&gt;Addresse courriel&lt;/span&gt; (test@domaine)&lt;/label&gt;
				&lt;input class="form-control" id="email2" name="email" type="email" /&gt;
			&lt;/div&gt;
			&lt;button class="btn btn-primary"&gt;Soumettre&lt;/button&gt;
		&lt;/div&gt;
	&lt;/form&gt;
	&lt;p class="success-message-3 hide"&gt;Merci!&lt;/p&gt;
	&lt;p class="failure-message-3 hide"&gt;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.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</details>
</section>

<section>
<h2>Plugiciel validation de formulaires</h2>

<p>Soumission de formulaire via une requête Ajax en utilisant le plugiciel <a href="https://wet-boew.github.io/wet-boew/demos/formvalid/formvalid-fr.html">validation de formulaires</a>  avec une variable de bouton de soumission.</p>

<p>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é.</p>

<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>
<details class="mrgn-tp-md mrgn-bttm-md">
	<summary>View code</summary>
	{{>alertariahidden}}
	<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="wb-postback-fr.html" class="wb-postback" data-wb-postback='{"success":".success-message-4","failure":".failure-message-4"}'&gt;
		&lt;div class="form-content"&gt;
			&lt;div class="form-group"&gt;
				&lt;label for="firstname3" class="required"&gt;&lt;span class="field-name"&gt;Prénom&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
				&lt;input class="form-control" id="firstname3" name="firstname" type="text" data-rule-minlength="2" required="required" /&gt;
			&lt;/div&gt;
			&lt;button class="btn btn-primary" name="submitBtn" value="submitBtnValue"&gt;Soumettre&lt;/button&gt;
		&lt;/div&gt;
	&lt;/form&gt;
	&lt;p class="success-message-4 hide"&gt;Merci!&lt;/p&gt;
	&lt;p class="failure-message-4 hide"&gt;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.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</details>
</section>
