[Formulaire] menu-déroulant part-2

[kahlanou]

Rappel du premier message :

Bonjour !

Suite aux MP de Scoubifitz me demandant d'ouvrir un sujet pour la suite qui serait profitable aux plus grands nombres, je reviens ici squatter un petit peu votre aide à tous !  

Voilà, je souhaiterais savoir comment faire pour prendre la valeur de plusieurs options dans un sous menu à plusieurs catégories. Exemple :

Votre profil professionnel : Cuisinier (Assassin)

"Cuisinier" serait ce que le candidat met dans la partie libre (textarea) et "Assassin" serait l'information qu'il donne en sélectionnant sa classe dans le menu déroulant. Ce qui nous donne donc deux cases côte à côte.


Ensuite, dans le cas de la "race" qui est devenu un menu déroulant, est-il possible que lorsque je sélectionne "Autre" une textarea s'ouvre ? (et soit bien entendu prise en compte par l'envoi du formulaire)

Merci à vous !

[Scoubifitz]

@ patriciadpt30 : la colère est très mauvaise conseillère ... et ne fait pas avancer les problèmes.

@ kahlanou :

la déformation du formulaire vient du fait que l'éditeur ne comprend pas les balises "fieldset" et "legend" à l'édition , et les referme directement après ouverture ...

les codes qui n'ont pas encore été modifiés (édités et enregistrés) depuis la dernière mise à jour restent valides . Ne les éditez donc pas pour le moment .

Pour les codes édités , qui sont déformés depuis , si vous avez conservé un original sur votre ordi (sur Notepad++ par exemple) , vous pouvez remplacer le code déformé par l'original .
Mais vous ne pourrez pas l'éditer par la suite , en attendant une correction de ce bug ...

sinon , pour donner suite à votre problème , ceci devrait être le plus adapté à votre demande :

la partie formulaire :

Code:

<tr>
<td colspan="2"><font color="cyan"> Vos métiers Rp parlant:</font><br><br>
<table>
<tr>
<td><input type="checkbox" name="metier" value="Alchimiste" id="alchemy">
<label for="alchemy"> Alchimiste </label></td>
<td><select name="alchemylevel">
<option value=" (Débutant)">Débutant</option>  
<option value=" (Intermédiaire)">Intermédiaire</option>  
<option value=" (Expert)">Expert</option>  
<option value=" (Virtuose)">Virtuose</option>
<option value=" (Maître)">Maitre</option>
</select></td><td>
<input type="checkbox" name="metier" value="Couturier" id="tailor">
<label for="tailor"> Couturier </label></td>
<td><select name="tailorlevel">
<option value=" (Débutant)">Débutant</option>  
<option value=" (Intermédiaire)">Intermédiaire</option>  
<option value=" (Expert)">Expert</option>  
<option value=" (Virtuose)">Virtuose</option>
<option value=" (Maître)">Maitre</option>
</select></td>
</tr><tr>
<td><input type="checkbox" name="metier" value="Cuisinier" id="Cooker">
<label for="Cooker"> Cuisinier </label></td>
<td><select name="Cookerlevel">
<option value=" (Débutant)">Débutant</option>  
<option value=" (Intermédiaire)">Intermédiaire</option>  
<option value=" (Expert)">Expert</option>  
<option value=" (Virtuose)">Virtuose</option>
<option value=" (Maître)">Maitre</option>
</select></td><td>
<input type="checkbox" name="metier" value="Constructeur" id="build">
<label for="build"> Constructeur </label></td>
<td><select name="buildlevel">
<option value=" (Débutant)">Débutant</option>  
<option value=" (Intermédiaire)">Intermédiaire</option>  
<option value=" (Expert)">Expert</option>  
<option value=" (Virtuose)">Virtuose</option>
<option value=" (Maître)">Maitre</option>
</select></td>
</tr><tr>
<td><input type="checkbox" name="metier" value="Artisan" id="artisan">
<label for="artisan"> Artisan </label></td>
<td><select name="artisanlevel">
<option value=" (Débutant)">Débutant</option>  
<option value=" (Intermédiaire)">Intermédiaire</option>  
<option value=" (Expert)">Expert</option>  
<option value=" (Virtuose)">Virtuose</option>
<option value=" (Maître)">Maitre</option>
</select></td><td>
<input type="checkbox" name="metier" value="Forgeron d'armes" id="weaponsmith">
<label for="weaponsmith"> Forgeron d'armes </label></td>
<td><select name="weaponsmithlevel">
<option value=" (Débutant)">Débutant</option>  
<option value=" (Intermédiaire)">Intermédiaire</option>  
<option value=" (Expert)">Expert</option>  
<option value=" (Virtuose)">Virtuose</option>
<option value=" (Maître)">Maitre</option>
</select></td>
</tr><tr>
<td><input type="checkbox" name="metier" value="Forgeron d'armures" id="armorsmith">
<label for="armorsmith"> Forgeron d'armures </label></td>
<td><select name="armorsmithlevel">
<option value=" (Débutant)">Débutant</option>  
<option value=" (Intermédiaire)">Intermédiaire</option>  
<option value=" (Expert)">Expert</option>  
<option value=" (Virtuose)">Virtuose</option>
<option value=" (Maître)">Maitre</option>
</select></td>
</tr>
</table>
</td>
</tr>

[kahlanou]

Je ne sais pas pourquoi, mais j'ai toujours de nouvelle surprise en vous voyant proposer ainsi des solutions sur ce que je pensais vraiment pas réalisable à la base, à savoir : combiner le menu déroulant ET le radio ...

C'est vraiment très ergonomique ainsi !
Seule question : l'envoie formulaire se fait avec un code radio, ou un code d'envoi de menu déroulant ?

Bien à vous. ^^

[Scoubifitz]

Il y aurait un script supplémentaire pour limiter les cases à cocher à trois maximum (valeur modifiable dans le script) , et l'envoi se ferait en conditionnel , c'est à dire si la case est cochée , le message contiendra la valeur de la case + la valeur du menu déroulant qui lui est associée .

[kahlanou]

Code:

// Dans le cas des radios, on va  prendre la valeur de celle qui est cochée:
for(var i = 0; i < form.métier.length; i++)
{
if(form.niveau[i].checked == true) { txt_message = txt_message + "Quel est votre métier rp parlant : " + form.métier[i].value + '\n'; }
}

Quelque chose comme cela ?..
Merci encore à vous !

[Scoubifitz]

non, non ... il faut y aller cas par cas ...

plutôt du genre :

Code:

var txt_message = "blabla..."
+ "[color=orange][b]Quels sont vos métiers ? :[/b][/color]\n"
+ (form.metier[0].checked ? form.metier[0].value + form.alchemylevel.value + '\n':"")
+ (form.metier[1].checked ? form.metier[1].value + form.tailorlevel.value + '\n':"")
+ (form.metier[2].checked ? form.metier[2].value + form.Cookerlevel.value + '\n':"")
+ (form.metier[3].checked ? form.metier[3].value + form.buildlevel.value + '\n':"")
+ (form.metier[4].checked ? form.metier[4].value + form.artisanlevel.value + '\n':"")
+ (form.metier[5].checked ? form.metier[5].value + form.weaponsmithlevel.value + '\n':"")
+ (form.metier[6].checked ? form.metier[6].value + form.armorsmithlevel.value + '\n':"")
+ "suitedublabla...";

donc si la 1ere case est cochée , la valeur de cette case sera transmise et la valeur de la liste aussi ... sinon il n'y aura rien .

les listes peuvent donc être complètement différentes , ça ne changera rien ...

[kahlanou]

D'accord ! je comprends mieux les "id" que vous avez mis pour chaque catégories. Je me demandais pourquoi elles étaient là si la balise du menu déroulant se cantonnait simplement à son .value ... Oulàlà..

En tout cas c'est super car le code est fonctionnel, ergonomique, simple et pas prise de tête pour celui qui remplis ( mais grosse prise de tête pour vous de l'avoir codé ! ) :zen: 

Merci à vous pour les explications, c'est surtout ça qui est génial !    

Je crois qu'avec votre aide, j'ai pu rendre tout ce petit code ergonomique... mais avant toute chose, et avant de conclure jovialement ce topic, que pensez-vous de la présentation en général ? Il y a -t-il des choses qui serait plus préférable de faire ou de modifier ?

http://newforts.mo-rpg.com/h5-code-test-aion


PS : ... Je suis simplement curieuse et je pense que ça peut servir à beaucoup : Est-il possible d'ancrer dans le formulaire une sélection de pièce jointe comme pour l'avatar ?


J'ai trouvé sur cette page le HTML : http://cyberzoide.developpez.com/html/form.php3
Mais il n'explique pas comment connecter l'image à l’envoie formulaire.

Encore merci !

[Scoubifitz]

Je vous répondrais demain , si ça ne dérange pas ...

Si mes souvenirs sont bons ,il y a même un des sujets sur les formulaires où ce genre de code pour pièces jointes y est inclus ...

[kahlanou]

D'accord, dans ce cas je vais passer en revue les 8 pages de formulaire dès que possible. Merci à vous !  

[Scoubifitz]

au pire , quelques hébergeurs proposent des mini-fenêtres en outils pour webmasters :
recopiez le code iframe ...

http://imagesia.com/webmaster

http://uprapide.com/outils-pour-webmasters

[kahlanou]

Donc il suffit de prendre le code iframe et puis basta ?   

[Scoubifitz]

Ben voui ...    * à l'air étonnée !    *

Casimages et Hosting pics le font aussi ..

[kahlanou]

Mais je veux dire... une fois qu'on a hébergé l'image, comment ça fonctionne avec le formulaire ?

[Scoubifitz]

en prenant avec UpRapide par exemple , il suffit d'héberger l'image et de prendre le code "lien avec un forum"

ce qui donne :

Code:

[url=http://uprapide.com/image/675325-deux_45][img]http://uprapide.com/images/invite/deux_45.gif[/img][/url]

et de coller ce code dans un champ de texte , de récupérer la valeur de ce champ avec le script d'envoi .

[kahlanou]

Donc mettre le script image + un textarea juste en dessous avec .value et .id ?

[Scoubifitz]

comme ceci :

Code:

<tr>
<td><label for="photo"><font color="cyan">Enregistrez votre photo et copiez le code "lien avec un forum" dans ce champ :</font></label><br />
<input type="text" name="photo" id="photo" size="85" maxlength="130" /><br />
<iframe src="http://uprapide.com/uploadiframe" scrolling="no" allowtransparency="true" frameborder="0" width="460" height="140"></iframe>
</td>
</tr>

et ceci dans le script :

Code:

var txt_message = "blabla..."
+ "[color=orange][b]Votre photo :[/b][/color]" + form.photo.value + '\n'
+ "suitedublabla...";

[kahlanou]

En effet, c'est le code que j'avais entré (sauf pour la value photo mais finalement je l'ai prise, plus cohérente.)
Seulement cela déforme mon cadre : http://newforts.mo-rpg.com/h5-postul-aion-2-ne-pas-edit



Ou alors j'ai droit au resize mal fait ..



D'ailleurs... les "input" tout simples peuvent comporter jusqu'à combien de caractères ? Car je les trouve très restreint. Et si un lien est trop long, cela risque de le couper..

[Scoubifitz]

mettez la balise ouvrante "td" avec un colspan="2" pour avoir toute la largeur de la ligne ...

augmentez le nombre du "maxlength" de votre "input" pour augmenter le nombre de caractères autorisés . 200 devraient faire l'affaire .

[kahlanou]

C'est parfait !!!   
J'ai même pu apprendre maintenant comment personnaliser les input et mettre une sélection d'image !!!   

Merci encore Scoubifitz !!
Je me permets juste d'être un petit peu chiante hihihi..

Comment peut-on faire pour que le lien de l'image soit directement mis en [ img][ /img] ?

[Scoubifitz]

il suffit d'héberger l'image et de prendre le code "lien avec un forum"

... ou dans votre cas , "BBcode pour forum"

[kahlanou]

Marchi ! En effet c'est tout bête ... et ça marche parfaitement !
Dernière question toute bête (car je n'en ai plus après et je ne vous embête plus !)

Comment fait-on pour que l'image une fois postée qui est dans le <tr><td> soit répétable verticalement ?

Code:

+ "[td][/td][/tr][tr][td colspan='2'][center][img]http://image.noelshack.com/fichiers/2013/39/1379937192-1340239272-hr.png[/img][/center][/td]"
        + "[/tr][tr][td][color=orange]blablablabla"

[Scoubifitz]

  pas compris la question ...

vous pouvez préciser ? ça doit être une barre de séparation qui se répète ?

[kahlanou]

Non, l'image de fond que vous voyez sur le formulaire posté (le fond bleu avec une espèce de démon derrière) s'est possible de lui dire de se répéter verticalement alors que le formulaire se fait en envoie bbcode ?

[Scoubifitz]

ben , simplement en disant au fond de se répéter , non ?

extrait :

Code:

[td style='background:url(http://image.noelshack.com/fichiers/2013/48/1385460540-azphel.png) repeat-y center;border:1px solid black;-moz-box-shadow: 1px 1px 12px #BABABA;-webkit-box-shadow: 1px 1px 12px #BABABA; box-shadow: 1px 1px 12px #BABABA;']

on dit à la cellule (td) d'avoir un fond (background) qui se répète à la verticale (repeat-y) et qui est centré dans la cellule .
(répétition horizontale = repeat-x , remplissage = repeat )

[kahlanou]

Parce que j'ai essayé de rajouter le "repeat : repeat;" et le formulaire n'a pas aimé...   
J'ai du me tromper de syntaxe ...

En tout cas, merci à vous !
Je crois que si j'avais quelque chose à rajouter, je referais un topic.
En attendant, comme tout commence à dériver du menu déroulant, je vais mettre ce sujet en résolu et vous remercie grandement pour votre aide et les explications données !

Pour vous !