all html : Le portail des webmaster
La communauté ALL HTML c'est 58639 membres à ce jour dont 0 inscrits aujourd'hui et 37 depuis une semaine.
Article publié le vendredi 26 janvier 2007 par Dr_von_scott.
Cet article est classé dans les catégories « Javascript, PHP, web 2.0 »
Un tutoriel léger ayant pour but de vous familiariser avec AJAX par l'exemple.<br /> Nous utiliserons 3 petites fonctions simple pour verifier les données d'un formulaire en temps reel.
Imaginons un formulaire permettant la saisie d'une garantie.
<html>
<head>
<title>Saisie</title>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="verifformu.php">
<input type="hidden" name="fournisseur" value="<?php echo $_POST['fournisseur']; ?>" />
<table>
<tr>
<th colspan="2">INFORMATIONS CLIENTS</th>
</tr>
<tr>
<td>N° de code client</td>
// Nous utilisons onchange car nous ne verifions pas chaque frappe mais la saisie complete
<td><input type="text" size="6" name="cdcl" id="cdcl" onchange="ajaxcdcl()" /></td>
</tr>
<tr>
<td>Nom du revendeur</td>
<td><input type="text" size="20" name="revendeur" id="revendeur" /></td>
</tr>
<tr>
<td>Adresse</td>
<td><input type="text" size="30" name="adresserev" id="adresserev" /></td>
</tr>
<tr>
<td>Code postal</td>
<td><input id="coderev" type="text" size="5" maxlength="5" name="cdpostrev" id="cdpostrev" /></td>
</tr>
<tr>
<th colspan="2">APPAREIL</th>
</tr>
<tr>
<td>Reference de l'appareil</td>
<td><input type="text" size="20" name="refapp" /></td>
</tr>
<tr>
<td>N° de serie</td>
<td><input type="text" size="20" name="nserie" id="nserie" onchange="verifnserie()"/><span id="affnserie"></span></td>
</tr>
<tr>
<th colspan="2">CODE IRIS</th>
</tr>
<tr>
<td colspan="2">
<div id="iris">
<input type="radio" onclick="ajaxiris('lavage')"> Lavage
<input type="radio" onclick="ajaxiris('froid')"> Froid
<input type="radio" onclick="ajaxiris('cuisson')"> Cuisson
</div>
</td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="Valider" /></th>
</tr>
</table>
</form>
</body>
</html>
var xhr = null;
// Fonction de creation de l'objet XMLHttpRequest qui resservira pour chaques fonctions AJAX
function getXhr()
{
if(window.XMLHttpRequest) xhr = new XMLHttpRequest();
else if(window.ActiveXObject)
{
try
{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
{
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour");
xhr = false;
}
}
// Premiere fonction : remplacer le contenu d'un div
// Sans recuperation de valeur
function ajaxiris(fam)
{
getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
// Nous remplacons le contenu du div iris par le retour de "ajax/ajaxiris.php"
document.getElementById('iris').innerHTML = xhr.responseText;
}
}
xhr.open("POST",'ajax/ajaxiris.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("type="+fam);
}
//Deuxieme fonction : Vérifier que le numéro de série a le bon format
// Affichage dans un span en ayant recupéré une valeur
function verifnserie()
{
getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
// On affiche dans le span affnserie le retour de verifnserie.php
document.getElementById('affnserie').innerHTML = xhr.responseText;
}
}
// On envoie la requete a "ajax/verifnserie.php"
xhr.open("POST",'ajax/verifnserie.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// On recupere la valeur de l'input ayant pour id: nserie
nserie = document.getElementById('nserie').value;
// On envoie a verifnserie le nserie recupéré
xhr.send("nserie="+nserie);
}
// Troisieme fonction :
//Compliquons maintenant un petit peu
// D'apres une valeur, nous voulons en afficher 3
// revendeur, adresserev, cdpostrev
// nous aurons besoin de nous connecter à une base pour recuperer les valeurs
function ajaxcdcl()
{
getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
// Nous recuperons ce coup ci le retour dans une variable
var chaine = xhr.responseText;
// Nous decoupons la reponse selon le caractere choisi
var tableau = chaine.split('£');
// Nous appliquons les valeurs récupérées au element correspondant
document.getElementById('revendeur').value = tableau[0];
document.getElementById('adresserev').value = tableau[1];
document.getElementById('coderev').value = tableau[2];
}
}
xhr.open("POST",'ajax/ajaxrecupaddr.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
cdcl = document.getElementById('cdcl').value;
xhr.send("cdcl="+cdcl);
}
// Cet partie du code va etre inséré dans le tableau
// Ne pas oublier de garder le format du tableau
<?php
if($_POST['type'] == 'lavage')
{
echo '<tr>';
echo '<td>Code iris lavage</td>';
echo '<td>';
echo '<select name='codiris' size="1">';
echo '<option value="1">1</option>';
echo '<option value="2">2</option>';
echo '</select>';
echo '</td>';
echo '</tr>';
}
if($_POST['type'] == 'froid')
{
echo '<tr>';
echo '<td>Code iris froid</td>';
echo '<td>';
echo '<select name='codiris' size="1">';
echo '<option value="3">3</option>';
echo '<option value="4">4</option>';
echo '</select>';
echo '</td>';
echo '</tr>';
}
if($_POST['type'] == 'cuisson')
{
echo '<tr>';
echo '<td>Code iris cuisson</td>';
echo '<td>';
echo '<select name='codiris' size="1">';
echo '<option value="5">5</option>';
echo '<option value="6">6</option>';
echo '</select>';
echo '</td>';
echo '</tr>';
}
if(strlen($_POST['nserie']) != 9 AND $_POST['fournisseur'] == 'TRUC')
{
echo '<img src="images/actionko.gif" alt="Incorrect" border="0" width="20"><font color="#FF0000">Incorrect : 9 chiffres necessaires</font>';
echo '<input type="hidden" name="errnserie" value="erreur">';
}
else if(strlen($_POST['nserie']) != 12 AND $_POST['fournisseur'] == 'MACHIN')
{
echo '<img src="images/actionko.gif" alt="Incorrect" border="0" width="20"><font color="#FF0000">Incorrect : 12 chiffres necessaires</font>';
echo '<input type="hidden" name="errnserie" value="erreur">';
}
else
{
echo '<img src="images/actionok.gif" alt="Correct" border="0" width="20">Nombre de chiffres correct';
}
// Si le n° n'est pas bon, nous creons
// <input type="hidden" name="errnserie" value="erreur">
// Nous pouvons donc creer un if(isset($_POST['errnserie'])) { exit; // ou tout autre traitement }
// Pour interdire l'enregistrement des données dans verifformu.php
<?php
include('connexion.php'); // connexion à la base, non expliqué ici
$req = mysql_query("SELECT nom,adresse,cdpost FROM clients WHERE cdcl = '$_POST[cdcl]'");
while($res = mysql_fetch_array($req))
{
// Concatenation des resultats dans une chaine
// Utilisation d'un caractere séparateur ( £ ) que nous avons peu de chance de retrouver dans une chaine de caracteres francais.
echo "$res[nom]£$res[adresse]£$res[cdpost]";
}
?>
Commentaire publié le mercredi 07 février 2007 à 14 h 09 par Dr_von_scott Commentaire publié le lundi 19 février 2007 à 13 h 32 par Dr_von_scott 
Commentaire publié le vendredi 06 avril 2007 à 14 h 33 par witchgunn 
Commentaire publié le jeudi 12 avril 2007 à 00 h 35 par Liko 
Commentaire publié le mercredi 03 octobre 2007 à 00 h 13 par esskamal Commentaire publié le jeudi 04 octobre 2007 à 11 h 37 par Dr_von_scott
<?php
foreach($_POST as $indice=>$valeur)
{
echo "$indice <==> $valeur<br />';
}
?>
Commentaire publié le mardi 04 décembre 2007 à 10 h 42 par bascyr Commentaire publié le mardi 04 décembre 2007 à 10 h 46 par bascyr Commentaire publié le jeudi 13 décembre 2007 à 09 h 38 par Dr_von_scott Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.
Discutez et échangez sur ce thème dans nos forums Javascript - DHTML - VBScript, PHP - SQL.
10/10/2008 à 10 h 56
Affichier la 1ere image d'une video en php (1 réponse)
08/10/2008 à 14 h 12
traitement en fonction des dates (13 réponses)
07/10/2008 à 22 h 53
Menu masqué sans login effectué! Possible? (1 réponse)
07/10/2008 à 19 h 46
Problème suppresion fichier et dossier (3 réponses)
07/10/2008 à 17 h 51
ajout un champs dans une form joomla (1 réponse)