[AJAX] Ajax xmlhttpRequest : affichage d'un résultat dans une div
Salut, j'ai créer un formulaire avec 2 champs: 1 input de type radio et un select. Le select se met a jour en fonction du premier bouton radio selectionné. Jusqu'ici tout va bien.
Ensuite, je souhaite que le choix effectué dans le select affiche un texte spécifique dans une div en dessous du formulaire; Là, ca va toujours. le probleme c'est qu'a chaque changement de selection dans le select, le resultat dans la div s'ajoute au précèdent. hors je veux que l'ancien texte disparaisse pour laisser place au nouveau.
Voila les codesle probleme vient surement des lignes en bleues.)
le formulaire
et le fichier ajax:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>AJAXXMLHttpRequest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Fiche </h1>
<div>
<form action="" method="post" enctype="text/plain">
<fieldset><legend><b>Choisissez un étudiantnn</b></legend>
<input type="radio" name="anneeEtude" value="1" checked="checked"/>SRC1
<input type="radio" name="anneeEtude" value="2"/>SRC2
<input type="radio" name="anneeEtude" value="3"/>LP
<label></label>
<select id="liste" readonly="readonly">
</select>
</fieldset>
</form>
<div id="code2">
</div>
</body>
</html>
Bien sur, tout ça est en lien avec un fichier php et une base de données mais le probleme n'est pas là.window.onload=function(event){
afficherId(event);
}
var xmlhttp = false;
function afficherId(event){
var tab = document.getElementsByTagName('input');
var nb = tab.length;
var i=0;
while (i<nb) {
tab.onclick=envoyerReponse;
i++;
}
}
function envoyerReponse(){
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
if (xmlhttp)
{
xmlhttp.onreadystatechange=traiterReponse;
;
sendData('POST', 'remplir.php',"anneeEtude="+this.value );
}
return xmlhttp;
}
function traiterReponse() {
if (xmlhttp.readyState==4 ) {
if (xmlhttp.status==200) {
document.getElementById("liste").innerHTML=xmlhttp.responseText;
document.getElementById("liste").onchange=changerInfos;
document.getElementById("code2").value=document.getElementById("liste").value;
}else {
}
}
}
function changerInfos(){
affiche = document.getElementById("code2");
noeudTexte = document.createTextNode(document.getElementById("liste").value);
affiche.appendChild(noeudTexte);
}
function sendData(method, url, data){
if (!xmlhttp){
return false;
}
if(method == "GET"){
if(data == null){
xmlhttp.open("GET", url, true); //ouverture asynchrone
}else{
xmlhttp.open("GET", url+"?"+data, true);
}
xmlhttp.send(null);
}else if(method == "POST"){
xmlhttp.open("POST", url, true); //ouverture asynchrone
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send(data);
}
return true;
}
Je pense que je devrais initialiser la div qui reçoit la valeur mais je n'y arrive pas !
Répondre avec citation
Partager