IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Transformer valeur d'un select en variables javascript. Ajax obligatoire?


Sujet :

JavaScript

  1. #1
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2018
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Janvier 2018
    Messages : 29
    Par défaut Transformer valeur d'un select en variables javascript. Ajax obligatoire?
    Bonjour,
    Je recherche à transformer la valeur d'un select en une variable javascript.

    Le Code:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <form action="" method="post" name="liste">
     
    <select name="size" id="select" style="width:50px" Onchange="javascript:SelectValueChamp();">
    <option value=10.00 >10</option><option value=20.00 >20</option><option value=30.00 >30</option><option value=40.00 >40</option><option value=50.00 >50</option><option value=60.00 >60</option><option value=70.00 >70</option><option value=80.00 >80</option><option value=90.00 >90</option><option value=100.00 >100</option><option value=110.00 >110</option><option value=120.00 >120</option><option value=130.00 >130</option><option value=140.00 >140</option><option value=150.00 >150</option></select>
     
     <input type="text" name="item_number" value="">
     
    </form> 
    <div id="paypal-button"></div>
     
    <script>
    function showSelectedItem() {
    var item = document.getElementById("select").value;
    document.forms['liste'].elements['item_number'].value=item;
    //var SUBTOTAL =  item; //ne fonctionne pas!
    return item;
    }    
    document.getElementById("select").addEventListener("change", showSelectedItem);
    //var somme = item; //ne fonctionne pas!
    var somme = document.getElementById("select").value; //ne fonctionne pas!
     
     
        var CURRENCY = 'EUR';
        var SUBTOTAL =  somme;
        var TAX = '0.00';
        var SHIPPING = '0.00';
        var SHIPPING_DISCOUNT = '0.00';
        var TOTAL = somme;

    Explication de mon problème:
    Je souhaite pouvoir utiliser la variable "somme" qui doit être la valeur sélectionnée dans la liste.
    Cette variable change bien instantanément dans le champ texte "item_number", avec la fonction "showSelectedItem", mais impossible de la transformer instantanément en var somme.
    J'ai essayé toute la journée des dizaines de combinaison (et de forums), mais la seule valeur à chaque fois pour "somme" est celle du select au chargement de la page...
    J'imagine que cela doit être très simple, donc merci de ne pas se moquer , mais je bloque sérieusement.

    Merci pour toute aide.

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 651
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 651
    Par défaut
    quand la valeur du menu déroulant est modifiée, il y a uniquement la fonction "showSelectedItem" qui est appelé.
    donc c'est seulement dans cette fonction que vous pouvez lire la nouvelle valeur. et cela fonctionne bien puisque le champ "item_number" récupère bien cette valeur.

    le reste du code est exécuté au lancement de la page, au moment où la valeur n'est pas encore modifiée.

  3. #3
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2018
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Janvier 2018
    Messages : 29
    Par défaut Et oui, c'est bien ça le problème ;)
    Bonsoir et merci de la réponse.

    Oui, ça c'est ce que j'ai pu constater aussi...
    Mais comment puis-je faire pour que le résultat se trouvant dans ce champ texte puisse être transformer en variable utilisable hors de cette fonction?
    Ou bien utiliser la valeur "item" hors de la fonction, car le mot "somme" peut_être renomer en "item" sans problème.
    Et si je dois passer par ajax, je suis cuit parce que je n'y comprends rien du tout....

    Merci beaucoup pour l'aide, je continue à chercher .....

  4. #4
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 651
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 651
    Par défaut
    l'AJAX permet une communication entre JavaScript côté client et le serveur, vous n'avez pas besoin de ça :
    https://javascript.developpez.com/fa...#ajax.acronyme

    si vous souhaitez utiliser la valeur modifiée, vous pouvez la passer à une fonction comme cela :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    function showSelectedItem() {
        var item = document.getElementById("select").value;
     
        document.forms['liste'].elements['item_number'].value = item;
     
        traitementSomme(item);
     
    }
     
     
    function traitementSomme(somme) {
        // utiliser la valeur ici
        console.log(somme);
     
    }

  5. #5
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2018
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Janvier 2018
    Messages : 29
    Par défaut
    Merci Mathieu pour l'aide,

    Mais cela ne fonctionne toujours pas...

    Il y a du mieux, j'ai bien la valeur qui s'affiche dans la console, mais n'est pas récupérable Hors de cette nouvelle fonction, même en essayant de faire:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    ......//début du code
     
    document.forms['liste'].elements['item_number'].value = item;
     traitementSomme(item);
    }
    function traitementSomme(somme) {
    // utiliser la valeur ici
    console.log(somme);// Ne fonctionne pas!
    var somme = console.log(somme);// Ne fonctionne pas!
     }
    console.log(somme);// Ne fonctionne pas!
    var somme = console.log(somme);// Ne fonctionne pas!
    Et si j'ai bien compris votre solution, il faudrait englober tout le code qui suit dans cette nouvelle fonction, mais là c'est Paypal qui ne fonctionne plus....
    Donc, si je comprends bien, en Javascript on ne peut pas déclarer une variable et l'utiliser comme on veut par la suite?

    Merci encore...

  6. #6
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2018
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Janvier 2018
    Messages : 29
    Par défaut Le code en totalité pour mieux comprendre....
    Je place tout le code pour mieux comprendre, si cela peut aider.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    <form action="" method="post" name="liste">
     
    <select name="size" id="select" style="width:100px" Onchange="javascript:SelectValueChamp();">
    <?php
    $nombre = 150;
    $est_divisible_par = 10;
    //echo "<select>";
    echo "<option selected value='' >Choisissez</option>";
    for ($x = 0; $x <= $nombre ; $x++) {   
    if($x % $est_divisible_par === 0)
    {
    //echo "The number is: $x <br>";
    if ($x != 0)  echo "<option value=$x.00 >$x</option>";
    }
    }
    echo "</select>";
    ?>
     
     
    <input type="text" name="item_number" value=""><br>
    <span id="current"></span>
     
    </form> 
    <div id="paypal-button"></div>
     
    <script>
    document.getElementById("current").innerHTML = "Choisissez le montant que vous souhaitez regler." ;
    var somme="1.00";
     
    function showSelectedItem() {
    //var somme="1.00";
    var item = document.getElementById("select").value;
    document.forms['liste'].elements['item_number'].value=item;
    traitementSomme(item);
        
    document.getElementById("current").innerHTML = "Vous avez choisi de regler " + item + " €" ;
    }
     
    function traitementSomme(somme) {
    // utiliser la valeur ici
    console.log(somme);
     }
     var somme = console.log(somme);
     
    document.getElementById("select").addEventListener("change", showSelectedItem);
     
     
     
        var CURRENCY = 'EUR';
        var SUBTOTAL =  somme;
        var TAX = '0.00';
        var SHIPPING = '0.00';
        var SHIPPING_DISCOUNT = '0.00';
        var TOTAL = somme;
     
          
        paypal.Button.render({
          env: 'sandbox', // Or 'sandbox',
     
          commit: true, // Show a 'Pay Now' button
     
    client: {
    sandbox: 'AMlXKb0P7rQnsdfgsdfgsdfgsdfgsdfgobGFnOt45U-RQB5ue9g69F9XF7bPaC6WiOUWVmGu738ZI9XrNWUvwFTisoZrn'
          },
     
          style: {
            label: 'paypal',
            size: 'small',
            shape: 'rect',
            color: 'blue'        
          },
     
          // Set up the payment here 
          payment: function (data, actions) {
            return actions.payment.create({
              payment: {
                transactions: [
                  {
                    amount: { 
                      total: TOTAL, 
                      currency: CURRENCY,
                      details: {
                        subtotal: SUBTOTAL,
                        tax: TAX,
                        shipping: SHIPPING,
                        shipping_discount: SHIPPING_DISCOUNT
                      }
                    },
                    //description: 'The payment transaction description',
                    description: 'Détail de votre transaction:',
                   // invoice_number: '48787589673',
                    item_list: {
                      items: [
        {name: 'Règlement partiel du site', quantity: '1', price: somme, currency: CURRENCY},
                      ]
                    }
                  }
                ],
        note_to_payer: 'Contactez moi pour toute question concernant ce règlement.'
              }
            });
          },
     
          // Execute the payment here 
          onAuthorize: function (data, actions) {
     
     
              return actions.payment.execute().then(function (payment) {
                // The payment is complete!
              
                // Get payer info            
                var payer = payment.payer.payer_info;
                console.log("Email: " + payer.email);
                console.log("Name: " + payer.first_name + ' ' + payer.last_name);
                
                // Get payment info
                console.log("Id: " + payment.id);
                console.log("Intent: " + payment.intent);
                console.log("State: " + payment.state);
                  
    document.location.href="http://www.mondomaine-approved.com?etat=";
                  
              });
     
            //});
          },
     
          onCancel: function (data, actions) {
            /* 
             * Buyer cancelled the payment 
             */
             console.log('Payment was cancelled!');
              //window.alert('Payment was cancelled!');
              document.location.href="http://www.mondomaine-cancelled.com";
          },
     
          onError: function (err) {
            /* 
             * An error occurred during the transaction 
             */
             console.log(err);
             window.alert('There was an error');
          }
        }, '#paypal-button');
        
       //showSelectedItem();
      </script>

  7. #7
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2018
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Janvier 2018
    Messages : 29
    Par défaut Transformer une valeur console.log en variable globale ? Possible?
    Bonjour,
    Je n'ai pas trouvé de solution à mon problème.
    Mais après moultes recherche, apparemment il me faut bien passer par une requête ajax qui me fabriquerait une variable PHP que je pourrai utiliser aux trois endroits nécessaires.
    Ou alors un rafraîchissement de la page avec le select et session (ou cookie).
    Je sais que le conseil de l'ordre des développeurs interdit de donner les réponses aux newbies (sans qu'il ne se soit cassé un peu le cerveau auparavant), mais à defaut de m'apporter une solution, y aurait-il un développeur sympa qui pourrait m'indiquer si oui ou non je dois passer par une de ces solutions ou bien si javascript peut changer la valeur d'une variable ailleurs que dans une balise avec ID?
    Merci à lui.
    Ps: je ne le dirai pas aux autres pour ne pas qu'il soit ennuyé 😉

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,

    Attention :
    ligne 43 tu redéfini ta variable globale somme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var somme = console.log(somme); // somme vaut undefined ICI

  9. #9
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2018
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Janvier 2018
    Messages : 29
    Par défaut
    Oui, mais c'est l'un de mes (très) nombreux essais infructueux, car suite au conseil de Mathieu et l'ajout de sa fonction, j'obtiens dans la console du navigateur la valeur changeante, mais je n'arrive pas à la transmettre plus bas dans le script comme avec du PHP.
    Je voudrais juste savoir si c'est réalisable ou pas sans requête ajax ou rafraîchissement de la page...
    Merci tout de même..

  10. #10
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2018
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Janvier 2018
    Messages : 29
    Par défaut Merci à tous!
    Merci à tous pour votre GRANDE aide précieuse à une simple question:
    Peut-on modifier une valeur javascript sans rafraichissement de page ou pas?
    Je vais me démerder différemment... et tacherai de ne plus vous importuner avec mes questions de débutant sur ce forum réservé aux Experts!

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Citation Envoyé par jeffy_berri
    Je vais me démerder différemment... et tacherai de ne plus vous importuner avec mes questions de débutant sur ce forum réservé aux Experts!
    lorsque j'ai pris connaissance de la notification de cette discussion j'ai immédiatement oublié ma famille, mes loisirs, mon travail pour me documenter et regarder à quoi ressemblait l'API PayPal

    J'ai vu qu'il existe une fonction, payment pour la citer, qui est appelée au click sur le bouton « payment() is called when the button is clicked »

    Le code dans la démo :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // payment() is called when the button is clicked
    payment: function(data, actions) {
        // Make a call to the REST api to create the payment
        return actions.payment.create({
            payment: {
                transactions: [
                    {
                        amount: { total: '0.01', currency: 'USD' }
                    }
                ]
            }
        });
    },
    Il te faut donc récupérer la valeur dans cette fonction et l'affecter à la propriété total.

    Tu pourrais donc faire un truc du style de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // payment() is called when the button is clicked
    payment: function(data, actions) {
        // Make a call to the REST api to create the payment
        return actions.payment.create({
            payment: {
                transactions: [
                    {
                        amount: {
                            total: document.querySelector("#select").value,
                            currency: 'EUR'
                        }
                    }
                ]
            }
        });
    },
    Sur ce je retourne vaquer à mes occupations, dis nous si on est à côté de la plaque

  12. #12
    Membre actif
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2018
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Janvier 2018
    Messages : 29
    Par défaut MERCI DU FOND DU COEUR !!!!
    Merci à toi, NoSmoking!!

    Ça fonctionne parfaitement!
    Bon, j'ai passé deux jours (et bonne partie des deux nuits) à en apprendre un peux plus sur le javascript du coup!
    Mais là je désespérait et m'orientait vers une redirection javascript pour enregistrer la valeur du select en session php...
    Avec pourtant l'intime conviction que cela n'était pas nécessaire... d'où mon agacement.

    Un énorme merci à toi, et toute mes excuses pour le temps volé sur famille, loisirs et travail

    MERCI, MERCI, MERCI!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 01/07/2016, 17h28
  2. variable javascript/ajax
    Par laxe13 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 05/08/2008, 09h46
  3. Réponses: 1
    Dernier message: 14/06/2006, 17h53
  4. Réponses: 5
    Dernier message: 14/06/2006, 16h35
  5. Passer la valeur dune variable javascript à une variable xsl
    Par nramariavelo dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 12/12/2005, 17h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo