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;