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.
 si vous avez mal a la tête en lisant ça, sachez que je suis dans le même cas.
Voila les codes:(le probleme vient surement des lignes en bleues.)
le formulaire
<!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>
et le fichier ajax:
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;
}
Bien sur, tout ça est en lien avec un fichier php et une base de données mais le probleme n'est pas là.
|
1
