Formulaire traité sous Ajax
Publié : 23 janv. 2008, 08:19
Bonjour
Je cherche partout un exemple basique de validation de formulaire sous Ajax afin de comprendre le processus. Sans trouver quoi que ce soit de simple.
Je tente donc d'écrire une procédure qui me servirait de modèle:
Ci-dessous, le code HTML et Javascript
Quant à mon bout de PHP qui fera la validation (plus tard), il se résume à
La procédure fonctionne, mais il me reste deux questions:
1. Pourquoi est-il indispensable de désactiver le bouton d'envoi? S'il n'est pas désactivé juste après l'envoi et que l'utilisateur reste coincé sur le bouton ou clique frénétiquement sur celui-ci, la procédure plante et Firebug m'annonce fièrement
2. Comment faire pour que les caractères accentués (subrepticement ajoutés dans le bout de PHP) passent correctement? L'encodage déclaré de la page HTML semble ne pas suffire. Quand ces caractères figurent dans le code HTML, ils passent gentiment.
Merci pour tout coup de pouce. Il doit y avoir plein de choses incorrectes dans ma procédure.
Je cherche partout un exemple basique de validation de formulaire sous Ajax afin de comprendre le processus. Sans trouver quoi que ce soit de simple.
Je tente donc d'écrire une procédure qui me servirait de modèle:
Ci-dessous, le code HTML et Javascript
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script language="javascript">
function xhr ()
{
var x = null;
if (window.XMLHttpRequest)
x = new XMLHttpRequest();
else if (window.ActiveXObject)
x = new ActiveXObject("Microsoft.XMLHTTP");
else
die('Ajax non supporté');
return (x);
}
var xhr = xhr();
function ajax (formulaire)
{
formulaire.elements['Valider'].disabled = true; //desactivation indispensable du bouton
var nom = formulaire.nom.value;
xhr.open ('GET', "test.inc.php?nom="+nom,true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4)
if (xhr.status == 200)
{
document.getElementById("ok").innerHTML = xhr.responseText;
formulaire.elements['Valider'].disabled = false; //reactivation
}
}
xhr.send (null);
return (false);
}
</script>
</head>
<body>
<form name="test" onSubmit="return(ajax(this))">
Nom: <input name="nom">
<input name="Valider" value="valider" type="submit">
</form>
<div id="ok"></div>
</body>
</html>
Code : Tout sélectionner
<?php
$nom = $_GET['nom'];
echo $nom;
echo "àéeîô"; //j'explique un peu plus loin
?>1. Pourquoi est-il indispensable de désactiver le bouton d'envoi? S'il n'est pas désactivé juste après l'envoi et que l'utilisateur reste coincé sur le bouton ou clique frénétiquement sur celui-ci, la procédure plante et Firebug m'annonce fièrement
puis mêmeuncaught exception: [Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIXMLHttpRequest.send]" nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no]
ce qui pourrait correspondre à un dépassement de pile vu la charge imposée par l'appui continuel sur le bouton.[Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://localhost/sio2/test.php?nom=dddd&Valider=valider :: anonymous :: line 27" data: no]
[Break on this error] if (xhr.status == 200)
2. Comment faire pour que les caractères accentués (subrepticement ajoutés dans le bout de PHP) passent correctement? L'encodage déclaré de la page HTML semble ne pas suffire. Quand ces caractères figurent dans le code HTML, ils passent gentiment.
Merci pour tout coup de pouce. Il doit y avoir plein de choses incorrectes dans ma procédure.