Passages des paramètres sans utiliser bouton submit

Fermé

ELALAOUI2 Messages postés 29 Date d'inscription samedi 14 février 2015 Statut Membre Dernière intervention 2 novembre 2017 - Modifié le 19 juin 2017 à 04:25
ELALAOUI2 Messages postés 29 Date d'inscription samedi 14 février 2015 Statut Membre Dernière intervention 2 novembre 2017 - 19 juin 2017 à 15:31

salut tout le monde , svp

je veux créer une page qui contient une zone de recherche, et le résultat de la recherche s'affiche au fur et au mesure sous le formulaire en utilisant AJAX

le code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<script language="JavaScript">
 
    function createInstance()
    {
        var xhr;
        if (window.XMLHttpxhruest)
        {
            xhr = new XMLHttpxhruest();
        }
        else if (window.ActiveXObject)
        {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e)
            {
                try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e)
                {
                    alert("XHR not created");
                }
            }
            }
        return xhr;
    };
 
    function storing(data, element)
    {
        element.innerHTML = data;
    }
 
    function submitForm(element)
    {
        var xhr =  createInstance();
 
        xhr.onreadystatechange = function()
        {
            if(xhr.readyState == 4)
            {
                if(xhr.status == 200)
                {
                    storing(xhr.responseText, element);
                     
                }  
                else   
                {
                    alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
                }  
            }
        };
        xhr.open("GET", "serveur_Ajax.php", true);
        xhr.send(null);
    }
 
</script>
</head>
 
<body>
<form id="form1" name="form1" method="get" action="serveur_Ajax.php">
  <div align="center">
    <table width="338">
      <tr>
        <td width="330" height="62"><label for="recherche">Recherche: </label>
        <input type="text" name="search" id="search" onkeypress="submitForm(document.getElementById('storage'))" /></td>
      </tr>
      <tr>
        <td height="149"><p> <span id="storage"> </span></p></td>
      </tr>
    </table>
  </div>
</form>
</body>
</html>

le code PHP

<?php
$cnx = mysql_connect( "localhost", "root", "") ;
$db = mysql_select_db("bd");
 
 
     
$search= $_GET['search']);
 
  
$sql = "SELECT nom, prenom FROM Client WHERE nom LIKE '".$search." %' or prenom LIKE '".$search." %'";
 
$sql = "SELECT Nom, Prenom FROM client WHERE Prenom LIKE '".$search."%'";
 
$requete = mysql_query($sql, $cnx) or die( mysql_error() ) ;
 
 
 
if($requete){
     
echo "<ol>";
while ($data = mysql_fetch_array($requete)) {
 
 echo "<li><a href='#' rel="nofollow noopener noreferrer" target="_blank">".$data."</a></li>";
}
         
echo "</ol>";
 
 
 
}

mais il m'affiche ce résultat :

http://static.ccm2.net/www.commentcamarche.net/pictures/m6dEZZiu4yX2LDz6sFFaI9EszkrSmglMtfPLrgOBYIRGgwC4ZsFDj0tFTB0KGOwO-19251166-10211850875180141-2009158897-n.png

A voir également:

Passages des paramètres sans utiliser bouton submit
Comment utiliser chromecast - Guide
Réinitialiser chromecast sans bouton - Guide
Ouvrir paramètres - Guide
Comment utiliser wetransfer gratuit ? - Guide
Hard reset samsung sans bouton home - Guide

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
19 juin 2017 à 09:16

Salut,

Il faut transmettre le paramètre search dans la requête ajax :

var input = document.getElementById("search");
var inputData = encodeURIComponent(input.value);

xhr.open("GET", "serveur_Ajax.php?" + input.name + "=" + inputData, true);
xhr.send(null);

Bonne journée,

ELALAOUI2 Messages postés 29 Date d'inscription samedi 14 février 2015 Statut Membre Dernière intervention 2 novembre 2017
19 juin 2017 à 15:24

quand j'ajoute ces lignes , le résultat disparu complètement, même le message d'erreur !!!

ELALAOUI2 Messages postés 29 Date d'inscription samedi 14 février 2015 Statut Membre Dernière intervention 2 novembre 2017
19 juin 2017 à 15:31

et maintenant quand je fait à la main cette ligne comme ça :

xhr.open("GET", "serveur_Ajax.php?search=Driss", true);

il me donne ce message :

 Resource id #4

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Bouton ON OFF, O ou I ?

Quel est la touche shift sur le clavier

Discussions similaires

Newsletters