Formulaire AJAX avec EO Framework

Nous allons voir comment envoyé un formulaire en AJAX avec EO Framework dans votre plugin WordPress.

Prenons le formulaire HTML suivant:

<form class="my-form">
	<input type="hidden" name="action" value="save_product" />
	<input type="text" name="title" />
	<input type="text" name="price_ttc" />
	<select name="color">
		<option value="red">Rouge</option>
		<option value="blue">Bleu</option>
		<option value="green">Green</option>
	</select>

	<input class="action-input" data-parent="my-form" type="submit" />
</form>

Pour ceux qui connaisse AJAXForm, le principe de EO Framework pour l’envoie de formulaire est similaire.

Ligne 1: La classe « my-form » sur la balise form est très importante pour la balise à la ligne 11

Ligne 11: La classe « action-input » permet de déclencher la requête AJAX lors du clic sur le bouton. L’attribut data-parent est attaché à « my-form », celà permet d’englober votre formulaire. Tous les inputs, select, textarea qui contiennent l’attribut « name » sera envoyé à la requête.

Gestion de la requête AJAX coté PHP

Nous allons définir la méthode PHP qui sera attaché à l’action AJAX « save_product » pour ce faire, nous allons créer un fichier product.action.php avec le contenu suivant:

<?php

class Product_Action {
	public function __construct() {
		add_action( 'wp_ajax_save_product', array( $this, 'ajax_save_product' ) );
	}

	public function ajax_save_product() {
		var_dump( $_POST );
	}
}

new Product_Action();

A ce stade là, nous avons seulement utilisé add_action de WordPress pour appeler la méthode ajax_save_product.

En utilisant le « Developer Tools » de chrome ou firefox, vous pourrez voir grâce au var_dump de la ligne 9 les entrées de votre formulaire.