Formulaire traité sous Ajax

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Formulaire traité sous Ajax

Message par Ymai »

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

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>
Quant à mon bout de PHP qui fera la validation (plus tard), il se résume à

Code : Tout sélectionner

<?php
$nom = $_GET['nom'];
echo $nom;
echo "àéeîô";  //j'explique un peu plus loin
?>
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
uncaught 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]
puis même
[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)
ce qui pourrait correspondre à un dépassement de pile vu la charge imposée par l'appui continuel sur le bouton.

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.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 6 invités