Selectionner une information base de données avec JavaScript

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
pts74
Messages : 7
Enregistré le : 09 mai 2022, 16:02

Selectionner une information base de données avec JavaScript

Message par pts74 » 09 mai 2022, 16:24

Bonjour, j'ai un formulaire avec des listes de valeurs. Je veux pouvoir retrouver l'information qui correspond à la combinaison des valeurs choisies dans ces listes. Pour cela, je veux utiliser JavaScript car je ne veux pas recharger ma page.

Code : Tout sélectionner

<form methode="post" action="fichier.php">
<select name ="marque" id="marque">
<option>Hyundai</option>
<option>Toyota</option>
<option>Peugeot</option>
<option>Lexus</option>
</select>
<select name ="modele" id="modele">
<option>Tucson</option>
<option>Yaris</option>
<option>Corolla</option>
<option>Elentra</option>
</select>
<select name ="annee"cid="annee">
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
</select><br><input type="text" name="prix" id="prix" value="">
</form>
Dans ma base de données j'ai une table qui contient les enregistrements

Je sèche sur le code JavaScript

J'ai essayé ceci mais le résultat, bien entendu n'est pas satisfaisant.

Code : Tout sélectionner

<script language=javascript>
function changecategorie()
{
marque= document.getElementById('marque').value;
modele= document.getElementById('modele').value;
annee= document.getElementById('annee').value;
<?php
$sql = $connexion->query("SELECT prix FROM voitures WHERE marque= '$marque' AND modele='$modele' AND annee='$annee' ");
$leprix = $sql->fetch(PDO::FETCH_OBJ);
$prix= $leprix ->prix ;
?>
document.getElementById('prix').value =<?php echo $prix; ?>;
}
</script>

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Selectionner une information base de données avec JavaScript

Message par webmaster » 09 mai 2022, 17:11

Bonjour,

Le javascript doit appeler un fichier PHP qui fera la requête SQL. Le javascript s'exécute sur le navigateur. Il n'a pas accès à la base de données.

Voici un exemple d'appel AJAX vers une table SQL
https://www.toutjavascript.com/savoir/x ... section_05
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

pts74
Messages : 7
Enregistré le : 09 mai 2022, 16:02

Re: Selectionner une information base de données avec JavaScript

Message par pts74 » 09 mai 2022, 18:24

Merci Webmaster.
Je vais y jeter un coup d’œil et essayer

pts74
Messages : 7
Enregistré le : 09 mai 2022, 16:02

Re: Selectionner une information base de données avec JavaScript

Message par pts74 » 10 mai 2022, 17:39

Bonsoir Webmaster,
Après avoir suivi le tutoriel, voici ce que j'ai fait

Code JavaScript

Code : Tout sélectionner

function trouverPrix()
{
	var marque= document.getElementById('marque').value ;
	var modele= document.getElementById('modele').value;
	var annee= document.getElementById('annee').value;

	var params = '?marque=' + encodeURIComponent(marque);
	params += '&modele=' + encodeURIComponent(modele);
	params += '&annee=' + encodeURIComponent(annee);

	var xhr;     	
        try {   xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
        catch (e2) 
        {
           try {  xhr = new XMLHttpRequest();  }
           catch (e3) {  xhr = false;   }
         }
   	 }
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4)
		{
			if (xhr.status == 200)
			ajaxBox_setText(xhr.responseText);
			
			else
			ajaxBox_setText('Error...');
		}
	};
	var url = 'grille.php' + params;
	xhr.open('GET', url, true);
	xhr.send(null);
}

function ajaxBox_setText(pText)
{
	var p = document.getElementById('prix');
	p.appendChild(document.createTextNode(pText));
}


Contenu du fichier PHP

Code : Tout sélectionner

<?php
	$marque= $_GET['marque'];
	$modele= $_GET['modele'];
	$annee= $_GET['annee'];
	
	$sql = $connexion->query("SELECT * FROM grille WHERE marque= '$marque' AND modele='$model' AND annee ='$annee' "); 
	$res = $sq->fetch(PDO::FETCH_OBJ);
	$prix= $res->prix;
    	echo $prix;
?>
Mais ça ne me renvoie rien

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Selectionner une information base de données avec JavaScript

Message par webmaster » 10 mai 2022, 19:56

Il faut y aller progressivement en utilisant la console du navigateur dans l'onglet network
On peut vérifier si les paramètres sont bien envoyés et ce que retourne le fichier PHP
Le plus probable c'est qu'une erreur se produise dans le PHP
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

pts74
Messages : 7
Enregistré le : 09 mai 2022, 16:02

Re: Selectionner une information base de données avec JavaScript

Message par pts74 » 10 mai 2022, 21:44

J'ai vérifié dans la console. Le statut est bien à 200 OK et les paramètres sont bien dans l'URL http://localhost/req/grille.php?marque= ... annee=2010
Dans le PHP il y avait une erreur dans le code sur cette ligne : $res = $sql->fetch(PDO::FETCH_OBJ); que j'ai corrigé. il manquait un "l" à sql.
Le PHP n'a pas d'erreur la requête renvoie bien le résultat recherché
Mais je n'arrive pas à voir dans la console ce que ramène le PHP.
Je n'ai toujours pas de résultat satisfaisant

pts74
Messages : 7
Enregistré le : 09 mai 2022, 16:02

Re: Selectionner une information base de données avec JavaScript

Message par pts74 » 10 mai 2022, 22:16

Finalement j'ai fais ceci et ça marche :

Code : Tout sélectionner

xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4)
		{
			if (xhr.status == 200)
			document.getElementById('salaire_base').value=xhr.responseText;
			
			else
			ajaxBox_setText('Error...');
		}
	};

Merci pour ton assistance

pts74
Messages : 7
Enregistré le : 09 mai 2022, 16:02

Re: Selectionner une information base de données avec JavaScript

Message par pts74 » 11 mai 2022, 18:00

Désolé de revenir à la charge.
Mais je voudrais afficher le prix avec des séparateurs de milliers. J'i donc fait le code ci-dessous mais là le prix n'est plus afficher dans le champs:

Code : Tout sélectionner

xhr.onreadystatechange = function()
{
	if (xhr.readyState == 4)
	{
		if (xhr.status == 200)
		document.getElementById('prix').value = parseInt(xhr.responseText).toLocaleString();			
		else
		ajaxBox_setText('Error...');
	}
};

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Selectionner une information base de données avec JavaScript

Message par webmaster » 12 mai 2022, 09:26

La console javascript donnera l'erreur précise et permettra de remonter à la source.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

pts74
Messages : 7
Enregistré le : 09 mai 2022, 16:02

Re: Selectionner une information base de données avec JavaScript

Message par pts74 » 12 mai 2022, 17:38

Le problème est résolu! En fait le champ de prix était de type number, je l'ai changé en type text et c'est bon.
Merci Webmaster.

Répondre