Partage

Input Radio avec comportement d'un file

Comment rendre un Input radio avec la proposition d'upload un fichier

Sujet résolu
10 octobre 2017 à 17:30:57

Bonjour tout le monde,

Je pense poser une colle pour beaucoup de personne !

Je dois faire un formulaire avec des Inputs de type radio pour laisser le choix de deux choses comme cette exemple :

http://jsfiddle.net/5svAp/9/

(d'ailleurs si quelqu'un à quelque chose de mieux à proposer pour du texte dans un Input radio je prend également)

J'aimerais que l'un de ces choix serait d'upload un fichier, qu'il serve à la fois de radio et de file ! :D

Une idée ? ou plusieurs ? :)

idée 1 : cacher le input file (parcourir) et le faire apparaître un Jquery quand la personne clique sur l'option pour envoyer le fichier.

10 octobre 2017 à 19:08:10

En gros, tu veux deux boutons qui représentent deux réponses à une même question, et le deuxième permet d'uploader un fichier ?

Si oui, tu fais deux conteneurs avec un radio caché dedans, un label qui active le radio correspondant, et un event JS qui détecte le "cochage" d'un radio pour donner le focus à un input file caché.

Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.
11 octobre 2017 à 9:50:57

D'accord je comprend et comme ça le input radio sera automatiquement activé quand le personne va Uploader son fichier ?!

En gros pour le moment j'ai fais ça : https://jsfiddle.net/cL5a4wug/1/

la personne peux m'envoyer le CV ce qui activera le radio de gauche et donc faire la méthode 1 ou alors envoyer le formulaire a un ami(e) radio de droite qui activera la méthode 2

J'update pour activer le radio de gauche quand la personne Upload le fichier ça peux servir pour quelqu'un qui recherche plus ou moins la même chose que moi.

Merci de ton aide :)

-
Edité par Quentin_Panda 11 octobre 2017 à 10:04:45

11 octobre 2017 à 10:37:06

C’est l’inverse. C’est quand le deuxième radio est coché que ça déclenche l’ouverture du champ file.
Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.
11 octobre 2017 à 11:54:20

D'accord je pensais pouvoir rendre ça plus érgonomique en évitant d'avoir un input supplémentaire.

Du coup le plus simple et le plus efficace serait ceci : https://jsfiddle.net/cL5a4wug/4/   (Le jQuery n'est pas prit en compte :()

c'est bon Résolut ! 

-
Edité par Quentin_Panda 11 octobre 2017 à 12:18:58

11 octobre 2017 à 12:38:59

Non mais, quand tu sélectionnes le champs "envoyer", un bout de JavaScript met le focus sur un champ file caché, ce qui va ouvrir la popup de sélection de fichier.
Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.

Input Radio avec comportement d'un file

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown