Hello tout le monde !

Je cherche un peu d'aide en javascript car je suis loin d'être un fortiche. Pourtant je suis certain que c'est super simple. Allé il n'y a pas de question bête...

J'ai un formulaire de résa. On y choisit le spectacle que l'on veut voir et le nombre de places. J'ai déjà un petit code qui donne en temps réel le prix que va devoir payer l'acheteur :

<div class="flex">
        <div class="info_place">Adhérent* :</div>
        <div class="nbr_place"><%= f.input :member, as: :integer, label: false, input_html: {id: 'quantite_1', value: 0, min: "0", onchange: 'prix()'} %></div>
        <div class="result_place"><div><span id="prix_1">0</span> €</div></div>
      </div>

function prix()
{
  var quantite_1 = parseInt(document.getElementById('quantite_1').value);
  var resultat_1 = quantite_1 * 5;
  document.getElementById('prix_1').innerHTML = resultat_1;
}

Pas d'inquiétude pour le input c'est du Ruby

Maintenant j'aimerais pouvoir changer le multiplicateur (ici 5) en fonction du choix du spectacle. (le select de mon spectacle à pour id:play)

Comment puis je faire ça sachant qu'il y aura 2 choix possibles : des spectacles à 5€ et d'autre à 8€ ?

Je vous écoute

C'est simple, tu récupère la valeur de ton select (play ou.. autre) puis tu fait une condition comme ça :

const prix= ()=> {
	let quantite_1= parseInt(document.getElementById('quantite_1').value);
	let id_de_select = 'Ici tu fait un document.getCequetuveut';
	let prix_unite= 8;
	if(id_de_select=="play") prix_unite= 5;
	let resultat_1= quantite_1 * prix_unite;
	document.getElementById('prix_1').innerHTML = resultat_1;
};

Après, j'ai pas trop compris sous quel format elle est écrite ta valeur, si elle est sous le format 'id:play' il suffit de faire un .split(':').reverse()[0] pour récupéré ce qui ce trouve a droite des ":".

Merci Chifumy pour ta réponse

J'ai testé ton code mais rien ne fonctionnait. J'ai changé 2 3 petites choses comme cela :

function prix() {
    var quantite_1= parseInt(document.getElementById('quantite_1').value);
    var id_de_select = document.getElementById('play');
    var prix_unite = 5;
    if(id_de_select == "4") prix_unite = 8;
    var resultat_1 = quantite_1 * prix_unite;
    document.getElementById('prix_1').innerHTML = resultat_1;
};

La le calcul de base (multiplié par 5) fonctionne mais quand je passe dans mon select au spectacle d'ID 4 ça multiplie toujours par 5 et non par 8.

Est-ce qu'il est possible de voir ton select ? Ensuite, utilises plutôt des let à la place de var, c'est mieux ;) 

C'est un select généré en ruby du coup je mets le code html généré. Je me suis rendu compte que l'id était mauvais mais en le remplaçant ça n'a pas amélioré mon prbl :

<div class="form-group string required booking_play"><label class="control-label string required" for="booking_play"><abbr title="required">*</abbr> Play</label>
 <select name="booking[play_id]" id="booking_play_id"><option value=""></option>
    <option class="4" value="4">Ferdinand va au chémar</option>
    <option class="3" value="3">Dom Juan</option></select>
</div>

Quelle est la différence entre var et let au juste ?

Ok ça fonctionne ! 

Je travaille sur ruby on rails du coup normal que mon formulaire soit en ruby

Autre question : maintenant j'aimerais que le prix change quand dans le nom de ma play il y a le signe +

<select name="unNom" id="booking_play" onchange="prix()">
      <option value="0">-</option>
      <option class="4" value="4">Ferdinand va au chémar</option>
      <option class="3" value="3">Dom Juan</option>
<option class="3" value="3">Dom Juan + concert</option>
    </select>

Est ce que c'est possible et est ce que c'est facile à réaliser ?

Avec indexOf("+")

En faisat if(select_id.indexOf(+)) ?

-
Edité par Coeurcoeur 21 juin 2018 à 13:46:53

Coeurcoeur a écrit:

En faisat if(select_id.indexOf(+)) ?

-
Edité par Coeurcoeur il y a 2 minutes

if(select_id.indexOf("+") >= 0){ // }

Sinon dans es6

select_id.includes('+'); // renvoi un boolean

-
Edité par DevMercenaire 21 juin 2018 à 13:58:26

ça ne fonctionne pas...

function prix() {
  let select_id = parseInt(document.getElementById("booking_play").value);
  let prix = 5;
  if(select_id.indexOf('+') >= 0){
    prix = 8;
  }

  let quantite_1 = parseInt(document.getElementById("quantite_1").value);
  let prixFinal_1 = quantite_1*prix;
  document.getElementById("prix_1").innerHTML = prixFinal_1;}

Après la ligne 3, tu peux mettre console.log(select_id) et voir les valeurs que tu as.

Et comment je sors les logs ? là ça ne fait rien

-
Edité par Coeurcoeur 22 juin 2018 à 9:46:41

Sur l'outil de développement de ton navigateur. Si tu utilises chrome, touche F12 et onglet console

Quand je mets l'id de ma play dans ma value j'obtiens bien l'id (dans la console) Par contre quand je mets le title de ma play (pour avoir l'insigne + entre autre) il me sort NaN

C'est parce que tu fais parseInt sur une chaîne de caractère.

Ah ? Et du coup je remplace par quoi ? (quand je dis que je suis pas fortiche en js c'est pas des blagues )

 let e = document.getElementById("booking_play")
if((e.options[e.selectedIndex].text).indexOf('+')>=0){
   //
};

.value te revoie la valeur et .text te renvoie le texte

-
Edité par DevMercenaire 22 juin 2018 à 11:21:56

C'est parfait ! Merci !!

Correction rapide : let est une variable locale au bloc de code où elle est définie (bloc if, boucle, fonction). var est systématiquement définie avec pour "scope" toute la fonction dans laquelle elle a été créée, ou est globale si elle a été créée en dehors. Aujourd'hui, l'usage de var est globalement fortement déconseillé pour 99% des cas.

Ok merci Genroa

Une dernière question DevMercenaire ou les autres : si au lieu de renvoyer la value je veux renvoyer le name dans ton morceau de code DevMercenaire ? (j'ai tenté .name à la place de text mais rien à faire)

Quel name ?

Montre le moi avec un bout de code.

<select>

 <option name="titre" class="" value="4">Mon spectacle</option>

</select>

Ma value doit forcément être numéral pour le bien de mon application du coup je dois me rabattre sur mon name

@Coeurcoeur essaye avec l'utilisation de la fonction getAttribute() sur ton option sélectionnée:

e.options[e.selectedIndex].getAttribute('name')

C'est ça parfait merci bien les amis !