Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mar 9 Avr 2013 - 11:38
coucou ,
suite à la demande de Sick concernant un formulaire simple sous forme de pop up .

Assurez vous d'avoir désactivé cette option dans le P.A:
Général/Forum/Sécurité/Configuration de la sécurité

Interdire les formulaires non officiels à poster des messages et messages privés sur le forum : cocher Non .
regardeplusbas



Toutes les explications sur le script seront données à la suite de ce tutoriel  hinhin .

Passons à la création de la page Web  hinhin

Modules/HTML&JAVASCRIPT/Gestion des pages HTML



Titre * :Mettre un titre explicite.
Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
Utiliser cette page en tant que page d'accueil ? NON

Copiez collez le code ci dessous en pensant à bien noter la lettre et le chiffre du forum concerné dans les parties suivantes:

Code:

<form method="post" action="/post?f=5&mode=newtopic"
name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" />

Code:
action="/post?f=5&

Et ici:
Code:
<input type="hidden" name="f" value="5" /> <!--  ID du forum dans lequel le message sera posté-->

Code:
name="f" value="5"


Toutes les class sont commentées afin de mieux se repérer et donner libre choix à votre
imagination les ami(e)s clin oeil .

Afficher le code HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="fr" xml:lang="fr"  >
<head>
<title>Présentation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<style type="text/css">
/*on donne une apparence à toute la page*/
body
{
background-color: #141414;/*on donne une couleur de fond*/
color:#20aec8;/*on donne une couleur par defaut*/
font-size:14px;/*on lui donne une taille par defaut*/
}
/* on donne une apparence au bouton de fermeture de la fenetre*/
#M14_fermeture
{
float:right;/*on place le bouton à droite*/
margin-right:60px;/*on deplace de 60px pour ne pas toucher la bordure droite*/
margin-top:-6px;
background-color:#800000;/*on donne une couleur de fond*/
color:fff;/*on donne une couleur*/
padding:5px;/*on donne un espace de 5px tout autour du texte*/
/*bordures arrondies navigateurs recents*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* on donne une apparence au text du bouton de fermeture de la fenetre*/
#M14_fermeture a
{
text-decoration:none;/*on supprime le soulignement*/
color:#fff;/*on donne une couleur*/

}
/*on donne une apparence au titre*/
.M14_menu
{
text-align:center;/*on centre le texte*/
font-size:18px;/*on lui donne une taille*/
}
/*on donne une apparence a la barre de separation du haut*/
hr.M14_haut
{
width:100%;/*la largeur de la barre*/
height: 100px; /*la hauteur de la barre*/
border-style: solid; /*on donne un style solid*/
border-color: #fff; /*on donne une couleur*/
border-width: 1px 0 0 0; /on affiche seulement la bordure haute*/
/*bordures hautes arrondies navigateurs recents*/
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
/*on donne une apparence a la barre de separation du bas*/
hr.M14_bas
{
width:100%;/*la largeur de la barre*/
height: 100px; /*la hauteur de la barre*/
border-style: solid; /*on donne un style solid*/
border-color: #fff; /*on donne une couleur*/
border-width: 0 0 1px 0;  /on affiche seulement la bordure basse*/
/*bordures basses arrondies navigateurs recents*/
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
/*on donne une apparence au boutons d envoi et reset du formulaire*/
#M14_validation input
{
margin-left:30px;/*on decale les boutons de 30 px de la gauche*/
cursor:pointer;/*on donne une apparence au curseur*/
font-weight:bold;/*caractere gras*/
color:#800000;/*on donne une couleur*/
background-color: #fffffff;/*on donne une couleur de fond*/
border:1px solid #20aec8; /*on donne une bordure de forme solid et une couleur*/
/*bordures arrondies navigateurs recents*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*on donne une apparence au champs*/
#M14_contenant input
{
position:absolute;/*on impose un emplacement défini*/
left:145px;/*on deplace le champs de 145px de a gauche*/
font-weight:bold;/*caractere gras*/
background-color: #ECAF35;
border:1px solid #20aec8;
/*bordures arrondies navigateurs recents*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*on donne une apparence au champs lors du clic*/
#M14_contenant input:focus
{
font-weight:bold;/*caractere gras*/
background-color: #ffffff;
/*bordures arrondies navigateurs recents*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

</style>
</head>

<body onunload="javascript:self.close();">

<div class="M14_menu">Menu de présentation</div><br/>
<hr class="M14_haut">
<script type="text/javascript">
function envoiMessage(form)
{
// Les informations qui seront reportées dans le sujet
var txt_message =
// Correspond  au bloc NOM
"Votre nom:" + form.NOM.value + '\n'
// Correspond  au bloc PRENOM
+ "Votre prénom:" + form.PRENOM.value + '\n'
// Correspond  au bloc AGE
+ "Votre âge:" + form.AGE.value +'\n'
// Correspond  au bloc LOCALISATION
+ "Votre localistation:" + form.LOCALISATION.value + '\n'
// Correspond  au bloc METIER
+ "Votre métier:" + form.METIER.value + '\n'
// Correspond  au bloc PASSIONS
+ "Vos passions:" + form.PASSIONS.value + '\n';

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form method="post" action="/post?f=5&mode=newtopic" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" />
<!--on depose un identifiant pour donner une apparence specifique de tout le contenu-->
<div id="M14_contenant">
<label for="NOM">Votre nom:</label>
<input type="text" name="NOM" id="NOM" tabindex="1"required>
</br></br>
<label for="PRENOM">Votre prénom:</label>
<input type="text" name="PRENOM" id="PRENOM" tabindex="2"required>
</br></br>
<label for="AGE">Votre âge:</label>
<input type="text" name="AGE" id="AGE" tabindex="3"required>
</br></br>
<label for="LOCALISATION">Votre localisation:</label>
<input type="text" name="LOCALISATION" id="LOCALISATION" tabindex="4"required="required" />
</br></br>
<label for="METIER:">Votre métier:</label>
<input type="text" name="METIER" id="METIER" tabindex="5"required></br></br>
<label for="PASSIONS:">Vos passions:</label>
<input type="text" name="PASSIONS" id="PASSIONS" tabindex="6"></br></br>

<!--liaison du formulaire au forum champs invisibles-->
<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 = post-it / 2 = annonce) -->
<input type="hidden" name="message" value="" />
<!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="5" /> <!--  ID du forum dans lequel le message sera posté-->
<!--Le titre du sujet-->
<label for="titre">Déposez votre Pseudo:</label>
<!--Le champs pour le titre du  sujet -->
<input type="text" name="subject" id="titre" value="" size="40" maxlength="60" required="required" placeholder="Votre Pseudo"/>
<!--fin de liaison-->
</div>
</br></br>
<!--Les boutons d envoi et reset-->
<!--on depose un identifiant pour donner une apparence specifique aux deux boutons-->
<div id="M14_validation">
<input type="submit" name="post" /> <input type="reset" />
</div>

</form>
<hr class="M14_bas">
<div id="M14_fermeture">
<A HREF="#" onClick="top.close()">Fermer</A>
</div>
</body>
</html>

Pensez à cliquer sur le bouton  

Repérez ensuite le lien de la nouvelle page créée puis insérez le dans ce code:



Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposez ceci:
Code:

function formpopup()
        {
        window.open('LE LIEN DE LA PAGE CREEE','popup',' addressbar=no,width=660,height=580,left=400,top=0');
        }
        $(function(){
          $('a[href="/post?f=5&mode=newtopic"]').attr('onClick','formpopup()').removeAttr('href').css('cursor','pointer');
        });
Pensez a cliquer sur le bouton  Valid


Changez aussi la lettre et le chiffre dans la deuxième partie du script


Le script ci dessus est paramétré pour la page HTML du tutoriel pour que la fenêtre pop up contienne toutes les informations.

Si vous ajoutez des champs il faudra alors jouer avec les valeurs suivantes:
Code:
width=660 et height=580


Cette pop up est pourvue d'un bouton pour fermer la fenêtre en bas à droite  hinhin .



Dernière édition par Milouze14 le Mer 2 Sep 2015 - 7:47, édité 5 fois





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Mar 9 Avr 2013 - 11:49
Compréhension du script :

je vais vous montrer qui est en relation entre le script est le html

Les commentaires sont présentés de cette façon dans le script:
Code:
//Commentaire



Code:

// Correspond  au bloc NOM
"Votre nom:" + form.NOM.value + '\n'

C'est le titre qui sera affiché dans le sujet:
Code:
"Votre nom:"

L'identifiant correspondant à la demande a noter entre form. et .value sans espace.
Code:
" + form.NOM.value +

Correspond à un saut de ligne pour chaque champs dans l'affichage du sujet.
Code:
'\n'


Sera en relation avec le code html ci-dessous.

On retrouve l'identifiant NOM dans la balise label puis dans le input name et id
Code:
<label for="NOM">Votre nom:</label>
<input type="text" name="NOM" id="NOM" tabindex="1"required>

Ceci est un champs obligatoire
Code:
required

Pour le rendre facultatif , c'est tout simple supprimez le moqueur
Code:
<label for="NOM">Votre nom:</label>
<input type="text" name="NOM" id="NOM" tabindex="1">

Si vous désirez déposez un autre champs , il faudra pratiquer comme ceci:

Je reprend tout le script:

Code:

<script type="text/javascript">
function envoiMessage(form)
{
// Les informations qui seront reportées dans le sujet
var txt_message =
// Correspond  au bloc NOM
"Votre nom:" + form.NOM.value + '\n'
// Correspond  au bloc PRENOM
+ "Votre prénom:" + form.PRENOM.value + '\n'
// Correspond  au bloc AGE
+ "Votre âge:" + form.AGE.value +'\n'
// Correspond  au bloc LOCALISATION
+ "Votre localistation:" + form.LOCALISATION.value + '\n'
// Correspond  au bloc METIER
+ "Votre métier:" + form.METIER.value + '\n'
// Correspond  au bloc PASSIONS
+ "Vos passions:" + form.PASSIONS.value + '\n';

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>

le début du script :
// Correspond au bloc NOM
"Votre nom:" + form.NOM.value + '\n'

puis on ajoute des éléments en ajoutant un +
Code:
// Correspond  au bloc PRENOM
+ "Votre prénom:" + form.PRENOM.value + '\n'

puis le on finit toujours par un point virgule
Code:

// Correspond  au bloc PASSIONS
+ "Vos passions:" + form.PASSIONS.value + '\n';

Si vous ajoutez un champs pour renseigner par exemple un navigateur , il faudra alors pratiquer comme suit:

Code:

<script type="text/javascript">
function envoiMessage(form)
{
// Les informations qui seront reportées dans le sujet
var txt_message =
// Correspond  au bloc NOM
"Votre nom:" + form.NOM.value + '\n'
// Correspond  au bloc PRENOM
+ "Votre prénom:" + form.PRENOM.value + '\n'
// Correspond  au bloc AGE
+ "Votre âge:" + form.AGE.value +'\n'
// Correspond  au bloc LOCALISATION
+ "Votre localistation:" + form.LOCALISATION.value + '\n'
// Correspond  au bloc METIER
+ "Votre métier:" + form.METIER.value + '\n'
// Correspond  au bloc PASSIONS
+ "Vos passions:" + form.PASSIONS.value + '\n'
// Correspond  au bloc NAVIGATEUR
+ "Votre Navigateur:" + form.NAVIGATEUR.value + '\n';

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>

Le point virgule se trouve maintenant après
Code:
+ "Votre Navigateur:" + form.NAVIGATEUR.value + '\n' ;

Le code HTML:
Code:

<label for="NAVIGATEUR">Votre navigateur:</label>
<input type="text" name="NAVIGATEUR" id="NAVIGATEUR" tabindex="7"required>

Pensez à modifier le tabindex ="chiffre" en augmentant la valeur à chaque ajout hinhin
Le précédent portait le chiffre 6 .


Voilà, c'est tout pour le moment clin oeil .





Fondateur des forums Milouze14

- Contact par MP -



Sick.l.Offrande


Membre

Sick.l.Offrande

Message posté: le Jeu 18 Juil 2013 - 23:00
Bonjour Milouze, 
Après avoir étudier ce petit tutoriel formidable, et après m'avoir expliquer comment ajouter des décoration au formulaires et au formulaires une fois envoyer donc au sujet, j'aurais besoin d'un petit rajout de scripts. Voila, je sais pas vraiment si cela est possible mais je vais tout de même tenter de te demander ^w^

Mon forum concerne un jeux de simulation d'élevage de chevaux virtuel (equideow.com) et dans ce jeux les membres peuvent jouer sur deux monde (Ouranos & Gaïa). Comme mon forum est destiné a les aider j'aimerais que dans le formulaire (qui sera placer pour leur demande d'aide) ceux-ci puissent cocher une case (Ouranos ou Gaïa) qui indiquera au début du titre entre crocher le monde selectionner.

Je voulait savoir si cela était possible et si tu pouvais me faire un scripts adapter à cela. 
Merci beaucoup Milouze, je te souhaite une exellente fin de semaine.
Tendrement, Offrande.

Milouze14


Fondateur

Milouze14

Message posté: le Ven 19 Juil 2013 - 6:15
coucou  ma tite Sick fr4  ,

merci de passer par l'entraide stp:
http://www.milouze14.com/f108-entre-aide

Merci de renseigner également dans ton nouveau sujet:
tu désires avoir sur l'intitulé des sujets soit :
Ouranos ou Gaïa ?






Fondateur des forums Milouze14

- Contact par MP -



Celuna


Membre

Celuna

Message posté: le Mer 25 Mai 2016 - 22:13
Bonsoir,

Merci Philippe pour ce magnifique partage.

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus