Calculer une remise en JS facilement

Dans le magasin ou je travail, on peut avoir 10% sur les produits reversé à la fin du mois.

La cagnotte peut donc vite grossir et on peut en utilisé une partie ou payer la totalité de ces courses avec cette fameuse cagnotte(c’est le bute).
Mais elle peut aussi vite baisser si on l’utilise trop!!!

C’est donc pour ça que je me suis dit: je vais juste enlever 10% sur le total de mes courses à chaque fois au moment de payer qui me seront reversé à la fin du mois…

Je me suis donc créé une page pour ça comme toujours pour pas me casser la tête à y calculer suivant le pourcentage(pratique pour les soldes).

Le code Jquery:

$(document).ready(function() {
// ---------- ---------- ---------- ---------- ----------
	$(document).on('click', '.envoyer', function() { // On clique sur le bouton envoyé:
		var data_form_id = $(this).data('form_id'); // On récupère l'attribut data pour sélectionné le bon input
		
		var prix = $('.prix[data-form_id="'+data_form_id+'"]').val(); // On récupère la valeur du prix
		var remise_pourcentage = $('.remise[data-form_id="'+data_form_id+'"]').val(); // On récupère la valeur du pourcentage
		var calc_1 = prix * remise_pourcentage / 100; // On calcul la baisse de prix qu'on va avoir
		var calc_2 = prix - calc_1; // Le prix final
		
		// Le texte:
		var texte = '	<tr>';				
		texte += '			<td class="center">';
		texte += '<strong>' + prix + '€</strong>';
		texte += '			</td>';		
		texte += '			<td class="center">';
		texte += '<font color="#2D8A38"><strong>-' + calc_1.toFixed(3) + '€</strong></font>';
		texte += '			</td>';		
		texte += '			<td class="center">';
		texte += '<strong>'+calc_2.toFixed(3) + '€</strong>';
		texte += '			</td>';		
		texte += '			<td class="center">';
		texte += '<strong>' + remise_pourcentage + '%</strong>';
		texte += '			</td>';
		texte += '</tr>';
		$('#prix_reponse').prepend(texte); // On l'ajoute au tableau: nouveau en haut, ancien en bas
	});
	
	// On peut vider la zone quand on clique sur le bouton effacer:
	$(document).on('click', '.effacer', function() {
		$('#prix_reponse').html('');
	});
	
	$('.envoyer[data-form_id="1"]').trigger('click'); // On fait un clique automatique sur le premier formulaire
// ---------- ---------- ---------- ---------- ----------
});

Le code HTML:

<table class="table" border="1">
	<tr>
		<td class="center" colspan="2">Prix: <input type="text" class="prix" style="width:50px;" data-form_id="1" value="20" placeholder="Prix">€ </td>
		<td class="center" colspan="2">Pourcentage: <input type="text" class="remise" style="width:50px;" data-form_id="1" value="10" placeholder="Pourcentage">%</td>
	</tr>
	<tr>
		<td class="center" colspan="4"><input type="submit" data-form_id="1" class="envoyer"> - <input type="submit" class="effacer" value="Effacé"></td>
	</tr>
	<tr>
		<th style="width:25%;">Prix</th>
		<th style="width:25%;">Remise</th>
		<th style="width:25%;">Nouveau prix</th>
		<th style="width:25%;">Réduction</th>
	</tr>
	<tbody id="prix_reponse"></tbody>
	<tr>
		<th>Prix</th>
		<th>Remise</th>
		<th>Nouveau prix</th>
		<th>Réduction</th>
	</tr>
	<tr>
		<td class="center" colspan="2">Prix: <input type="text" class="prix" style="width:50px;" data-form_id="2" value="10" placeholder="Prix">€ </td>
		<td class="center" colspan="2">Pourcentage: <input type="text" class="remise" style="width:50px;" data-form_id="2" value="10" placeholder="Pourcentage">%</td>
	</tr>
	<tr>
		<td class="center" colspan="4"><input type="submit" data-form_id="2" class="envoyer"> - <input type="submit" class="effacer" value="Effacé"></td>
	</tr>
</table>

Astuce

Un truck que j’ai découvert: On peut sélectionner un attribut data en JS avec Jquery comme ça:

$(".conteneur").data("form_id"); 

Mais on peut aussi faire comme ça(le 1 peut être remplacé pas une variable comme dans le code plus haut):

$('.conteneur[data-form_id="1"]');

C’est peut être pas parfait, mais ça fonctionne.