Variable valeur - Calcule en Jquery

Bonjour,

Je me permets de poster un nouveau post ici pour sollicité votre aide.
Je vous explique en bref, j'essaye de créer un système de devis en ligne avec l'affichage de l'article, et la possibilité d'additionner suivant les options.

Ma méthode fonctionne plus ou moins.. mais me complique la vie..

Est-ce possible de stocker des valeurs dans des variables, et les récupérer par la suite pour les additionner une fois ceux ci sélectionnée dans un select option?

Exemple :

var K476 = 17.00;

<option id="K476" class="preview">Kariban - Capuche - K476</option>

Et en jquery récupérer l'id sélectionné ( K476 ) et donc lui attribuer la valeur de 17.00 pour pouvoir l'additionner avec autre chose ?

En vous remerciant d'avance de votre aide,
je vous souhaite une excellente journée.

NeSo

Et l'eau NeSo,

le session (et non le local) Storage devrait aider
Modifié par niuxe (03 Feb 2021 - 20:19)

Bonsoir Niuxe,

Merci pour le conseil, je vais jeter un oeil la dessus

J'ai encore une petite question. J'utilise plusieurs "select" avec différents "ID"
j'aurai souhaité simplifier mon code pour connaitre l'option choisie dans un select sans devoir les identifier tous..

J'utilise ceci pour connaitre l'ID sélectionnée dans le select "cat-tshirt"

var item_select = $("#cat-tshirt option:selected").attr("id");

Je multipliais donc ceci pour chaque select.. En remplaçant #cat-tshirt.

J'avais dans l'idée de mettre dans une variable id-select le nom du select sélectionné et ensuite remplacer "#cat-tshirt" par un "#" +id-select option:selected mais j'ai un peu du mal.. aha

Je ne sais pas si mon explication est claire.. Aha

Merci d'avance !

Je vois à peu près où tu veux en venir. Le souci étant que je suis quasi sûr que tu aies un select pour la catégorie de t-shirt et un select pour la quantité. Cela dit, je pense que tu as d'autres select. Donc, je ne peux pas te donner une réponse adéquate.

Peux-tu poster le html de ton formulaire sur le forum ?

Voici comment se comporte pour le moment une partie de mon code

Un select catégorie qui permets de choisir la catégorie ( t-shirt / sweat / etc.. )
J'utilise ceci pour afficher le bon select qui contient les différents articles :

$('#cat').change(function() {
  var cat_select = $("#cat option:selected").val();
    $(".cat-tab").hide();
    $("#" +cat_select).show();
});

<select name="cat" id="cat">
  <option value="0" id="selection">Selection</option>
  <option value="cat-tshirt" id="tab3" class="tab">T-shirt</option>
  <option value="cat-sweat" id="tabsweat" class="tab">Sweat</option>
</select>
   
<select id="cat-tshirt" class="cat-tab">
    <option value="0" id="tab3" class="tab">Selection</option>
    <option value="3.71" id="CGTU03T" class="preview">B&C - CGTU03T</option>
    <option value="3.72" id="CGTW04T" class="preview">B&C - CGTW04T</option>
    <option value="7.71" id="CGTU07T" class="preview">B&C - ML - CGTU07T</option>
    <option value="5.94" id="CGTW08T" class="preview">B&C - Femme CGTW08T</option>
    <option value="5.34" id="K356" class="preview">Kariban - K356</option>
</select>

<select id="cat-sweat" class="cat-tab">
    <option value="0" id="tabsweat" class="tab">Selection</option>
    <option value="19.91" id="CGWU620" class="preview">B&C - CGWU620</option>
    <option value="17.36" id="K476" class="preview">Kariban - Capuche - K476</option>
    <option value="11.56" id="K474" class="preview">Kariban - Col - K474</option>
    <option value="15.41" id="K478" class="preview">Kariban - Col zip - K478</option>
</select>

Je peux donc dans une variable récupérer la valeur du premier select exemple cat-tshirt et j'aurai souhaité pouvoir utiliser cette variable pour me permettre de connaitre ensuite quel article a été choisi dans celle ci.. sans devoir faire des lignes de code pour chaque select #cat-tshirt / #cat-sweat etc.. car il y en aura d'autres..

Mon idée est donc ensuite de retirer les "values" pour utiliser la méthode que tu m'as envoyé plus haut pour effectuer mes calcules
Modifié par NeSo (04 Feb 2021 - 09:57)

Et l'eau,
Désolé si je ne te réponds que maintenant. J'ai été occupé.
Je te mets sur la voie. Ce n'est pas terminé. À toi de faire le reste (vérif formulaire, et après avoir soumis le form (attention de bien gérer le sessionStorage))
réponse ici : https://codepen.io/niuxe/pen/wvoGExe

ps : n'oublie pas d'importer tout dans un environnement local afin de voir le résultat en sessionStorage
Modifié par niuxe (07 Feb 2021 - 15:35)

Bonjour Niuxe,

Merci beaucoup pour ta réponse !
J'ai mis un peu de temps à répondre car j'ai essayé pas mal de test et j'ai surtout essayé de m'en sortir xD Mais je constate que ce n'est pas du tout de mon niveau aha

J'étais déjà content du résultat ( avec quelques bugs ) de ce que j'étais parvenu a faire avec très peu de connaissances en jquery.. ( l'aperçu avant ton aide www.ineart.be/devis ) mais je vois que les possibilités sont énormes et assez complexes grâce a ton code..

il va me falloir encore quelques heures/jours d'apprentissage pour parvenir a manipuler ton code pour l'affichage des prix, l'affichage des images etc.. xD

En tout cas merci du temps et de l'aide !

Dimitri

bonsoir Neso,

merci poru ton retour. J'ai vu ton lien et en effet, je pense que ça va être très sympa par la suite. J'ai quelques bemol au niveau de la maquette, mais au final, ça sera sympa.

à plus

Bonjour Niuxe,

J'ai donc essayé d'adapter et comprendre le code que tu m'as créé
Je n'ai pas encore fait grand chose.. mais je m'y retrouve déjà mieux ( je n'ai pas encore fait de mise en page ) www.ineart.be/devis/index2.html

J'ai désactivé pour le moment le bouton devis, pour le chargement des images etc..
Cependant j'ai un petit soucis.. ( pour pas changer )

J'aurai souhaité pouvoir vider le sessionStorage à la sélection de la catégorie.. dans le but de reset le select, si par exemple par erreur je vais dans t-shirt je sélectionne un article, et ensuite voir un sweat, le "t-shirt" reste en mémoire.. j'ai donc essayé "sessionStorage.clear();" mais rien ne se passe :

$formDevis.on('change', 'select[id^=cat_]', function(){
   sessionStorage.clear();
   var cat = $(this).find('option:selected').data('id');
   $(this).parent().next().find('select').attr('hidden', 'hidden').filter('[id^='+cat+'_]').removeAttr('hidden').parent().next().find('input').removeAttr('hidden');
    });

Un petite solution?

Merciiii
Modifié par NeSo (12 Feb 2021 - 23:32)

N'as tu pas vu dans mon codepen, j'ai initialisé une fonction clearStorage . Plus bas, je l'utilise dans le code

Oui autant pour moi
Je suis parvenu a l'utiliser au bon endroit

Merci beaucoup ! J'ai encore pas mal de travail pour parvenir a m'améliorer et a comprendre l'ensemble