Renseigner des champs à partir de données de div

Version imprimable

1 pièce(s) jointe(s)

Bonjour,
Je travaille sur un exercice qui consiste à renseigner des champs crées dynamiquement avec les données de champs div et fait le total d'une div qui contient les prix.
Mais je suis confronté à deux problème :
1 - Lorsque je fais un click sur le lien le champ input est crée deux fois ;
2 - j'ai une erreur de récursivité de la fonction total :

Citation:

Uncaught InternalError: too much recursion

Code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="col-lg-12 col-md-7 col-12">
		<div class="container">
			<div class="row">
				<article class="col-lg-4 col-sm-6 col-md-4 col-12">
					<div class="food-item" id="food-item">
						<div class="inner-content">
							<div class="food-simg"><img src="photos/alloco.jpg" alt="alloco" class="img-fluid" /></div>
								<div class="food-desc" id="food-desc">
									<div class="food-name" id="food-name">
										<img src="#" alt="" class="img-fluid"/>
										<h4 class="title">Alloco abidjanais</h4>
									</div>
									<div class="food-price col-lg-9 col-xs-9" id="prix">
										<div id="prix" style="display: inline-block;">1500</div><sup>FCFA</sup></div>
										<div class="food-add col-lg-3 col-xs-3 offset-9"><a href="#">+</a></div>
									</div>
 
								</div>
						</div>
				</article>
                         </div>
                </div>
      </div>

Code JQuery

Code:

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
$(document).ready(function(){
 
  $("article").on("click",".food-add>a", function(e){
	e.preventDefault();
 
	var $article = $(this).closest("article"),
	      nomMenu = $article.find("#food-name>h4").html(),
	     prix = $article.find("#prix>div").html();
 
    var $input = $('<input type="text" name="menu" size="31" value="'+nomMenu+'"><input type="text" name="prix" size="10" value="'+prix+'">');
	    console.log($input);
	  	$input.html(nomMenu+"  "+prix+" FCFA").appendTo($(".listeCmd"));
	 	$("#prixSelection").css("textAlign", "right");
 
		TotalCommande(); //Appel de la fonction claculer le total de la commande  
  });
 
  $("#itemChoix").on("click","li",function(){
    	var $this = $(this);
		$this.addClass("removing").slideUp(function(){
			$this.remove();
			TotalCommande();  //Appel de la fonction reclaculer le total de la commande après la suppression d'un menu  
   		});
 
  });
 
 
  function TotalCommande(){
    var $prixTotal = 0; //initialisation du total commande à 0
 
    $(".listeCmd").each(function(){
 
      	var $prix = $(this).html;
 
		$prixTotal += parseInt($prix);
    });
 
    if ($prixTotal == undefined){
      $prixTotal=0;
    }   
      var $boxTotal = $('<div id="#totalcommande"></div>');
      $boxTotal.html(TotalCommande()+" FCFA");
  };
 
});

Salut à tous,

Et comme ça ?

Code:

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
 
function TotalCommande() {
    var $prixTotal = 0; //initialisation du total commande à 0
 
    $('input[name*="prix"]').each(function () {
        $prixTotal += parseInt($(this).val());
    });
 
    if (!$('#totalcommande').length) {
        $('.food-desc').append('<div id="totalcommande"></div>');
    }
 
    $('#totalcommande').html('Total commande: ' + $prixTotal + ' FCFA');
};
 
$(function () {
    (function ($) {
 
        $('article').on('click', '.food-add > a', function (e) {
            var $input, nomMenu = $('.title').html(), prix = $('#prix > div').html();
            e.preventDefault();
 
            $input = $('<input type="text" name="menu" size="31" value="' + nomMenu + '"><input type="text" name="prix" size="10" value="' + prix + '"></br>');
            $('#food-name').append($input);
 
            TotalCommande(); //Appel de la fonction claculer le total de la commande  
        });
 
        $('#food-name').on('change keyup', 'input[name*="prix"]', function () {
            if (!$(this).val()) {
                $(this).val(0);
            }
 
            TotalCommande();
        });
 
    })(jQuery);
});

17/05/2022, 18h36
moudjahidine
Merci pour ta réponse mais le menu s'affiche deux fois pour un click (comme indiquer dans l'image) et c'est le même menu qui s'affiche même quand on choisit un autre.
Cependant mon script fonctionne correctement
Code:

1 2 3 4 var $article = $(this).closest("article"), nomMenu = $article.find("#food-name>h4").html(), prix = $article.find("#prix>div").html();

Salut,

Ton code dans l'état ne fonctionne pas chez moi.

Que cherches tu à faire avec ces deux lignes. Insérer deux éléments 'input' ?
Code:

1 2 3 var $input = $('<input type="text" name="menu" size="31" value="'+nomMenu+'"><input type="text" name="prix" size="10" value="'+prix+'">'); $input.html(nomMenu + " " + prix + " FCFA").appendTo($(".listeCmd"));

18/05/2022, 11h29
moudjahidine

A travers ce code, je crée deux champs avec pour valeur le menu choisi et son prix et je le affiche dans la div avec la class listeCmd.
Le problème c'est que les champs sont affichés en doublons : 2 champs menu et 2 champs prix à chaque fois qu'on click sur un menu.

Bonjour,
au passage

Citation:

Envoyé par moudjahidine

2 - j'ai une erreur de récursivité de la fonction total :

Citation:

Uncaught InternalError: too much recursion

il ne peut en être autrement ta fonction s'appelant elle même sans condition d'arrêt !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function TotalCommande(){ var $prixTotal = 0; //initialisation du total commande à 0 $(".listeCmd").each(function(){ var $prix = $(this).html; $prixTotal += parseInt($prix); }); if ($prixTotal == undefined){ $prixTotal=0; } var $boxTotal = $('<div id="#totalcommande"></div>'); // ICI tu la re-appelles ... et ainsi de suite $boxTotal.html(TotalCommande()+" FCFA"); };
il y a quand même beaucoup de lacunes dans ton code !