Page 1 sur 2 12 DernièreDernière
Affichage des résultats 1 à 10 sur 11
  1. #1
    Membre régulier
    Date d'inscription
    décembre 2009
    Messages
    189
    Remerciements
    2
    Remercié 0 fois
    dans 0 messages

    Par défaut Affichage conditionnelle d'une phrase et d'un bouton

    Bonjour tout le monde,

    je ne suis pas chevronné en développement mais j'ai quelques bases :-). J'ai développé en HTML 5 dans un article de mon site sous Joomla 3 un formulaire où l'on saisie des valeurs numériques et à la fin je renvoi un résultat après un calcul. Tout tourne bien mais je souhaiterais établir un test sur le résultat. Si mon résultat est par exemple égale à 20, j'affichent un bouton et une Phrase N°1 . Sinon, j'affiche la Phrase N°2. Est ce que cela est faisable en HTML5?
    Voici mon code :

    <form oninput="result.value =(( num1.value - num2.value)/num3.value)/30">
    <input name="num1" type="number" id="num1" />
    <input name="num2" type="number" id="num2" />
    <input name="num3" type="number" value="1" id="num3" />
    <output for="num1 num2" name="result"></output>

    Merci d'avance

  2. #2
    Jeune membre
    Date d'inscription
    avril 2011
    Messages
    23
    Remerciements
    4
    Remercié 0 fois
    dans 0 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    bonjour,
    je crois on peut faire ça en javascript si ça peut t'aider
    <form id="form" oninput="result.value =(( num1.value + num2.value)+num3.value)-30">
    <input name="num1" type="number" id="num1" value=""/>
    <input name="num2" type="number" id="num2" value=""/>
    <input name="num3" type="number" value="" id="num3"/>
    <output for="num1 num2" name="result" value=""></output>
    <div id="info"></div>

    <script type="text/javascript">
    window.addEvent('domready', function(){


    document.id('form').addEvent('change', function(){checkResult(this.value);});

    function checkResult(value){
    var num1 = document.id('num1').value;
    var num2 = document.id('num2').value;
    var num3 = document.id('num3').value;
    var nan = ((( num1 + num2)+num3)-30)

    if(nan == 20){
    window.alert(nan);
    document.id('info').innerHTML = 'ok';
    document.id('info').setStyle('display','block');
    document.id('info').addClass('valid');

    }else{
    document.id('info').innerHTML = '';
    document.id('info').setStyle('display','none');
    document.id('info').removeClass('valid');

    }
    return null;

    }})
    </script>

  3. #3
    Membre régulier
    Date d'inscription
    décembre 2009
    Messages
    189
    Remerciements
    2
    Remercié 0 fois
    dans 0 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    Bonjour,
    merci pour ta réponse. J'ai fait un copier/coller en modifiant la formule de calcul. Le résultat apparait mais le test javascript n'affiche rien. :-(

  4. #4
    Jeune membre
    Date d'inscription
    avril 2011
    Messages
    23
    Remerciements
    4
    Remercié 0 fois
    dans 0 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    Bonjour,
    As tu mootools loadé en début de page ? elle est nécessaire je crois pour faire marcher le script. Ca marche chez moi avec ta formule de calcul originale, si elle est changée dans la balise form il faut aussi faire la correspondance dans le script var nan = ((( num1 - num2)/num3)/30)

  5. #5
    Membre régulier
    Date d'inscription
    décembre 2009
    Messages
    189
    Remerciements
    2
    Remercié 0 fois
    dans 0 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    Citation Envoyé par chipie24 Voir le message
    Bonjour,
    As tu mootools loadé en début de page ? elle est nécessaire je crois pour faire marcher le script. Ca marche chez moi avec ta formule de calcul originale, si elle est changée dans la balise form il faut aussi faire la correspondance dans le script var nan = ((( num1 - num2)/num3)/30)
    Bonjour,
    il me semble que mootools est natif dans joomla 3. Sinon, que faut il faire pour le charger?
    merci

  6. #6
    Jeune membre
    Date d'inscription
    avril 2011
    Messages
    23
    Remerciements
    4
    Remercié 0 fois
    dans 0 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    Bonjour,

    je ne sais comment tu appeles ce formulaire mais ce que je sais maintenant apres avoir installé la derniere version 3.6.5 et fait un test avec le template de base protostar c'est que meme si mootools est natif j'ai du l'appelé au moyen d'un rajout dans le code de index.php avec cette ligne:
    JHtml::_('behavior.framework', true); car il n'etait pas loadé de base.

    vu sous firefox avec le petit bouton 'code' sans JHtml::_('behavior.framework', true);
    <script src="/projects/joomla365/media/jui/js/jquery.min.js"></script>
    <script src="/projects/joomla365/media/jui/js/jquery-noconflict.js"></script>
    <script src="/projects/joomla365/media/jui/js/jquery-migrate.min.js"></script>
    <script src="/projects/joomla365/media/system/js/caption.js"></script>
    <script src="/projects/joomla365/media/jui/js/bootstrap.min.js"></script>
    <script src="/projects/joomla365/templates/protostar/js/template.js?c88844d1f5c5dfa0459ba4da321c0f11"></script>


    vu sous firefox avec le petit bouton 'code' avec JHtml::_('behavior.framework', true);
    <script src="/projects/joomla365/media/jui/js/jquery.min.js"></script>
    <script src="/projects/joomla365/media/jui/js/jquery-noconflict.js"></script>
    <script src="/projects/joomla365/media/jui/js/jquery-migrate.min.js"></script>
    <script src="/projects/joomla365/media/system/js/caption.js"></script>
    <script src="/projects/joomla365/media/jui/js/bootstrap.min.js"></script>
    <script src="/projects/joomla365/media/system/js/mootools-core.js"></script>
    <script src="/projects/joomla365/media/system/js/core.js"></script>
    <script src="/projects/joomla365/media/system/js/mootools-more.js"></script>
    <script src="/projects/joomla365/templates/protostar/js/template.js?c88844d1f5c5dfa0459ba4da321c0f11"></script>

    et pour la partie javascript je l'ai ajouté au fichier template.js se trouvant dans le dossier js de protostar,

    tout en haut sous:
    (function($)
    {
    $(document).ready(function()
    {
    j'ai collé :
    window.addEvent('domready', function(){
    document.id('form').addEvent('change', function(){checkResult(this.value);});

    function checkResult(value){
    var num1 = document.id('num1').value;
    var num2 = document.id('num2').value;
    var num3 = document.id('num3').value;
    var nan = ((( num1 - num2)/num3)/30)

    if(nan == 20){
    window.alert(nan);
    document.id('info').innerHTML = 'ok';
    document.id('info').setStyle('display','block');
    document.id('info').addClass('valid');

    }else{
    document.id('info').innerHTML = '';
    document.id('info').setStyle('display','none');
    document.id('info').removeClass('valid');

    }
    return null;

    }})

    et ca a marché!
    Dernière modification par chipie24 ; 24/04/2017 à 05h39.

  7. #7
    Membre
    Date d'inscription
    octobre 2008
    Localisation
    Proche Orléans
    Messages
    86
    Remerciements
    0
    Remercié 10 fois
    dans 10 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    Bonjour,

    Il faut d'abord savoir de Mootools est déprécié dans Joomla 3.
    Il vaut mieux utiliser jQuery.
    Mais dans ton cas, ni besoin de Mootools, ni de jQuery.

    Code:
    <script type="text/javascript">
        ma_function_calcul() {
            result.value=(( num1.value - num2.value)/num3.value)/30;
        };
    </script>
    
    <form>
    <input name="num1" type="number" id="num1"  oninput="ma_function_calcul()"/>
    <input name="num2" type="number" id="num2"  oninput="ma_function_calcul()"/>
    <input name="num3" type="number" value="1" id="num3"  oninput="ma_function_calcul()"/>
    <output for="num1 num2" name="result"></output>
    </form>

  8. #8
    Jeune membre
    Date d'inscription
    avril 2011
    Messages
    23
    Remerciements
    4
    Remercié 0 fois
    dans 0 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    hello,
    Puisque mootools est déprecié voici une version jquery, je ne suis pas chevronné non plus en javascript mais ca fonctionne

    Code:
     jQuery(document).ready(function(){
    							 
     jQuery( "#form" ).change(function() {
    var info = jQuery('#info');
    var num1 = jQuery('#num1').val();
    var num2 = jQuery('#num2').val();
    var num3 = jQuery('#num3').val();
    var nan = ((( num1 - num2)/num3)/30);	
      //alert(nan);							 
    if(nan == 0.1){
    info.html('plein');
    info.css("display","block")
    info.addClass('valid');
    info.removeClass('invalid');
    
    }else{
    info.html('vide');
    info.css("display","block")
    info.addClass('invalid');
    info.removeClass('valid');
    }
    return null;								
    	});		
    	});
    et du css pour l'affichage:
    Code:
    .valid {
    	background-color:blue;
    	color:white;
    }
    .invalid {
    	background-color:red;
    	color:yellow;
    }
    a+

  9. #9
    Membre régulier
    Date d'inscription
    décembre 2009
    Messages
    189
    Remerciements
    2
    Remercié 0 fois
    dans 0 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    Bonsoir,
    excusez moi, je n'ai pas donné de suite car j'étais absent.

    - - - Mise à jour - - -

    Citation Envoyé par fabrice4821 Voir le message
    Bonjour,

    Il faut d'abord savoir de Mootools est déprécié dans Joomla 3.
    Il vaut mieux utiliser jQuery.
    Mais dans ton cas, ni besoin de Mootools, ni de jQuery.

    Code:
    <script type="text/javascript">
        ma_function_calcul() {
            result.value=(( num1.value - num2.value)/num3.value)/30;
        };
    </script>
    
    <form>
    <input name="num1" type="number" id="num1"  oninput="ma_function_calcul()"/>
    <input name="num2" type="number" id="num2"  oninput="ma_function_calcul()"/>
    <input name="num3" type="number" value="1" id="num3"  oninput="ma_function_calcul()"/>
    <output for="num1 num2" name="result"></output>
    </form>
    Merci Fabrice mais dans ta réponse je ne trouve pas de condition d'affichage!

  10. #10
    Membre régulier
    Date d'inscription
    décembre 2009
    Messages
    189
    Remerciements
    2
    Remercié 0 fois
    dans 0 messages

    Par défaut Re : Affichage conditionnelle d'une phrase et d'un bouton

    chipie24, merci à toi aussi.
    Mon formulaire, je l'ai inclus dans une page html tout simplement et lorsque je clique sir le bouton la page s'affiche. Voici le lien
    http://lapioche.fr/v2/index.php?opti...d=5&Itemid=113

    Aussi si j'opte pour ta méthode, devrais-je mettre le code jquery en brut dans une page vierge HTML que j'appellerais? où je devrais mettre le .css?

    merci d'avance

Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [RÉGLÉ] lire la suite conditionnelle
    Par Nathy78 dans le forum Installation et mise à jour de Joomla 3.x
    Réponses: 8
    Dernier message: 11/01/2017, 18h16
  2. [Problème] Conditionnelle dans un composant site/controller.php
    Par Nenidd dans le forum Questions générales
    Réponses: 7
    Dernier message: 13/01/2014, 13h03
  3. [Problème] Activation/affichage conditionnelle d'un module
    Par a231 dans le forum Gestion des modules
    Réponses: 0
    Dernier message: 13/01/2012, 11h28
  4. [Problème] Formulaire conditionnelle
    Par Haloan dans le forum Questions générales
    Réponses: 2
    Dernier message: 27/12/2010, 11h41
  5. Changer la phrase "Détails du produit" par une autre phrase
    Par Colorsofindia dans le forum E-commerce
    Réponses: 2
    Dernier message: 24/12/2008, 00h13

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •