Faire apparaître une image dans un formulaire à partir du champs pseudo (URL)

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

En cours Faire apparaître une image dans un formulaire à partir du champs pseudo (URL)

Message par Papy Roosevelt le Jeu 12 Oct 2017 - 14:08

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.Habbonu.org/

Description du problème


Lien du formulaire : http://www.habbonu.org/h32-formulaire-de-base
Bonjour, y'aurait-il une âme charitable connaissant le codage en HTML/Javascript, pour m’éclaircir sur ce problème de formulaire.

J'ai crée un formulaire de recrutement qui fonctionne parfaitement, j'aimerais juste pouvoir intégrer dans ce formulaire une image avatar qui se met automatiquement, en prenant en compte le pseudo Habbo du compte, que l'utilisateur aura informé dans le formulaire.

(Habbo = un jeu, un monde virtuel)

Je m'explique..., le premier champs de mon formulaire, c'est " Pseudo Habbo "

Quand on marque le pseudo, j'aimerais que cela génère automatiquement un avatar image juste en dessous de pseudo.

Voici le lien de l'image : https://www.habbo.fr/habbo-imaging/avatarimage?user=PSEUDOHABBO

Là où figure "PSEUDOHABBO" sur l'URL, quand on y met notre pseudo, cela créer automatiquement une image grâce à ce lien, ceci fonctionne parfaitement, mais j'aimerais pouvoir justement l'intégrer dans ce formulaire.

Voici le script du formulaire en question :

Code:
<script type="text/javascript">
function envoiMessage(form) {
// Créer un message à partir des informations fournies
  var txt_message = "[u][b]Pseudo Habbo :[/b][/u] " + form.pseudo.value + '\n\n'
    + "[u][b]Nom et Prénom RPG :[/b][/u] " + form.nomrpg.value + '\n\n'
    + "[u][b]Age RPG :[/b][/u] " + form.agerpg.value + '\n\n'
    + "[u][b]Age IRL :[/b][/u] " + form.ageirl.value + '\n\n'
    + "[u][b]Ancien compte :[/b][/u] " + form.excompte.value + '\n\n'
    + "[u][b]Parcours Militaire/Police :[/b][/u] " + '\n' + form.parcoursj.value + '\n\n'
    + "[u][b]Parcours Mafieux :[/b][/u] " + '\n' + form.parcoursm.value + '\n\n'
    + "[u][b]Parcours Civil :[/b][/u] " + '\n' + form.parcoursc.value + '\n\n'
    + "[u][b]Temps de Connexion :[/b][/u] " + '\n' + form.temps.value + '\n\n'
    + "[u][b]Motivation :[/b][/u] " + '\n' + form.objectif.value + '\n\n'
    + "[u][b]Votre activité :[/b][/u] " + '\n' + form.activity.value + '\n\n';
  // Insère le texte construit dans le champ caché "message" du formulaire
  form.message.value = txt_message;
  // Créer un titre de sujet dynamiquement (Présentation + pseudo) :
  form.subject.value = " " + "[Présentation] " + form.nom.value + "";
}
</script>  <br />
<div style="width: 80%;margin: auto;">
    
   <table style="padding: 0px; background-color: rgb(249, 243, 192); border-style: solid; border-width: 27px; border-image-source: url('http://i86.servimg.com/u/f86/19/41/87/73/cadre10.png');
        border-image-slice: 27 fill; border-image-width: initial; border-image-outset: initial; border-image-repeat: repeat; width: 50%;" align="center" border="10" cellpadding="0" cellspacing="15">
         
      <tbody>
              
         <tr style="border: 0px;">
                   
            <td style="border: 0px;">
                        
               <center>
                              <img src="https://i62.servimg.com/u/f62/17/70/94/08/mini_l10.png" /><br />                                      <strong>FORMULAIRE DE RECRUTEMENT</strong>                                                       
               </center>
                        
               <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
                              <input name="lt" value="0" type="hidden" />            <input name="mode" value="newtopic" type="hidden" />            <input name="topictype" value="0" checked="checked" type="hidden" />            <input name="message" value="" type="hidden" />            <input name="subject" value="" type="hidden" />            <input name="f" value="92" type="hidden" />            <img src="https://i58.servimg.com/u/f58/14/11/57/63/icon_m10.gif" />            <label for="pseudo"><strong> Pseudo Habbo:</strong></label><br />            <input name="nom" id="pseudo" value=" " size="50" maxlength="100" type="text" /><br /><br />            <img src="https://i58.servimg.com/u/f58/14/11/57/63/rp_ico10.png" />            <label for="nomrpg"><strong> Nom et Prénom RPG :</strong></label><br />            <input name="nomrpg" id="nomrpg" value=" " size="50" maxlength="100" type="text" /><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/settin10.png" />            <label for="agerpg"><strong> Age RPG :</strong></label><br />            <input name="agerpg" id="agerpg" value=" " size="10" maxlength="100" type="text" /><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/gyteau12.png" />            <label for="ageirl"><strong> Age IRL :</strong></label><br />            <input name="ageirl" id="ageirl" value=" " size="10" maxlength="100" type="text" /><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/parcou10.png" />            <label for="excompte"><strong> Ancien compte :</strong></label><br />            <textarea placeholder="Date : Pseudo du compte (Motif de l'arrêt de l'utilisation ; Banni, Hack..)" name="excompte" id="excompte" rows="3" cols="70"></textarea><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/i_icon10.gif" />            <label for="parcoursj"><strong> Parcours Militaire/Police :</strong></label><br />            <textarea placeholder="Date : Nom de l'organisation (Poste occupé)" name="parcoursj" id="parcoursj" rows="4" cols="70"></textarea><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/icon_r10.png" />            <label for="parcoursm"><strong> Parcours Mafieux :</strong></label><br />            <textarea placeholder="Date : Nom de l'organisation (Poste occupé)" name="parcoursm" id="parcoursm" rows="4" cols="70"></textarea><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/menu_a10.png" />            <label for="parcoursc"><strong> Parcours Civil :</strong></label><br />            <textarea placeholder="Date : Nom de l'organisation (Poste occupé)" name="parcoursc" id="parcoursc" rows="4" cols="70"></textarea><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/bzmqer10.gif" />            <label for="temps"><strong> Temps de Connexion ? :</strong></label><br />            <select id="temps" name="temps">
              <option value="Plus de 2h par Jour">Plus de 2h par Jour</option>
              <option value="1h par Jour">1h par Jour</option>
              <option value="1h tout les 3 Jours">1h tout les 3 Jours</option>
              <option value="1h tout les 7jours">1h tout les 7 Jours</option>
            </select><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/commen10.png" />            <label for="objectif"><strong> Votre objectif dans l'ONU ? :</strong></label><br />            <textarea name="objectif" id="objectif" rows="4" cols="70"></textarea><br /><br />            <img src="https://i62.servimg.com/u/f62/17/70/94/08/justic11.png" />            <label for="activity"><strong> Votre activité favorite ? :</strong></label><br />            <select name="activity" id="activity">
              <option value="Intervention Saccage (Infiltration/Corruption)">Intervention Saccage (Infiltration/Corruption)</option>
              <option value="Intervention Raid (Affrontement/Arrestation)">Intervention Raid (Affrontement/Arrestation)</option>
              <option value="Les deux : Intervention Saccage et Raid">Les deux : Intervention Saccage et Raid</option>
              <option value="Gestion de Business">Gestion de Business</option>
            </select>  <br /><br />                               
                  <center>
                                   <strong><em>Un Sous-Officier/Officier du Corps Armée validera votre candidature dans les plus brefs délais.</em></strong>                                                         
                  </center>
                             
                  <center>
                                   <input name="post" value="Valider ma candidature" type="submit" />                                                         
                  </center>
                           
               </form>
                      
            </td>
                 
         </tr>
            
      </tbody>
       
   </table>
     <br />
</div>

Merci énormément du temps que vous consacrerez à mon problème.
Cordialement Papy Roosevelt.
avatar

Papy Roosevelt
*

Masculin
Messages : 37
Inscrit(e) le : 03/07/2015

http://www.Habbonu.org/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

En cours Re: Faire apparaître une image dans un formulaire à partir du champs pseudo (URL)

Message par Walt le Dim 15 Oct 2017 - 0:22

Bonsoir,

Je n'ai pas saisi ce que vous vouliez faire de l'image une fois le lien généré ? L'afficher ou l'insérer au formulaire ?
En somme, il vous faut vérifier lorsque le contenu du champ est modifié et utiliser son contenu pour compléter l'adresse.

Par exemple, ceci :
Code:
$('#pseudo').change(function() {
  var habbavatar = 'https://www.habbo.fr/habbo-imaging/avatarimage?user=' + $(this).val();
  alert(habbavatar);
});

affichera une alerte contenant l'adresse complète (avec le pseudo) après chaque modification du champ "pseudo".

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3432
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

En cours Re: Faire apparaître une image dans un formulaire à partir du champs pseudo (URL)

Message par Papy Roosevelt le Dim 15 Oct 2017 - 17:23

Bonjour, merci pour votre soutient.

Enfaîte j'aimerais faire ceci :

Avec l'avatar Habbo, le titre en haut " PRESENTATION RP " en image et l'image du logo de l'ONU en dessous, les réponses des champs en blanc et le tout sous un fond gris, comme sur la capture d'écran.






Cordialement
Papy Roosevelt.
avatar

Papy Roosevelt
*

Masculin
Messages : 37
Inscrit(e) le : 03/07/2015

http://www.Habbonu.org/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

En cours Re: Faire apparaître une image dans un formulaire à partir du champs pseudo (URL)

Message par Papy Roosevelt le Mar 17 Oct 2017 - 16:56

Up
avatar

Papy Roosevelt
*

Masculin
Messages : 37
Inscrit(e) le : 03/07/2015

http://www.Habbonu.org/
Papy Roosevelt 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