Formulaire choix à cocher

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Formulaire choix à cocher

Message par aloovi le Ven 14 Sep 2012 - 13:17

résolu Bonjours,

J'ai cherché sur pas mal de tutoriels un moyen de faire un formulaire, cependant mes notions en Javascript son très très limité et un travail de cette ampleur me dépasse.

Je fais donc appel à vous pour m'aider dans sa conception.

Grosso modo ça doit ressembler à ça:

https://i39.servimg.com/u/f39/17/79/02/34/formul10.png

Je fourni par la même occasion le necessaire pour le faire

Code:
Profession

Icône gardien      : http://i39.servimg.com/u/f39/17/79/02/34/comgau18.png
Icône rôdeur      : http://i39.servimg.com/u/f39/17/79/02/34/comgau19.png
Icône envouteur    : http://i39.servimg.com/u/f39/17/79/02/34/comgau20.png
Icône guerrier    : http://i39.servimg.com/u/f39/17/79/02/34/comgau21.png
Icône necromancien : http://i39.servimg.com/u/f39/17/79/02/34/comgau22.png
Icône elementaliste: http://i39.servimg.com/u/f39/17/79/02/34/comgau23.png
Icône ingénieur    : http://i39.servimg.com/u/f39/17/79/02/34/comgau24.png
Icône voleur      : http://i39.servimg.com/u/f39/17/79/02/34/comgau25.png

Artisanat

Icône artificier        : http://i39.servimg.com/u/f39/17/79/02/34/icane_23.png
Icône bijoutier          : http://i39.servimg.com/u/f39/17/79/02/34/icane_24.png
Icône Chasseur          : http://i39.servimg.com/u/f39/17/79/02/34/icane_25.png
Icône forgeron d'armes  : http://i39.servimg.com/u/f39/17/79/02/34/icane_26.png
Icône forgeron d'armures : http://i39.servimg.com/u/f39/17/79/02/34/icane_27.png
Icône tailleur          : http://i39.servimg.com/u/f39/17/79/02/34/icane_28.png
Icône travailleur de cuir: http://i39.servimg.com/u/f39/17/79/02/34/icane_29.png
Icône maître queux      : http://i39.servimg.com/u/f39/17/79/02/34/icane_30.png

Race

Icône Norn    : http://i39.servimg.com/u/f39/17/79/02/34/gw2_no10.gif
Icône Sylvaris : http://i39.servimg.com/u/f39/17/79/02/34/gw2_sy10.gif
Icône Humain  : http://i39.servimg.com/u/f39/17/79/02/34/gw2_hu10.gif
Icône Charr    : http://i39.servimg.com/u/f39/17/79/02/34/gw2_ch10.gif
Icône Asura    : http://i39.servimg.com/u/f39/17/79/02/34/gw2_as10.gif

Adresse du forum : http://behemoth.fr-bb.com/

Valeur "f" pour destination sous-forum : f1

Je vous serez extremement reconnaissant, en attendant je me met déjà au travail sait-on jamais
Aloovi


Dernière édition par aloovi le Lun 17 Sep 2012 - 0:46, édité 2 fois

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par Manumanu le Ven 14 Sep 2012 - 14:00

Bonjour,

Il faut que ça fasse quoi, exactement ?

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Ven 14 Sep 2012 - 14:06

Ah, je ne m'attendai pas à une réponse aussi tôt Smile

En gros, comme on vois sur l'image, on dois pouvoir coché en fonction de sa situation.

Par exemple je suis humain, je coche sur le choix avec l'avatar d'humain, je suis guerrier, idem je coche sur le choix avec l'icone guerrier.
Pour les métier il y a deux choix possible donc un choix multiple et pour terminer en bas, une zone de texte pour ce présenter.

Voilà, je reste dans le coin au besoin de plus de renseignement.

Merci de vous y interraisser

Aloovi

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Formulaire choix à cocher

Message par Manumanu le Ven 14 Sep 2012 - 14:07

Ça c'est de la mise en page simple, mais quelles doivent être les conséquences de ce choix ? Qu'est-ce qu'il doit se passer une fois qu'on a sélectionné ?

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Ven 14 Sep 2012 - 14:09

Une fois envoyé, les informations devrons être mise automatiquement dans un sous forum "recrutement"


aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par Manumanu le Ven 14 Sep 2012 - 14:35

C'est bien ce que je pensais... Malheureusement il te faudrait passer par du php pour pouvoir envoyer des informations au forum, et c'est impossible sur forumactif.

Désolé...

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Ven 14 Sep 2012 - 14:39

Je ne suis pas de ton avis.

Sur un post j'ai trouvé ça
Code:
<style type="text/css">
<!--
.fieldform{
width:160px;
border-radius:10px;
font-size:12px;
}
.fieldform input,.fieldform select,.fieldform textarea{
font-size:12px;
}
.colorform{
color:SteelBlue;
}
-->
</style>
<script type="text/javascript">
/* tableau options multiples */
monTableau = new Array(3);
monTableau[0] = new Array(2);
monTableau[1] = new Array(2);
monTableau[2] = new Array(2);
monTableau[3] = new Array(2);
monTableau[4] = new Array(2);
/* forum TERA */
monTableau[0][0] = "35";
monTableau[0][1] = new Array(1);
monTableau[0][2] = new Array(1);
/* forum GUILD WARS */
monTableau[1][0] = "26";
monTableau[1][1] = new Array(1);
monTableau[1][2] = new Array(1);
/* forum BLADE + SOUL */
monTableau[2][0] = "24";
monTableau[2][1] = new Array(1);
monTableau[2][2] = new Array(1);
/* forum AION */
monTableau[3][0] = "3";
monTableau[3][1] = new Array(1);
monTableau[3][2] = new Array(1);
/* forum SWTOR */
monTableau[4][0] = "23";
monTableau[4][1] = new Array(1);
monTableau[4][2] = new Array(1);
/* race TERA */
monTableau[0][1][0] = "Humain";
monTableau[0][1][1] = "Castanic";
monTableau[0][1][2] = "Haut Elfe";
monTableau[0][1][3] = "Elin";
monTableau[0][1][4] = "Popori";
monTableau[0][1][5] = "Aman";
monTableau[0][1][6] = "Baraka";
/* classe TERA */
monTableau[0][2][0] = "Lancier";
monTableau[0][2][1] = "Pourfendeur";
monTableau[0][2][2] = "Sorcier";
monTableau[0][2][3] = "Mystic";
monTableau[0][2][4] = "Guerrier";
monTableau[0][2][5] = "Berseker";
monTableau[0][2][6] = "Archer";
monTableau[0][2][7] = "Prêtre";
/* race GUILD WARS */
monTableau[1][1][0] = "Tyrie";
monTableau[1][1][1] = "Cantha";
monTableau[1][1][2] = "Elona";
/* classe GUILD WARS */
monTableau[1][2][0] = "Derviche";
monTableau[1][2][1] = "Parangon";
monTableau[1][2][2] = "Assassin";
monTableau[1][2][3] = "Ritualiste";
monTableau[1][2][4] = "Guerrier";
monTableau[1][2][5] = "Elémentaliste";
monTableau[1][2][6] = "Moine";
monTableau[1][2][7] = "Rôdeur";
monTableau[1][2][8] = "Envoûteur";
monTableau[1][2][9] = "Nécromant";
/* race BLADE + SOUL */
monTableau[2][1][0] = "JIN";
monTableau[2][1][1] = "GON";
monTableau[2][1][2] = "KUN";
monTableau[2][1][3] = "LYN";
/* classe BLADE + SOUL */
monTableau[2][2][0] = "Blade Master";
monTableau[2][2][1] = "Kung-Fu Master";
monTableau[2][2][2] = "Force Master";
monTableau[2][2][3] = "Destroyer";
monTableau[2][2][4] = "Assassin";
/* race AION */
monTableau[3][1][0] = "Elyséen";
monTableau[3][1][1] = "Asmodien";
/* classe AION */
monTableau[3][2][0] = "Sorcier";
monTableau[3][2][1] = "Spiritualiste";
monTableau[3][2][2] = "Rôdeur";
monTableau[3][2][3] = "Assassin";
monTableau[3][2][4] = "Gladiateur";
monTableau[3][2][5] = "Templier";
monTableau[3][2][6] = "Aède";
monTableau[3][2][7] = "Clerc";
/* race SWTOR */
monTableau[4][1][0] = "Cyborg";
monTableau[4][1][1] = "Humain";
monTableau[4][1][2] = "Myraluka";
monTableau[4][1][3] = "Myrialan";
monTableau[4][1][4] = "Twi'lek";
monTableau[4][1][5] = "Zabrak";
/* classe SWTOR */
monTableau[4][2][0] = "Homme de troupe";
monTableau[4][2][1] = "Contrebandier";
monTableau[4][2][2] = "Chevalier Jedi";
monTableau[4][2][3] = "Consulaire Jedi";
/* changement d'options */
function jeu_onchange(strChoix)
{
document.post.Race.options.length = 0;
document.post.Classe.options.length = 0;
for(var x=0;x<monTableau.length;x++)
{
if (monTableau[x][0] == strChoix)
{
for(var y=0;y<monTableau[x][1].length;y++)
{
opt = y==0?new Option(monTableau[x][1][y],monTableau[x][1][y],true,true):new Option(monTableau[x][1][y],monTableau[x][1][y],false,false);
document.post.Race.options[y] = opt;
}
for(var z=0;z<monTableau[x][2].length;z++)
{
opt1 = z==0?new Option(monTableau[x][2][z],monTableau[x][2][z],true,true):new Option(monTableau[x][2][z],monTableau[x][2][z],false,false);
document.post.Classe.options[z] = opt1;
}
}
}
}

function envoiMessage(form)
{
/* Refuser l'envoi si un des champs est vide */
if( form.jeu.value === "")
{
alert("Merci de selectionner un jeu");
return false;
}
else
{
/* Créer un message à partir des informations fournies */
var txt_message = "<strong>Nom du personnage : </strong> " + form.Perso.value + "\n"
+ "<strong>Race : </strong> " + form.Race.value + "\n"
+ "<strong>Classe : </strong> " + form.Classe.value + "\n"
+ "<strong>Métiers : </strong>\n" + form.Metiers.value + "\n\n"
+ "<strong>Presentation Irl : </strong>\n" + form.irl.value + "\n\n"
+ "<strong>Disponibilités : </strong>\n" + form.Disponible.value + "\n";
form.message.value = txt_message;
form.subject.value = "Présentation de " + form.Perso.value;
form.f.value = form.jeu.value;
return true;
}
}
</script>
<fieldset class="fieldform">
<legend>Formulaire de recrutement</legend>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this))">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="f" value="" />
<input type="hidden" name="subject" value="" />
<font class="colorform">Nom du personnage :</font><br />
<input name="Perso" type="text" /><br />

<font class="colorform">Forum de :</font><br />
<select name="jeu" id="jeu" onchange="jeu_onchange(this[this.selectedIndex].value)">
<option value="" selected="selected">Sélectionnez un jeu</option>
<option value="35">TERA</option>
<option value="26">GUILD WARS</option>
<option value="24">BLADE + SOUL </option>
<option value="3">AION</option>
<option value="23">SWTOR</option>
</select><br />

Race :<br />
<select name="Race"></select><br />

Classe :<br />
<select name="Classe"></select><br />

<font class="colorform">Métiers :</font><br />
<textarea rows="3" name="Metiers" placeholder="Tapez ici vos métiers avec le lvl"></textarea><br />
<font class="colorform">Presentation Irl :</font><br />
<textarea rows="3" name="irl"></textarea><br />
<font class="colorform">Disponibilités :</font><br />
<textarea rows="3" name="Disponible"></textarea><br />

<input value="Envoyer" type="submit" name="post" />
</form></fieldset>

J'ai testé sur le mien, ça marche à merveille.

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par Manumanu le Ven 14 Sep 2012 - 14:43

D'accord, une classe js pour envoyer un post... Pas bête. Du coup, tu as le code nécessaire non ?

C'est juste pour la mise en forme que tu veux un coup de main donc ?

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Ven 14 Sep 2012 - 14:47

C'est un petit peu ça, seulement les propriétées doivent être changé car sur ce que j'ai donné c'est sous forme de menu déroulant.

Moi je cherche a ne faire que des "check"

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Ven 14 Sep 2012 - 17:45

S'il quelqu'un passe par là, je suis tombé sur ceci sur le site du zéro:

Code:
<label><input type="radio" name="check" value="1" /> Case n°1</label><br />
<label><input type="radio" name="check" value="2" /> Case n°2</label><br />
<label><input type="radio" name="check" value="3" /> Case n°3</label><br />
<label><input type="radio" name="check" value="4" /> Case n°4</label>
<br /><br />
<input type="button" value="Afficher la case cochée" onclick="check();" />

<script>
  function check() {
      var inputs = document.getElementsByTagName('input'),
          inputsLength = inputs.length;
   
      for (var i = 0 ; i < inputsLength ; i++) {
          if (inputs[i].type == 'radio' && inputs[i].checked) {
              alert('La case cochée est la n°'+ inputs[i].value);
          }
      }
  }
</script>

Seulement il renvoi 'la case coché est la n°' via une "alert", comment le renvoyer sur un sous-forum 'f1'?

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Sam 15 Sep 2012 - 12:42

Un petit up surtout pour ma dernière question qui m'empêche de continuer mon code. S'il vous plaît Smile

Cordialement

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Dim 16 Sep 2012 - 18:43

Bonsoir,

Voilà, j'ai réussi à obtenir un résultat de test

Code:
<script type="text/javascript">
function envoiMessage(form)
{
  // Créer un message à partir des informations fournies
  var txt_message = "[b]Nom :[/b] " + form.nom.value + '\n'

// Dans le cas des checkboxs, on va les parcourir pour prendre la valeur de celles qui sont cochées:
              for(var i = 0; i < form.race.length; i++)
              {
                  if(form.race[i].checked == true) { txt_message = txt_message + '[*]' + form.race[i].value + '\n'; }
              }
</script>


<h3>Formulaire de présentation</h3>
<form action="http://behemoth.fr-bb.com/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="1" /> <!--  ID du forum dans lequel le message sera posté-->
<label for="titre">Titre du sujet :</label> <input type="text" name="subject" id="titre" value="" size="45" maxlength="60" />

<label for="nom">Nom: </label><input type="text" size="30" name="nom" id="nom" />

 <input type="checkbox" name="race" id="norn" value="norn" /><label for="norn"><img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_no10.gif" />Norn</label>
 
<input type="checkbox" name="race" id="sylvaris" value="sylvaris" /><label for="sylvaris"><img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_sy10.gif" />Sylvaris</label>
 
<input type="checkbox" name="race" id="asura" value="asura" /><label for="asura"><img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_as10.gif" />Asura</label>

<input type="checkbox" name="race" id="humain" value="humain" /><label for="humain"><img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_hu10.gif" />Humain</label>

<input type="checkbox" name="race" id="charr" value="charr" /><label for="charr"><img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_ch10.gif" />Charr</label>

<input type="submit" name="post" value="Envoyer" />
</form>

Cependant, plusieurs problème ce pose:

1) Les choix "checkbox" devrai être en dessous du champs "nom"

2) Je ne veux pas mettre de titre du sujet, le titre devrai être par defaut

3) Comment introduire un d'autres "checkbox" indépendant des races?

Cordialement,

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Dim 16 Sep 2012 - 19:59

Je suis vraiment idiot à ne pas chercher plus loin que mon bout du nez

Bref j'ai réussi à avoir ceci

Code:
<script type="text/javascript">
function envoiMessage(form)
{
  // Créer un message à partir des informations fournies
  var txt_message = "[b]Nom :[/b] " + form.nom.value + '\n'

// Dans le cas des checkboxs, on va les parcourir pour prendre la valeur de celles qui sont cochées:
              for(var i = 0; i < form.race.length; i++)
              {
                  if(form.race[i].checked == true) { txt_message = txt_message + '[*]' + form.race[i].value + '\n'; }
              }
              for(var i = 0; i < form.profession.length; i++)
              {
                  if(form.profession[i].checked == true) { txt_message = txt_message + '[*]' + form.profession[i].value + '\n'; }
              }
</script>

<h3>Formulaire de présentation</h3>
<form action="http://behemoth.fr-bb.com/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="1" /> <!--  ID du forum dans lequel le message sera posté-->


<label for="nom">Nom du personnage: </label><input type="text" size="30" name="nom" id="nom" /><br />

 <input type="checkbox" name="race" id="norn" value="norn" /><label for="norn">Norn<img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_no10.gif" /></label>
 
<input type="checkbox" name="race" id="sylvaris" value="sylvaris" /><label for="sylvaris">Sylvaris<img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_sy10.gif" /></label>
 
<input type="checkbox" name="race" id="asura" value="asura" /><label for="asura">Asura<img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_as10.gif" /></label>

<input type="checkbox" name="race" id="humain" value="humain" /><label for="humain">Humain<img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_hu10.gif" /></label>

<input type="checkbox" name="race" id="charr" value="charr" /><label for="charr">Charr<img src="http://i39.servimg.com/u/f39/17/79/02/34/gw2_ch10.gif" /></label>
<br />

<input type="checkbox" name="profession" id="gardien" value="gardien" /><label for="gardien">Gardien<img src="http://i39.servimg.com/u/f39/17/79/02/34/comgau18.png" /></label>
 
<input type="checkbox" name="profession" id="rodeur" value="rodeur" /><label for="rodeur">Rôdeur<img src="http://i39.servimg.com/u/f39/17/79/02/34/comgau19.png" /></label>
 
<input type="checkbox" name="profession" id="envouteur" value="envouteur" /><label for="envouteur">Envouteur<img src="http://i39.servimg.com/u/f39/17/79/02/34/comgau20.png" /></label>

<input type="checkbox" name="profession" id="guerrier" value="guerrier" /><label for="guerrier">Guerrier<img src="http://i39.servimg.com/u/f39/17/79/02/34/comgau21.png" /></label>

<input type="checkbox" name="profession" id="necro" value="necro" /><label for="necro">Necromancien<img src="http://i39.servimg.com/u/f39/17/79/02/34/comgau22.png" /></label>

<input type="checkbox" name="profession" id="elem" value="elem" /><label for="elem">Elementaliste<img src="http://i39.servimg.com/u/f39/17/79/02/34/comgau23.png" /></label>

<input type="checkbox" name="profession" id="inge" value="inge" /><label for="inge">Ingénieur<img src="http://i39.servimg.com/u/f39/17/79/02/34/comgau24.png" /></label>

<input type="checkbox" name="profession" id="voleur" value="voleur" /><label for="voleur"><size:"6" />Voleur<img src="http://i39.servimg.com/u/f39/17/79/02/34/comgau25.png" /></label>
<br />

<input type="submit" name="post" value="Envoyer" />
</form>

Mais cette fois çi je voudrai seulement savoir comment réduire la taille de mes texte (voleur, guerrier, gardien, etc...)

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire choix à cocher

Message par aloovi le Lun 17 Sep 2012 - 0:45

Je reprend sur un autre sujet en attendant sujet résolu

Aloovi

aloovi
**

Messages : 94
Inscrit(e) le : 14/09/2012

http://behemoth.fr-bb.com
aloovi a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum