Discussion :

[Saturos2k4]

Bonjour,

Voici le problème :

Je travaille actuellement sur un formulaire de paiement en Php/html et javascript, le select item fonctionne et met à jour le prixdans la case grise total,

J'aimerai rajouter des boutons "qualité" par default égale à 1, donc total x 1, et je voudrai faire varier la valeur de total

Exemple : qualité standard => total x 1.50

qualité pro => total x2.00



voici mon code js du bouton select qui fonctionne:

Code :

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

1
2
3
4
$('select[name="item_id"]').on('change', function() {
           var total = parseFloat($('select[name="item_id"] option:selected').attr('data-price')).toFixed(2);
           updateTotal(total);
       });

code html/php du select :

Code HTLM :

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

1
2
3
4
5
6
<select name="item_id" class="form-control" data-rule-required="true">
											<option value="">-- S&eacute;lectionnez le produit --</option>
											<?php foreach ( Model::factory('Item')->find_many() as $item ) : ?>
											<option value="<?php echo $item->id; ?>" data-name="<?php echo $item->name; ?>" data-price="<?php echo $item->price; ?>" <?php echo get('item_id') == $item->id ? 'selected' : ''; ?>><?php echo $item->name; ?> (<?php echo currency($item->price); ?>)</option>
											<?php endforeach; ?>
										</select>

voici le code js des boutons radio qui ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
$('input[name="quality"]').on('change', function() {
			var input = document.getElementById(cb.getAttribute('data-qty'));									 
			var qty = input.value;
			var amount = 0;
			if (qty != '') 
			{
            amount += total * qty;
            }
            updateTotal(amount);
        });

code html des boutons :

Code HTML :

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

1
2
3
4
<input name="quality" type="radio" class="my-activity" value="1.00" data-qty="1.00" checked> 
Qualité 1er Prix (total x 1)<br />
<input class="my-activity" type="radio" name="quality" value="1.50" data-qty="1.50"> Qualité Standard (total x 1.5)<br />
<input class="my-activity" type="radio" name="quality" value="2.00" data-qty="2.00"> Qualité Pro (total x 2)<br />

Je bloque un peu je dois avouer... Merci d'avance pour votre aide :-)

[psychadelic]

premier truc : les [inputs].value sont de type texte et non de type numérique.
Chercher à faire des opérations arithmétiques avec du texte, ça ne peut pas marcher.

Pour les [inputs] en HTML5 il faut utiliser des balises <label> surtout pour les boutons radio et les checkbox, et c'est pas juste une question de "respect des normes" mais c'est parce qu'il y a des mécanismes utiles qui vont avec.

[javatwister]

Eh oui...

En d'autres termes, change tes valeurs avec Number(valeur), donne un id à chaque bouton, un label qui va bien avec, et sera un formulaire de paiement un peu plus engageant;

[Saturos2k4]

Bonsoir , merci beaucoup pour votre support ;-)

Code HTML :

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

1
2
3
4
5
6
<label for="quality"><span class="colordanger">*</span>Qualit&eacute; rédactionnelle:
<input id="quality" name="quality" type="radio" class="my-activity" value="1.00" data-qty="1.00" checked> 
Qualité 1er Prix (total x 1)<br />
<input id="quality" class="my-activity" type="radio" name="quality" value="1.50" data-qty="1.50"> Qualité Standard (total x 1.5)<br />
<input id="quality" class="my-activity" type="radio" name="quality" value="2.00" data-qty="2.00"> Qualité Pro (total x 2)<br />
</label>

Code :

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

1
2
3
4
5
6
7
8
9
10
 $('input[id="quality"]').on('change', function() {
			var input = document.getElementById(cb.getAttribute('data-qty'));									 
			var qty = Number(value);
			var amount = 0;
			if (qty != '') 
			{
            amount += total * qty;
            }
            updateTotal(amount);
        });

Voici mes modifications, mais ça n'a pas l'air de fonctionner... j'ai du louper quelque chose :-/

[javatwister]

Number(input.value)

[psychadelic]

C'est un petit peu délirant comme code, alors j'ai au moins 2 questions :

1 / à quoi ça sert d'avoir deux attributs différents pour indiquer la même chose ?
comme ici value="1.50" data-qty="1.50"

2 / Pourquoi utiliser du jQuery pour un truc aussi trivial qui peut s'écrire 100 fois plus simplement en javascript ?

une remarque:
visiblement, il s'agit d'un morceau de formulaire, j'aimerai mieux voir cette partie de code entière de ce formulaire en HTML (générée) et pas avec du PHP.
parce que, par exemple, on ne voit pas ce que peut être l' élément HTML ayant comme critère jQuery $('input[id="quality"]') (qui au passage est vraiment tirré par les cheveux, mais pourquoi pas....)

Exemple de formulaire quand on lit la documentation => voir le code à jour dans le post à la suite