Formulaire AJAX

Traiter un formulaire via AJAX

Pour utiliser AJAX avec les formulaires il nous faut récupérer les valeurs des champs de formulaire via Javascript, puis de les passer à l'URL de requête.

L'ajout des paramètres à l'URL se fait de manière tout à fait classique : une liste de clé=valeur séparés par un &, et débutée par un ?
?cle1=valeur1&cle2=valeur2&...

A noter que les valeurs des champs doivent être "échappées" (protégées) en les passant à la fonction Javascript encodeURIComponent() afin d'être transmis proprement dans l'URL.

Pour notre exemple nous avons donc un formulaire HTML avec 3 champs (post_id, name, et comment) que nous envoyons au serveur. Le serveur vérifie que les champs sont bien renseignés et retourne une réponse en conséquence :

Code HTML

/*** HTML ***/

<p id="result"></p>
<form method="get" action="">
<input type="hidden" id="post_id" value="1" />
<input type="text" id="name" />
<input type="text" id="comment" />
<input type="button" id="send" value="Envoyer" onclick="sendForm();" />
</form>

Code PHP

/*** Fichier PHP (send-form.php)
*
* Vérification des données reçues via la requête, et
* affichage d'une réponse.
*/

<?php
$post_id = ! empty($_GET['post_id']);
$name = ! empty($_GET['name']);
$comment = ! empty($_GET['comment']);

if ($post_id && $name && $comment)
echo '(PHP) OK...';
else
echo '(PHP) Error...';
?>

Code JAVASCRIPT

/*** Javascript ***/

function sendForm()
{
// Récupération des valeurs des champs de formulaire
var post_id = document.getElementById('post_id').value;
var name = document.getElementById('name').value;
var comment = document.getElementById('comment').value;

// Préparation de la querystring d'URL
var params = '?post_id=' + encodeURIComponent(post_id);
params += '&name=' + encodeURIComponent(name);
params += '&comment=' + encodeURIComponent(comment);

// Récupération de l'objet XHR
var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat
xhr.onreadystatechange = function()
{
// readyState 4 = requête terminée
if (xhr.readyState == 4)
{
// status 200 = page requêtée trouvée
if (xhr.status == 200)
ajaxBox_setText(xhr.responseText);
// Page non trouvée
else
ajaxBox_setText('Error...');
}
};

// Passage des paramètres à l'URL puis éxecution de la requête
var url = 'http://site.com/send-form.php' + params;
xhr.open('GET', url, true);
xhr.send(null);
}



// Fonction de mise à jour du contenu de l'élement HTML #result
function ajaxBox_setText(pText)
{
var p = document.getElementById('result');
p.appendChild(document.createTextNode(pText));
}

A NOTER : Si une balise <form> est utilisée, ne mettez pas de bouton de type "submit" mais plutôt un type "button" afin d'éviter l'envoi "classique" (POST) du formulaire EN PLUS de l’exécution de la fonction sendForm() ici directement définie lors de l'évènement onclick.