Imprimer la Page | Fermez la fenêtre

Bouton téléchargement

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23935
Date: 28 Mar 2024 à 22:51
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Bouton téléchargement
Posté par: disbras
Sujet: Bouton téléchargement
Posté le: 26 Août 2020 à 15:05
Bonjour,

J'aimerais créer une case à cocher afin d'accepter des règles d'utilisation, avant de télécharger un fichier depuis mon site. Pour cela, il faudrait que la case soit décochée au démarrage de la page, et le bouton lançant le téléchargement aussi. Quand la case sera cochée, le bouton deviendrait fonctionnel, et permettrait de télécharger le fichier.

Pouvez-vous m'aider ?

Merci d'avance pour l'aide que vous allez me donner !!



Réponses:
Posté par: brolysan
Posté le: 26 Août 2020 à 15:54
Alors, voila comment (en attendant surement une optimisation du code de Hobby001).

Créez un bloc de code visuel, le déposer à l'endroit où vous voulez la checkbox (j'expliquerai après pourquoi du code et non l'élément).

Mettez ce code suivant :


<input type="checkbox" name="prep[]" class="test" value="" class="casePrep">


Ensuite, mettez un bouton Téléchargement fichier.
Indiquez quel fichier vous souhaitez.
Copiez son ID surtout.

Ajouter un bloc de code source sur la page.
Spécifiez le type en Html et position Header
Mettez ce code :


<script>
  function affMasqBtnPrep(){
 
     var n = $("input:checked[name='prep[]']").length;// Nombre de checkbox cochée
    if(n == 0) {
            $("#WEb66a5cc68b").hide();// Bouton invisible
    } else {
            $("#WEb66a5cc68b").show(); // Bouton visible
        }
 
}
$(document).ready(function() {
  affMasqBtnPrep();
$(".test").change(function () {
  affMasqBtnPrep();
});
});

</script>


changez les IDs en rouge par l'ID de votre bouton Téléchargement fichier.
Sauvegardez et prévisualisez.
Cela marche normalement

pas réussi à faire l'élément Checkbox d'Openelement, peut être que Hobby001 y arrivera.  Wink



-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: disbras
Posté le: 26 Août 2020 à 17:15
Bonjour, oui cela marche parfaitement, mais y a-t-il un moyen de désactiver le bouton au lieu de le faire disparaitre ?


Posté par: brolysan
Posté le: 26 Août 2020 à 18:04
a voir, on peut tricher autrement après.

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: disbras
Posté le: 26 Août 2020 à 19:23
PPas de problème, trichons alors ! Comment fait-on ?


Posté par: Hobby001
Posté le: 27 Août 2020 à 11:45
Utilisez l'élément checkbox 
Utilisez l'élément téléchargement de fichier et ajoutez-y une classe CSS: clickNo

Code CSS ( mettez-y ce que vous voulez comme couleur et effets )

.clickNo{
pointer-events: none;
background-color: silver;
}

Code JS

$('#WE19eb3e0aad').click(
function(){
if ($('#WE19eb3e0aad input').is(":checked")){
$('#WEc768d74718').removeClass('clickNo');
} else {
$('#WEc768d74718').addClass('clickNo');
}
}
);

Remplacez WE19eb3e0aad par l'ID de votre checkbox

Remplacez WEc768d74718 par l'ID de votre bouton de téléchargement

Edit: Correction de la cible du code css



-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 27 Août 2020 à 13:21
bien joué Hobby001, je butais sur une partie du code, chapeau Clap

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: disbras
Posté le: 27 Août 2020 à 14:43
Bonjour,

Je viens de tester cet autre code, cependant il m'est impossible de cocher la checkbox, et le lien est toujours activé. Auriez-vous une solution ? (J'ai testé en essayant d'inverser les ID mais cela ne change rien)

Merci d'avance pour votre aide !


Posté par: Hobby001
Posté le: 27 Août 2020 à 18:38
Mais si ça fonctionne très bien.  https://www.denislafrance.net/TestPage.htm" rel="nofollow - https://www.denislafrance.net/TestPage.htm

Publiez votre page quelque part qu'on cesse de jouer aux devinettes.  

Par contre en relisant j'ai constaté que mon texte contenait une erreur de taille.  Ce n'est pas le checkbox qui doit porter la classe mais bien l'élément de téléchargement.



@brolysan, 

l'astuce vient du fait que l'élément de téléchargement n'est pas un bouton, il ne peut donc être traité comme tel.




-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 27 Août 2020 à 19:08
Désolé, je ne devrais pas écrire du code à 04:30 le matin.

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: disbras
Posté le: 31 Août 2020 à 18:40
Merci beaucoup, le code marche parfaitement, mais j'ai eu un problème dont je vais quand même partager la solution.

Mettre la classe clickNo dans open element me donnait une erreur, donc j'ai utilisé ce code :

$('#WEcddc2f3d17').addClass('clickNo');

$('#WE948d98aa9e').click(

    function(){

        if ($('#WE948d98aa9e input').is(":checked")){

            $('#WEcddc2f3d17').removeClass('clickNo');   

        } else {

            $('#WEcddc2f3d17').addClass('clickNo');

        }

    }

);



Posté par: Hobby001
Posté le: 01 Sep 2020 à 01:26
C'est toujours apprécié quamd quelqun partage ses trouvailles

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: singe-prudent
Posté le: 14 Dec 2020 à 10:44
Bonjour, merci pour cette info, j'ai essayé de mon côté car je débute tout juste dans le code et ça fonctionne, c'est top ! bonne journée Thumbs Up



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net