Formulaire + ajax liste deroulante

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Formulaire + ajax liste deroulante

par Invité » 01 févr. 2006, 13:32

Bon ben apparemment ce n'est pas une question de formulation.
Je pense que si je pouvais uploader les fichiers ce serait plus simple à tester.
M'enfin bon tanpis.

par fightback » 30 janv. 2006, 22:10

Mille excuses! :oops:

Je recommence.
J'ai avancé sur ce projet. j'ai juste un problème.
j'ai un script php modifié qui me renvoit une réponse en XML du type:

Code : Tout sélectionner

<resultats nb="2"> <resultat ip="192.168.0.1" Client="TEST & CO" email="[email protected]" Cc="[email protected]"/> <resultat ip="192.168.1.1" Client="MY CO" email="[email protected]" Cc="[email protected]"/> </resultats>
J'ai donc le fameux formulaire de recherche en live.
Le problème c'est que j'ai créé une fonction de newbie pour que lorsque je clic sur un des résultats de la liste, les champs du formulaire soient rempli grace à l'option sélectionnée.

Bon ça remplit les champs mais pas avec les bons résultats, comme si il y avait un cache de donnée ou une donnée par défaut.
Je sais que c'est un problème de javascript mais je ne trouve pas, j'ai essayé avec this.options[this.selectedIndex].text , rien à faire.

Donc je précise, j'aimerais si possible de l'aide pour trouver le problème dans ma fonction fillform qui fait mal son boulot.

Code : Tout sélectionner

<head> <title>IP to Customer and email using XmlHttpRequest</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> document.write('<script src="XHRConnection.js"><\/script>'); // 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('ip')); lnk.appendChild(texte); // lnk.setAttribute('href', 'none'); // Si on clique renvoi vers un lien lnk.setAttribute('title', resultat.getAttribute('Client')); // Titre de l'option de liste lors de onmouseover 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() { var XHR = new XHRConnection(); XHR.appendData("foo", document.getElementById('foo').value); XHR.sendAndLoad("search.php", "POST", afficherResultats); } //Ma fonction de newbie pour remplir les champs du formulaire après sélection ds le menu function fillform(ip) { document.getElementById('foo').value = resultat.getAttribute('ip'); document.getElementById('customer').value = resultat.getAttribute('Client'); document.getElementById('email').value = resultat.getAttribute('email'); document.getElementById('cc').value = resultat.getAttribute('Cc'); document.getElementById('zoneResultats').style.visibility = ('hidden'); //Pour cacher le menu après sélection } </script> </head> <body> <form id="formulaire" action="index.php" method="post"> <fieldset> <label for="foo">Saisissez une IP:</label> <input type="text" size="15" name="foo" id="foo" value="" onkeyup="loadData();" /> <ul id="zoneResultats" style="visibility: hidden;" onclick="fillform(this.value);"></ul> <label for="customer">Client:</label> <input type="text" id="customer" name="customer" size="30" /> <label for="email">Contact:</label> <input type="text" id="email" name="email" size="25" /> <label for="cc">Cc:</label> <input type="text" id="cc" name="cc" size="25" /><p> Blabla </p><p> <input name="reset" type="reset" id="reset" value="Erase it!"></p> </fieldset> </form> </body>

par Cyrano » 30 janv. 2006, 20:04

Je te signale que les up sont interdits. Si tu n'as pas obtenu de réponse, c'est peut-être tout simplement que ta question n'est pas comprise ou mal formulée. Donc rien ne t'empèche de la reformuler au lieu de simplement marquer "up".

Pose-toi la question : comment ma question est-elle comprise, est-elle claire ?

par fightback » 30 janv. 2006, 18:03

Hello un pti up?

Formulaire + ajax liste deroulante

par fightback » 28 janv. 2006, 04:37

Bonjour à tous,

J'essaye de mettre à jour mon application web avec ajax ou xajax.

J'ai fais une interface web pour envoyer des emails composés par php.
Du style on selectionne le genre d'email et avec les variables remplies dans les champs du formulaire, le mail est généré, affiché, stocké dans une base mysql et envoyé aux destinataire.

Les champs les plus importants pour mon problème sont ip, customer, email, cc.

J'aimerais pouvoir

1) Dès que le champ IP commence à être remplie (plutôt après un minimum de 5 caractères) une fonction javascript fasse appel à ajax pour rechercher une liste d'ip correspondantes.

2) Créer une liste déroulante avec les ip trouvées avec en face le nom du client auquel elle correspond (sans répétitions de la même).

3) Si l'utilisateur fait une sélection dans la liste déroulante, alors les champs customer, email et cc du formulaire seront remplies avec les données récupérées dans la base de donnée.

C'est un projet ambitieux, je serai très heureux si vous pouviez m'accorder vos aides/idées tout au long du chemin.
J'ai un niveau correct en PHP, le javascript simple ça va aussi.

J'ai réussi à créer le comportement basique du script et à peupler les champs.

Pour l'instant je sèche sur la liste déroulante.. quelqu'un a une idée?

index.php simplifié

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>IP to Customer and email using XmlHttpRequest</title> <script language="javascript" type="text/javascript"> var url = "verifip.php?param="; // The server-side script function handleHttpResponse() { if (http.readyState == 4) { if (http.responseText.indexOf('invalid') == -1) { // Split the comma delimited response into an array results = http.responseText.split(","); document.getElementById('customer').value = results[0]; document.getElementById('email').value = results[1]; document.getElementById('cc').value = results[2]; isWorking = false; } } } var isWorking = false; function verifip() { if (!isWorking && http) { var ipValue = document.getElementById('ip').value; http.open("GET", url + escape(ipValue), true); http.onreadystatechange = handleHttpResponse; isWorking = true; http.send(null); } } function getHTTPObject() { var xmlhttp; /*@cc_on @if (@_jscript_version >= 5) try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } @else xmlhttp = false; @end @*/ if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; } } return xmlhttp; } var http = getHTTPObject(); // We create the HTTP Object </script> </head> <body> <form action="post"> <p> IP: <input type="text" size="15" name="ip" id="ip" onKeyUp="verifip();" /> </p> Customer: <input type="text" size="45" name="customer" id="customer" /> Email: <input type="text" size="35" name="email" id="email" /><br> Cc: <input type="text" size="35" name="cc" id="cc" /> <input name="reset" type="reset" id="reset" value="Erase it!"> </form> </body> </html>
script verifip.php actuel
<?php
/**
* Connects to the database.
* Return false if connection failed.
* Be sure to change the $database_name. $database_username , and
* $database_password values  to reflect your database settings.
*/
function db_connect() {
  $database_name =
'database'
; // Set this to your Database Name
  $database_username =
'login'
; // Set this to your MySQL username
  $database_password =
'password'
; // Set this to your MySQL password
  $result = mysql_pconnect('localhost',$database_username, $database_password);
  if (!$result) return false;
  if (!mysql_select_db($database_name)) return false;
  return $result;
}
$conn = db_connect(); // Connect to database
if ($conn) {
  $ip = $_GET['param']; // The parameter passed to us
  $query = "select * from emails where ip LIKE '$ip' ORDER BY id DESC";
  $result = mysql_query($query,$conn);
  $count = mysql_num_rows($result);
  if ($count > 0) {
    $customer = mysql_result($result,0,'customer');
    $email = mysql_result($result,0,'email');
		$cc = mysql_result($result,0,'cc');
  }
}
if (isset($customer) && isset($email) && isset($cc)) {
  $return_value = $customer . "," . $email . "," . $cc;
}
else {  
  $return_value = "invalid".",".$_GET['param']; // Include IPfor debugging purposes
}
echo $return_value; // This will become the response value for the XMLHttpRequest object
?>