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 :

Bouton radio et progressbar WP


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2022
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2022
    Messages : 1
    Points : 3
    Points
    3
    Par défaut Bouton radio et progressbar WP
    Hello!
    Je suis tout nouveau, je sors du four à l'instant. Développeur junior plutôt orienté Java j'ai un peu de mal avec le JS.
    Je suis sur la création d'un site en wp et j'utilise contact form 7 pour un questionnaire de satisfaction où le client veut une notation en bouton radio de 1 à 10 avec une progressbar qui progresse selon la note choisie de 10 à 100%.
    Problème : contact form 7 ne permet que des champs comme celui ci pour enregistrer la note en BDD :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="form-row">
    <div class="column-full">
    <label> <h2>Stratégie *</h2>
    <div class="containerform">
      [radio radio-394 class:stepformradio use_label_element default:1 "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]
      <div class="progress">
        <div class="progress-bar"></div>
      </div>
    </div>


    du coup pas possible de jouer sur les class pour apposer du CSS. Et j'ai clairement pas le niveau JS pour m'aventurer la dedans tout seul.
    En gros, quelle fonction JS me permettrait d'appliquer une sorte de :hover (que je fabriquerai en CSS selon le thème du site) sur le bouton radio sélectionné (j'ai fait un display:none sur les input et mit un cursor:pointer sur les label) et faire monter la progressbar selon la note?

    Franchement, si il y a un petit génie (à mes yeux ) qui aurait une idée je le saurai surement suivant être gré de ma reconnaissance (ou une phrase dans le genre). En bonus le code CSS de ma progressbar :::::::
    Code CSS : 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
    .progress {
    padding: 4px;
    background: rgba(0, 0, 0, 1);
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    }
     
    .progress-bar {
    height: 16px;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    }
    Nom : exemple.PNG
Affichages : 85
Taille : 11,7 Ko

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

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 352
    Points : 15 698
    Points
    15 698
    Par défaut
    peut-être qu'on combinant les 2 dans un slider, cela pourrait convenir ?
    https://fr.wordpress.org/plugins/ran...ontact-form-7/

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

Discussions similaires

  1. recupérer la valeur d'un bouton radio
    Par ericmart dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 19/05/2008, 15h42
  2. Boutons Radios qui charge une page php différente
    Par nebule dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/11/2004, 15h25
  3. apparition d'un chanp text au click d'un bouton radio
    Par Flobel dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 09/11/2004, 09h34
  4. [CR]liste de boutons radio
    Par inesfonfon dans le forum SAP Crystal Reports
    Réponses: 5
    Dernier message: 16/09/2004, 09h04
  5. Problème de boutons radio
    Par BRAUKRIS dans le forum Composants
    Réponses: 3
    Dernier message: 03/06/2004, 02h41

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