Affichage d'un élément correspondant a un select provenant de la base de données

**programmeurz** · 29/08/2018, 10h04

Alors mon problème est d'afficher dans un input le correspondant d'un select lorsque je fais mon choix et je veux pas de rafraichissement de la page et tout ca provenant de la bd ...J'utilise jQuery ...j'ai essayé de bidouiller quelques codes la sans reel succes ...Toutes solutions j'encaisse
voici mes codes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<hr>
  <button id="valider">Valider</button>
  <button id="add_row">Add row</button>
  <button id="delete_row">Delete Row</button>
  <hr>
  <br>
 
  <form method="POST" action="" id="form_trucs">
    <table>
      <thead>
        <tr>
          <th>Select</th>
          <th>Quantité</th>
          <th>Désignation</th>
          <th>Prix Unitaire</th>
          <th>Prix taxé</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="record_1" class="record">
          </td>
          <td>
            <input type="text" placeholder="quantité" name="quantite_1" class="quantite">
          </td>
          <td>
           <select type='text' name='designation_1'>
              <?php
              $reponse = $bdd->query('SELECT * FROM kk');
              while ($donnees = $reponse->fetch())
              { $designation = $donnees['designation'];
                $pu = $donnees['pu'];
                echo "<option> ".$designation." </option>"; }          
             
            echo "</select><td>";
           
            echo "</td>";
            
              ?>  
 
            <td>
              <span id="pt_1" class="prix_taxe">0</span>
            </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3">&nbsp;</th>
          <th>TOTAL Taxés</th>
          <th id="Tot_TX">0</th>
        </tr>
      </tfoot>
    </table>
  </form>

CODE jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
 
$(document).ready(function () {
 
  var CompteurLigne = 1;
 
  //ajoute les lignes
  $("#add_row").click(function () {
 
    CompteurLigne++;
 
    let markup = '<tr><td><input type="checkbox" name="record_'+CompteurLigne+'" class="record" ></td>'; 
    markup += '<td><input type="text" placeholder="quantité" name="quantite_'+CompteurLigne+'" class="quantite">'; 
    markup+= '</td><td><select type="text" name="designation_'+CompteurLigne+'"><?php $reponse = $bdd->query("SELECT * FROM kk"); while ($donnees = $reponse->fetch()){ echo "<option> $donnees[designation] </option>";}?></select></td>';
    markup+= '<td><input type="text" placeholder="prix unitaire" name="prix_unitaire_'+CompteurLigne+'" class="prix_unitaire"></td>';
    markup+= '<td><span name="pt_'+CompteurLigne+'" class="prix_taxe"></span></td></tr>';
 
    $("form#form_trucs > table > tbody").append(markup);
 
    Calcul_Prix_Taxe();
  });
 
 
  // Cherche et enleve les lignes selectionnees
 
  $("#delete_row").click(function () {
    $(".record:checkbox:checked").each(function () {
      $(this).parents("tr").remove();
    });
    Calcul_Prix_Taxe();
  });
 
 
  $("#valider").click(function () {
    Calcul_Prix_Taxe();
  });
 
  $("form#form_trucs > table > tbody").on("change", ".quantite, .prix_unitaire", function() {
    Calcul_Prix_Taxe();
  });
 
 
 
  //Effectuer les calculs
 
  function Calcul_Prix_Taxe() {
    let Total_Taxes = 0;
 
    $("form#form_trucs > table > tbody tr").each(function () {
      let 
        Qte = parseInt( $(this).find(".quantite").val() ) || 0,
        P_U = parseInt( $(this).find(".prix_unitaire").val() ) || 0,
        P_T = Qte * P_U;
        Total_Taxes += P_T;
 
      $(this).find(".prix_taxe").html( (P_T).toString() );
    });
 
    $("#Tot_TX").html( (Total_Taxes).toString() );
  }
});
	</script>

code css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
	<style type="text/css">
	form{
		margin: 20px 0;
		text-align:center;
	}
	#add_row{
		background-color: #76a6f2;
	}
	#delete_row{
		background-color: #f45a6f;
	}
	form input, button{
		padding: 5px;
	}
	table{
		width: 100%;
		margin-bottom: 20px;
		border-collapse: collapse;
	}
	table, th, td{
		border: 1px solid #cdcdcd;
		border-collapse: collapse;
	}
	table th, table td{
		padding: 5px;
		text-align: center;
	}
	button{
		text-align:center;
		width:10%;
		border-radius: 10px;
	}
	#tot{
		text-align: right;
	}
	</style>

fichier sql de ma table tests.sql

Aidez moi svp

Invité · 29/08/2018, 11h22

Bonjour,

il faut utiliser jQuery.ajax().

**programmeurz** · 29/08/2018, 11h44

J'ai aussi pensé a ça mais je connais pas manipuler Ajax et je dois le remettre dans un delai court

Invité · 29/08/2018, 12h14

Exemple :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
	$('#le_select_id').on('change', function(){
		var select_val = $(this.val();
		$.ajax({
		  method: 'POST',
		  url: 'traitement.php',
		  data: { name_a_traiter : select_val }
		  dataType: 'html',	// retour au format HTML
		})
		.success(function( html_retour ) {
			$('#div_ou_afficher_le_resultat').html( "Retour : " + html_retour );
		});
	});
});

Dans traitement.php :

on récupère $_POST['name_a_traiter'];,
on effectue le traitement (requête SQL,...)
on affiche le résultat (avec echo)

Exemple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php
header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
 
$donnee_recue = ( isset($_POST['name_a_traiter']) )? $_POST['name_a_traiter'] : '';
echo 'Vous avez sélectionné : '.$donnee_recue;

N.B. comme traitement.php est un fichier "indépendant", il faut y inclure le script de connexion à la BDD et tout ce qui est nécessaire.

**programmeurz** · 29/08/2018, 15h31

J'ai essayé de suivre votre logique et remplacer ce qui est remplacable mais rien toujours

Invité · 29/08/2018, 15h43

Que veux-tu qu'on te réponde si tu ne montres pas ton code ?

**programmeurz** · 29/08/2018, 15h56

Alors désolé pour ne pas avoir montré le code
code javacript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script src="js/jquery.js"></script>
	<script type="text/javascript">
 
$(document).ready(function () {
 
  var CompteurLigne = 1;
 
  //ajoute les lignes
  $("#add_row").click(function () {
 
    CompteurLigne++;
 
    let markup = '<tr><td><input type="checkbox" name="record_'+CompteurLigne+'" class="record" ></td>'; 
    markup += '<td><input type="text" placeholder="quantité" name="quantite_'+CompteurLigne+'" class="quantite">'; 
    markup+= '</td><td><select type="text" name="designation_'+CompteurLigne+'"><?php $reponse = $bdd->query("SELECT * FROM kk"); while ($donnees = $reponse->fetch()){ echo "<option> $donnees[designation] </option>";}?></select></td>';
    markup+= '<td><input type="text" placeholder="prix unitaire" name="prix_unitaire_'+CompteurLigne+'" class="prix_unitaire"></td>';
    markup+= '<td><span name="pt_'+CompteurLigne+'" class="prix_taxe"></span></td></tr>';
 
    $("form#form_trucs > table > tbody").append(markup);
 
    Calcul_Prix_Taxe();
  });
 
 
  // Cherche et enleve les lignes selectionnees
 
  $("#delete_row").click(function () {
    $(".record:checkbox:checked").each(function () {
      $(this).parents("tr").remove();
    });
    Calcul_Prix_Taxe();
  });
 
 
  $("#valider").click(function () {
    Calcul_Prix_Taxe();
  });
 
  $("form#form_trucs > table > tbody").on("change", ".quantite, .prix_unitaire", function() {
    Calcul_Prix_Taxe();
  });
 
 
 
  //Effectuer les calculs
 
  function Calcul_Prix_Taxe() {
    let Total_Taxes = 0;
 
    $("form#form_trucs > table > tbody tr").each(function () {
      let 
        Qte = parseInt( $(this).find(".quantite").val() ) || 0,
        P_U = parseInt( $(this).find(".prix_unitaire").val() ) || 0,
        P_T = Qte * P_U;
        Total_Taxes += P_T;
 
      $(this).find(".prix_taxe").html( (P_T).toString() );
    });
 
    $("#Tot_TX").html( (Total_Taxes).toString() );
  }
 
    //Rechercher le correspondant de lelement select avec AJAX
    $('#id_select').on('change', function(){
    var select_val = $(this).val();
    $.ajax({
      method: 'POST',
      url: 'look.php',
      data: { designation_1 : select_val }
      dataType: 'html', // retour au format HTML
    })
    .success(function( html_retour ) {
      $('#prix_unitaire_1').html( "Retour : " + html_retour );
    });
  });
});
	</script>

code du look.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php 
	include('connect.php' );
 
	header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
 	$reponse = $bdd->query('SELECT pu FROM kk where designation="'.$_POST['designation_1'].'"');
 	$donnees = $reponse->fetch();
 
	$donnee_recue = ( isset($_POST['designation_1']) )? $_POST['designation_1'] : '';
	echo 'Vous avez sélectionné : '.$donnee_recue;
 
?>

le reste du code est en haut

Invité · 29/08/2018, 16h12

OK.

Débugage de base :

1- vérifier les variables JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    $('#id_select').on('change', function(){
    var select_val = $(this).val();
    alert ( select_val );
...

2- CORRIGER ton code PHP !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php 
        header('Content-type:text/html; charset=UTF-8');        // encodage UTF-8
 
if( isset($_POST['designation_1']) )
{
 
        include('connect.php' );
 
        $designation_1 = $_POST['designation_1'];
 
        $reponse = $bdd->prepare("SELECT pu FROM kk where designation= ? ");
        $reponse->ecexute( array($designation_1) );
        $donnees = $reponse->fetch();
 
        $pu = $donnees['pu'];
 
        echo 'Vous avez sélectionné : '.$donnee_recue.'<br />';       
        echo 'pu vaut : '.$pu;
 
}
?>

2- tester la page loop.php directement dans l'URL :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php 
        header('Content-type:text/html; charset=UTF-8');        // encodage UTF-8
 
//if( isset($_POST['designation_1']) )
//{
 
        include('connect.php' );
 
//      $designation_1 = $_POST['designation_1'];
        $designation_1 = '....'; // INDIQUER ICI une valeur connue (qui existe dans la base de données)
 
        $reponse = $bdd->prepare("SELECT pu FROM kk where designation = ? ");
        $reponse->execute( array($designation_1) );
        $donnees = $reponse->fetch();
 
        $pu = $donnees['pu'];
 
        echo 'Vous avez sélectionné : '.$donnee_recue.'<br />';       
        echo 'pu vaut : '.$pu;
 
//}
?>