Bonjour,

Voila je rencontre un petit problème avec mon code.

j'ai un tableau de code de produit(Array) qui provient de ma base de donnees ;

$bc=NumeroCommande::AllNumeroCommande();
print_r($bc);
Array ( [0] => stdClass Object ( [codeProduit] => 0001 ) [1] => stdClass Object ( [codeProduit] => 00002 ) )

 <form action="Traitement/leBonCommande.php"  method="post">
    <tr>
    <td><b>Numero Bon Commande </b></td>
    <td><input  type="text" name="NumBon" placeholder="Taper le code du produit"   required="required"  /></td>
  </tr>

  </form>

je voulais savoir comment procedé en jquery et javascript pour que lorsque l'utilisateur fini de renseigner un champ input et que le code saisie ne trouve dans le tableau ci dessus qu'on puisse lui alerter comme message "le code que vous avez saisie n'est pas valide" pour empecher l'envoi du formulaire;

Je veux de l'aide

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

3 réponses


Bonjour.
Pour le système, il te suffit de faire une requète en ajax en envoyant la valeur de l'input à un fichier ou une action dont le script permettra de faire la requête à ta base de données et il renverra s'il a bien trouvé un enregistrement qui correspond.
Selon la réponse envoyé tu pourras par exemple "activer" la possibilité de soumettre le formulaire.

Mais le mieux je pense, serait de faire de l'autocomplétion, l'utilisateur commence à saisir une valeur et au bout d'un certain nombre de caractères saisie, tu récupéres via ajax les données qui peuvent correspondre ce qui fait que l'utilisateur n'aura plus qu'à sélectionner ce qu'il veut dans un select, pour faire simple, ton input de type text, se changera en select quand il saisira une valeur.
Je pense que ce serait le mieux autant pour toi que pour l'utilisateur.

Coucou, soit tu fait quelque chose de ce genre

<form action="Traitement/leBonCommande.php"  method="post">
    <tr>
    <td><b>Numero Bon Commande </b></td>
    <td><input  type="text" name="NumBon" id="NumBon" placeholder="Taper le code du produit"   required="required"  onchange="verifCorrespondance(<?PHP echo $tableauDeTaBdd;?>);/><span id="message"></span></td>
  </tr>

  </form>
<script type="text/javascript">

    function verifCorrespondance(tableauBdd)
    {   
        var match = 0;
        var inputVal = document.getElementById("NumBon").value; 
        for(var i = 0; i< tableauBdd.length;i++)
       {
            if(inputVal == tableauBdd[i])
            {
                match=1;
                break;
            }
       }
       if(match==0)
       {
            document.getElementById("message").innerHTML = "le code que vous avez saisie n'est pas valide";
       }
       else
       {
            document.getElementById("message").innerHTML = "le code est valide";
        }
    }   

</script>

je n'ai pas testé le code mais en gros tu mets un évènement onchange sur ton input tu lui donne ton tableau de ta base en paramètre à une fonction, cette fonction parcours ton tableau et compare avec la valeur entré dans le champ si il y a correspondance c'est ok sinon on affiche message sinon oriente toi sur de l'ajax

//Lorsque les caracteres saisis au clavier sont sup à 2
$(input[name='NumBon']).keyup(function(){
        var mot=$(this).val();
        var data="motcle=" + mot;
        if(mot.length>2){
        //Envois le mot saisi via ajax dans un fichier PHP pour verification
        $.ajax({
            type:"GET",
            url:"verif.php",
            data:data,
            success:function(server_response){
            $("#resultat").html(server_response).show();
        }
        });
        }
        });

Et dans ton fichier PHP tu recupere les données en GET comme ceci

if(isset($_GET['motcle']))
    {
        $motcle=(nl2br($_GET['motcle']));
//Tu te connecte à ta BDD et tu verifis si la variable existe dans la table concernée, par exemple
$sql22=$db->query("SELECT *FROM produit WHERE libelle LIKE '$motcle%' ");
... etc
//si le code existe
echo "Le code n'existe"

//sinon
echo  "le code n'existe pas"
    }

Ps: N'oublis pas de charger Jquery