[Résolu] [JS] Lien qui remplit un formulaire par PaNTi - page 1

[EDIT] C'est bon ça marche merci

Ca marche pas !

Plusieur erreurs dans ton code:
rempilform /= rempliform
et tu a oublié deux ;

En fait j'aimerai inclure ca dans un système de moteur de recherche avec XmlHttpRequestµ

Donc que lorsque je clic sur un résultat il remplisse les inputs du formulaire avec les données du fichier xml généré par le fichier php

voici le code

<!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>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="style.css" />
</head>
<body>
<script type="text/javascript">
// + --------------------------------------------------------------------------------------
// + XHRConnection
// + V1.3
// + Thanh Nguyen, http://www.sutekidane.net
// + 20.10.2005
// + http://creativecommons.org/licenses/by-nc-sa/2.0/fr/deed.fr
// + --------------------------------------------------------------------------------------
function XHRConnection() {

// + ----------------------------------------------------------------------------------
var conn = false;
var debug = false;
var datas = new String();
var areaId = new String();
// Objet XML
var xmlObj;
// Type de comportement au chargement du XML
var xmlLoad;

// + ----------------------------------------------------------------------------------
try {
conn = new XMLHttpRequest();
}
catch (error) {
if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew XMLHttpRequest()\n\n' + error); }
try {
conn = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error) {
if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew ActiveXObject("Microsoft.XMLHTTP")\n\n' + error); }
try {
conn = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (error) {
if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew ActiveXObject("Msxml2.XMLHTTP")\n\n' + error); }
conn = false;
}
}
}

// + ----------------------------------------------------------------------------------
// + setDebugOff
// + Désactive l'affichage des exceptions
// + ----------------------------------------------------------------------------------
this.setDebugOff = function() {
debug = false;
};

// + ----------------------------------------------------------------------------------
// + setDebugOn
// + Active l'affichage des exceptions
// + ----------------------------------------------------------------------------------
this.setDebugOn = function() {
debug = true;
};

// + ----------------------------------------------------------------------------------
// + resetData
// + Permet de vider la pile des données
// + ----------------------------------------------------------------------------------
this.resetData = function() {
datas = new String();
datas = '';
};

// + ----------------------------------------------------------------------------------
// + appendData
// + Permet d'empiler des données afin de les envoyer
// + ----------------------------------------------------------------------------------
this.appendData = function(pfield, pvalue) {
datas += (datas.length == 0) ? pfield+ "=" + escape(pvalue) : "&" + pfield + "=" + escape(pvalue);
};

// + ----------------------------------------------------------------------------------
// + setRefreshArea
// + Indique quel elment identifié par id est valoris lorsque l'objet XHR reoit une réponse
// + ----------------------------------------------------------------------------------
this.setRefreshArea = function(id) {
areaId = id;
};

// + ----------------------------------------------------------------------------------
// + createXMLObject
// + Méthode permettant de créer un objet DOM, retourne la réfrence
// + Inspiré de: http://www.quirksmode.org/dom/importxml.html
// + ----------------------------------------------------------------------------------
this.createXMLObject = function() {
try {
   xmlDoc = document.implementation.createDocument("", "", null);
xmlLoad = 'onload';
}
catch (error) {
try {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlLoad = 'onreadystatechange ';
}
catch (error) {
if (debug) { alert('Erreur lors de la tentative de création de l\'objet XML\n\n'); }
return false;
}
}
return xmlDoc;
}

// + ----------------------------------------------------------------------------------
// + Permet de définir l'objet XML qui doit être valorisé lorsque l'objet XHR reoit une réponse
// + ----------------------------------------------------------------------------------
this.setXMLObject = function(obj) {
if (obj == undefined) {
if (debug) { alert('Paramètre manquant lors de l\'appel de la méthode setXMLObject'); }
return false;
}
try {
//xmlObj = this.createXMLObject();
xmlObj = obj;
}
catch (error) {
if (debug) { alert('Erreur lors de l\'affectation de l\'objet XML dans la méthode setXMLObject'); }
}
}

// + ----------------------------------------------------------------------------------
// + loadXML
// + Charge un fichier XML
// + Entrées
// + xml String Le fichier XML à charger
// + ----------------------------------------------------------------------------------
this.loadXML = function(xml, callBack) {
if (!conn) return false;
// Chargement pour alimenter un objet DOM
if (xmlObj && xml) {
if (typeof callBack == "function") {
if (xmlLoad == 'onload') {
xmlObj.onload = function() {
callBack(xmlObj);
}
}
else {
xmlObj.onreadystatechange = function() {
if (xmlObj.readyState == 4) callBack(xmlObj)
}
}
}
xmlObj.load(xml);
return;
}
}

// + ----------------------------------------------------------------------------------
// + sendAndLoad
// + Connexion à la page désirée avec envoie des données, puis mise en attente de la réponse
// + Entrées
// + Url String L'url de la page à laquelle l'objet doit se connecter
// + httpMode    String    La méthode de communication HTTP : GET, HEAD ou POST
// + callBack    Objet Le nom de la fonction de callback
// + ----------------------------------------------------------------------------------
this.sendAndLoad = function(Url, httpMode, callBack) {
httpMode = httpMode.toUpperCase();
conn.onreadystatechange = function() {
if (conn.readyState == 4 && conn.status == 200) {
// Si une fonction de callBack a été définie
if (typeof callBack == "function") {
callBack(conn);
return;
}
// Si une zone destinée à récupérer le résultat a été définie
else if (areaId.length > 0){
try {
document.getElementById(areaId).innerHTML = conn.responseText;
}
catch(error) {
if (debug) { alert('Echec, ' + areaId + ' n\'est pas un objet valide'); }
}
return;
}
}
};
switch(httpMode) {
case "GET":
try {
Url = (datas.length > 0) ? Url + "?" + datas : Url;
conn.open("GET", Url);
conn.send(null);
}
catch(error) {
if (debug) { alert('Echec lors de la transaction avec ' + Url + ' via la méthode GET'); }
return false;
}
break;
case "POST":
try {
conn.open("POST", Url);
conn.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
conn.send(datas);
}
catch(error) {
if (debug) { alert('Echec lors de la transaction avec ' + Url + ' via la mthode POST'); }
return false;
}
break;
default :
return false;
break;
}
return true;
};
return this;
}

// Déclaration de la fonction de Callback
// + ----------------------------------------------------------------------------------
// + afficherResultats
// + Affiche ou non le conteneur en fonction du résultat de la recherche
// + ----------------------------------------------------------------------------------
function afficherResultats(obj) {
// Construction des noeuds
var tabResult = obj.responseXML.getElementsByTagName('resultat');
document.getElementById('zoneResultats').innerHTML = '';
if (tabResult.length > 0) {
// On définit la hauteur de la liste en fonction du nombre de rsultats et de la hauteur de ligne
var hauteur = tabResult.length * 22;
with(document.getElementById('zoneResultats').style) {
visibility = 'visible';
height = hauteur + 'px';
};
for (var i = 0; i < tabResult.length; i++) {
resultat = tabResult.item(i);
var egt = document.createElement('li');
var lnk = document.createElement('a');
var texte = document.createTextNode(resultat.getAttribute('nom'));
lnk.appendChild(texte);
   lnk.setAttribute('href', "javascript:rempliform(\""+resultat.getAttribute('nom')+"\",\""+resultat.getAttribute('im')+"\")");
lnk.setAttribute('title', resultat.getAttribute('nom'));
egt.appendChild(lnk);
document.getElementById('zoneResultats').appendChild(egt);
}
}
else {
document.getElementById('zoneResultats').style.visibility = 'hidden';
}
}
// Déclaration de la fonction qui lance la recherche
function loadData() {
// Création de l'objet
var XHR = new XHRConnection();
XHR.appendData("foo", document.getElementById('foo').value);
// On soumet la requête
// Signification des paramètres:
// + On indique à l'objet qu'il faut appeler le fichier search.php
// + On utilise la méthode POST, adaptée l'envoi d'information
// + On indique quelle fonction appeler lorsque l'opération a été effectuée
XHR.sendAndLoad("search.php", "POST", afficherResultats);
}

function rempliform(contenu1,contenu2) {
document.form.foo.value = contenu1;
document.form.im.value = contenu2;
document.getElementById('zoneResultats').style.visibility = 'hidden';
}
</script>

<form id="formulaire" action="index.php" method="post" name="form">
<fieldset>
<p>
<label for="foo">Saisissez les chaines à rechercher dans le champ de formulaire ci-desous :</label>
<input type="text" name="foo" id="foo" value="" onkeyup="loadData();" />
</p>
<ul id="zoneResultats" style="visibility: hidden;"></ul>
<p>
Texte à placer pour tester que les réponses s'affichent par dessus... Lorem ipsum ...
</p>
   <input type="text" name="im" id="im" value=""/>
</fieldset>
</form>
</body>
</html>

PaNTi

1 mars 2006 à 14:43:59

Salut

J'aimerai savoir comment faire que lorsque je clic sur un lien il remplit automatiquement des champs d'un formulaire

En pratique:
Lorsque je clic sur "Nico" il remplit un champs d'un formulaire avec "Nico" et un second champs avec "Bobo"

Merci d'avance

Anonyme

1 mars 2006 à 14:54:20

tu peut envoyer (suivant ton exemple) Nico en GET (ta_page_de_ton_formulaire.php?nom=Nico) puis si $_GET['nom'] et si elle est egale a 'Nico' alors dans ton formulaire tu met value="Nico" dans ton premier champs et value="Bobo" dans le second.

si tu as plusieurs personnes tu peut soit faire une base de donnée soit incrémenté une variable suivant le nom et c'est cette variable qui ira dans le value de ton second champs

Tixlegeek

1 mars 2006 à 14:57:56

et voila

,j'ais pas testé mais il devrais pas y avoir d'erreurs... si malgrétout si ,dit le

bonne chance ,++ Tix.

1 mars 2006 à 15:55:15

[JS] Lien qui remplit un formulaire

[JS] Lien qui remplit un formulaire

Supprimer

Modérer

Signaler le message aux modérateurs