Affichage conditionnelle d'une phrase et d'un bouton

[javali59]

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

[chipie24]

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>

[javali59]

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. :-(

[chipie24]

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)

[javali59]

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)

Bonjour,
il me semble que mootools est natif dans joomla 3. Sinon, que faut il faire pour le charger?
merci

[chipie24]

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é!

[fabrice4821]

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.

<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>

[chipie24]

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

 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:

.valid {
	background-color:blue;
	color:white;
}
.invalid {
	background-color:red;
	color:yellow;
}

a+

[javali59]

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 - - -

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.

<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!

[javali59]

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?option=com_content&view=article&id=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

[chipie24]

Re : Affichage conditionnelle d'une phrase et d'un bouton

Bonjour Javali,

Si tu optes pour cette méthode alors il faut ajouter id="form" à la balise form du formulaire.
Aussi il faut qu'il y ait le <div id="info"></div> sur la page html car c'est lui qui va contenir le texte.

Peut etre que tu devrais essayer d'ajouter le script directement en brut sous le formulaire. Si tu choisis d'appeler le script alors il faudra renommer la page html qui contient le script en js.

C'est difficile de te répondre pour l'ajout de css car tous les templates sont différents alors peut etre devras tu consulter la documentation de ton template. Mais le css n'est pas indispensable, il est possible de ne pas s'en servir et de supprimer les lignes du script:
info.addClass('valid');
info.removeClass('invalid');
info.addClass('invalid');
info.removeClass('valid');

Il est aussi possible d'ajouter des styles css au script:
info.css({'display': 'block', 'background-color': '#0080c0', 'color': '#fff'});

exemple:

<script type="text/javascript">
  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);							 
if(nan == 0.1){
info.html('output est 0.1');
info.css({'display': 'block', 'background-color': '#0080c0', 'color': '#fff'});
}else{
info.html('output est pas 0.1');
info.css({'display': 'block', 'background-color': 'yellow', 'color': 'red'});
}
return null;								
	});		
	}); 
</script>

bonne journée