J'utilise ce script pour récupérer certaines données de ma base de données MYSQL et cela fonctionne très bien. Ma page est en PHP.

 <script type = "text/javascript">
$(document).ready(function() {
    $("select#product1").on("change", function() {
        var id = this.value;
        $.ajax({
            url: "ajax.php",
            method: "post",
            data: "id=" + id,
            success: function(response) {
                var datashow = JSON.parse(response);
                price1 = datashow[0].price;
                time1 = datashow[0].time;
                $("input#totalprice").val(price1);
                $("input#totaltime").val(time1);
            }
        });
    });
}); </script>

Mon HTML est comme ceci:

<select id="product1" name="product1">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product1" name="product2">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product1" name="product3">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product1" name="product4">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product1" name="product5">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>


<input id="totalprice" type="text" name="totalprice" />
<input id="totaltime" type="text" name="totaltime" />

De cette façon, je suis en mesure de remplir mes 2 entrées différentes: totaltime et totalprice , avec la valeur récupérée avec mon fichier ajax.php.

Le problème est que j'ai 5 sélections différentes, non seulement product1 mais aussi product2, product3, product4 et product5.

J'ai besoin que mes 2 entrées, totalprice et totaltime, soient automatiquement renseignées avec la somme des valeurs récupérées de mon ajax, pour chaque sélection. Cela signifie que j'aurai (ou peut-être pas, ce ne sont pas des champs obligatoires) price2 et time2, price3 et time3 ...

Pour être plus clair: j'ai 5 champs de sélection différents, avec des produits dynamiques. Chacun de ces produits a un prix et un temps stockés dans mysql, que je récupère via le json. J'ai besoin de stocker le prix total (somme de chacun d'entre eux) et le temps total dans une entrée.

Une idée de comment je peux résoudre ce problème?

Merci :)

2
Amedeo Ricci 6 mars 2016 à 20:29

3 réponses

Meilleure réponse

Si je vous comprends bien, vous voulez parcourir les données json et ajouter chaque prix à une variable totale, puis le stocker dans l'entrée de prix total. Je suppose que le balisage html et vous devrez ajuster votre identifiant et les noms de classe pour correspondre. Maintenant, bien sûr, les valeurs de chaque entrée seront ajoutées dynamiquement à partir de votre base de données pendant votre appel AJAX et il semble que vous ayez déjà compris cette partie. Assurez-vous simplement de mettre le code JavaScript dans votre fonction de réussite Ajax.

Aperçu en direct

HTML:

<select class="product" name="product1">
<option value="" selected="selected">-</option>
<option value='20'>20</option>
</select>
<select class="product" name="product2">
    <option value="" selected="selected">-</option>
    <option value='30'>30</option>
</select>
<select class="product" name="product3">
    <option value="" selected="selected">-</option>
    <option value='40'>40</option>
</select>
<select class="product" name="product4">
    <option value="" selected="selected">-</option>
    <option value='15'>15</option>
</select>
<select class="product" name="product5">
    <option value="" selected="selected">-</option>
    <option value='22'>22</option>
</select>    

<input id="totalprice" type="text" name="totalprice" />
<input id="totaltime" type="text" name="totaltime" />

JavaScript / JQuery (placé à la fin de votre fonction de réussite Ajax):

var total = 0;

//I am using this to simulate your ajax function since I don't have access to your database
$("select").on("change", function() {

  //Place the following code at the bottom of your ajax success function

  //clear out the total to
  //prevent old prices from being added to the total
  total = 0;

  $(".product").each(function() {

    //if the value is not an empty string
    if ($(this).val() !== "") {

      //add the price to the total
      total += parseInt($(this).val());

    }

  }); //end each function

  //update the total
  $("#totalprice").val(total);

}); //end on change event

Mettre à jour la solution facultative: sur la base de vos commentaires, je pense que vous voudrez faire quelque chose comme suivre. Maintenant, gardez à l'esprit que vous devrez modifier l'URL de votre appel ajax et basculer la valeur de la variable datashow sur ce que vous aviez. J'ai dû le changer pour utiliser un fichier json pour simuler votre appel à la base de données.

HTML:

    <div id="products">
<select id="product1" name="product1">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product2" name="product2">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product3" name="product3">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product4" name="product4">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product5" name="product5">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
        </div>

<input id="totalprice" type="text" name="totalprice" />
<input id="totaltime" type="text" name="totaltime" />

JavaScript:

$(document).ready(function() {
    $("#products select").on("change", function() {
        var id = this.value;
        $.ajax({
            url: "ajax.json",
            method: "get",
            data: "id=" + id,
            success: function(response) {               

         //initialize totalPrice to 0 if doesn't contain a value
         var totalPrice = $("#totalprice").val() !== "" ? parseInt($("#totalprice").val()): 0;

                var datashow =  response;//JSON.parse(response);
                var price1 = parseInt(datashow[0].price);
                var time1 = datashow[0].time;


                //add the total price
                $("input#totalprice").val(totalPrice + price1);

                //Do something similar for time, I don't how you plan on parsing this?
                $("input#totaltime").val(time1);


            }
        });
    });
}); 
0
Larry Lane 7 mars 2016 à 02:58

Essayez de cette façon

  var price = parseInt($("input#totalprice").val());
  var time= parseInt($("input#totaltime").val());

  $("input#totalprice").val(price+price1);
  $("input#totaltime").val(time+time1);
0
Vigikaran 6 mars 2016 à 17:38

Lorsque vous ajoutez de la valeur dans la zone de texte avant cela, vérifiez la valeur de cette zone

var value1 =$("input#totalprice").val();
var totalPrice = parseInt(price1)+parseInt(value1 );
$("input#totalprice").val(totalPrice);
0
Manoj 7 mars 2016 à 07:08