Query

Exemple d'une inscription avec des options changeant les prix,

Le principe est simple.
- On crée un formulaire avec tous les champs (y compris les champs calculés que l'on mettra en affichage uniquement)

liste***ListeJour2***<span style="color:#006699;">Mercredi 3 juillet</span>*** ***1*** *** *** ***1***0***Comprend la participation aux frais (repas du midi, salles, docs, achats pauses thé/café)***@admins

texte***bf_total***Total***60***255*** *** *** ***0***0***Calcul automatique***@admins

Ici ListeJour2 est une liste qui comprend les options en libellé et le coût en clé
bf_total est le champs qui reçoit le total des options choisi.


labelhtml***<script type="text/javascript" src="tools/bazar/libs/patchyw.js"></script> *** ***

A noter: L'inscription d'un javascript dans la page html ci-dessus. Soit vous déposez le fichier appelé sur votre site en ftp, soit vous utilisez l'adresse du téléchargement (déconseillé, mais en cas d'absence d'autre accès, ça marche) via la commande:
{{attach file="patchyw.js" desc="Telecharger le fichier javascript"}}



Le code en entier (détaillé par petit morceaux plus bas)
function defer(method) 
    {if (window.jQuery) {  method(); } 
    else { setTimeout(function() 
        { defer(method) }, 50); }
    }; 
defer(function () {
    $("#bf_total").prop("readonly", true);
    $("#bf_reference").prop("readonly", true);

    $("#bf_nom").change(function(){
        compute_ref();
      }); 
    
      

    $("#listeListeJour1").change(function(){
        $("#bf_total").val(somme());
      }); 

    $("#bf_don_somme").prop("type", "number");

    $("#listeListeJour1").change(function(){
        $("#bf_total").val(somme());
      });    
    $("#listeListeJour2").change(function(){
        $("#bf_total").val(somme());
      });   
    $("#listeListeJour3").change(function(){
        $("#bf_total").val(somme());
      });
    $("#listeListeRepassoir1").change(function(){
        $("#bf_total").val(somme());
      });  
    $("#listeListeRepassoir2").change(function(){
        $("#bf_total").val(somme());
      });
    $("#listeListeNuitveille").change(function(){
        $("#bf_total").val(somme());
      });  
    $("#listeListeNuit1").change(function(){
        $("#bf_total").val(somme());
      }); 
    $("#listeListeNuit2").change(function(){
        $("#bf_total").val(somme());
      });    
    $("#listeListeDons").change(function(){
        $("#bf_total").val(somme());
      });               
    $("#bf_don_somme").keyup(function(){
        $("#bf_total").val(somme());
      }); 
    $("#bf_don_somme").change(function(){
        $("#bf_total").val(somme());
      });               

    });

function compute_ref() {    
    let reference;
    ref=guid();
    nom=$("#bf_nom").val();
    reference=nom+"-"+ref;
    $("#bf_reference").val(reference);
    }

function guid() {
    function s4() {
          return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
        }
        return s4() + '-' + s4();
      }

function somme() {
    let totaldon;
    //console.log("val",$("#bf_don_somme").val(),$.isNumeric($("#bf_don_somme").val()),
    $("#listeListeDons").children("option:selected").val(), ($("#listeListeDons").children("option:selected").val()=="autre")); 
    if(($("#listeListeDons").children("option:selected").val()) && $.isNumeric($("#listeListeDons").children("option:selected").val()))
        {
        totaldon = $("#listeListeDons").children("option:selected").val()
        }
    else if (($("#listeListeDons").children("option:selected").val()) && ($("#listeListeDons").children("option:selected").val()=="autre"))
        {
       
        totaldon = +($("#bf_don_somme").val() && $.isNumeric($("#bf_don_somme").val())?$("#bf_don_somme").val():0)    
        }
    else {
        totaldon=0
    }
    //console.log("DON",totaldon);
    total = +($("#listeListeJour1").children("option:selected").val()?$("#listeListeJour1").children("option:selected").val():0)
    + +($("#listeListeJour2").children("option:selected").val()?$("#listeListeJour2").children("option:selected").val():0)
    + +($("#listeListeJour3").children("option:selected").val()?$("#listeListeJour3").children("option:selected").val():0)
    + +($("#listeListeRepassoir1").children("option:selected").val()?$("#listeListeRepassoir1").children("option:selected").val():0)
    + +($("#listeListeRepassoir2").children("option:selected").val()?$("#listeListeRepassoir2").children("option:selected").val():0)
    + +($("#listeListeNuitveille").children("option:selected").val()?$("#listeListeNuitveille").children("option:selected").val():0)
    + +($("#listeListeNuit1").children("option:selected").val()?$("#listeListeNuit1").children("option:selected").val():0)
    + +($("#listeListeNuit2").children("option:selected").val()?$("#listeListeNuit2").children("option:selected").val():0)
    + +totaldon;

    j1=($("#listeListeJour1").children("option:selected").val()?$("#listeListeJour1").children("option:selected").val():0);
    j2=($("#listeListeJour2").children("option:selected").val()?$("#listeListeJour2").children("option:selected").val():0);
    j3=($("#listeListeJour3").children("option:selected").val()?$("#listeListeJour3").children("option:selected").val():0);
    // console.log('j1 => ',j1,'  j2 => ',j2,  '  j3 => ',j3, (j1==10 && j2==10 && j3==10), (j1==22 && j2==22 && j3==22))
    if (j1==10 && j2==10 && j3==10){
        total2 = +total -5;
        total = total2 + " (prime d'assidutité de 5 €)";
    }
    if (j1==22 && j2==22 && j3==22){
        total2 = +total -6;
        total = total2 + " (prime d'assidutité de 6 €)";
    }
        

    return total;
    }


  • Explications


Cette partie de code permets d'attendre que jquery soit chargé dans la page avant d’exécuter les ordres jquery.

function defer(method) 
    {if (window.jQuery) {  method(); } 
    else { setTimeout(function() 
        { defer(method) }, 50); }
    }; 
defer(function () {
   ...
}


Les lignes $(id).change relance le calcul à chaque changement de valeur. La valeur est inscrite dans le champs bf_somme qui est en read olny.
$("#listeListeJour1").change(function(){
        $("#bf_total").val(somme());
      });


Bien entendu, je reste à disposition en cas de besoin (Olivier Picot, ODASS, op@odass.org ou framateam).
NB: Ce code a été écrit pour le collectif des associations citoyennes qui en a financé le développement CAC

Telecharger le fichier script en entier