Formulaire : JavaScript

[GenialJerome]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour, j'ai besoin que l'on m'aide à faire le JavaScript de mon formulaire car je suis qu'un débutant dans ce langage.

Le code HTML et CSS du formulaire:

Je voudrais que lorsque l'utilisateur clique un des deux boutons comme 1 ticket = 10 RP que ça affiche le formulaire correspondant qui se trouve en dessous de l'autre. S'il clique sur l'autre bouton, il affiche l'autre formulaire en dessous, cache et met à zéro l'autre formulaire. Lorsque le bouton "1 ticket = 10 RP" est sélectionné et qu'il clique sur le bouton "Acheter", il poste automatiquement dans un nouveau topic le message suivant : "Je voudrai X tickets pour un montant total de Y RP" puis dans un topic existant défini le nombre de message par rapport à la valeur du formulaire où il y a écrit . Lorsque le bouton "5 ticket = 40 RP" est sélectionné et qu'il clique sur le bouton "Acheter", il poste automatiquement dans un nouveau topic le message suivant : "Je voudrai C packs de 5 tickets pour un montant total de V RP" puis dans un topic existant défini le nombre de message par rapport à la valeur du formulaire où il y aura écrit "10 RP déduit" ou "40 RP déduit". Sachant que X est la valeur du formumaire, Y est X*10. C est la valeur du forumulaire correspondant / 2 et V est la valeur du formulaire/2 * 40. Si possible, de pouvoir afficher le prix en RP ainsi que l'utilisateur vois ses RP et si le prix est supérieur à ses RP, l'achat s'annule.

[GenialJerome]

UP

[Scoubifitz]

bonsoir,

Pratiquement tout est faisable , sauf la toute dernière partie :

ainsi que l'utilisateur vois ses RP et si le prix est supérieur à ses RP, l'achat s'annule.

... sauf s'il indique les RP en sa possession .

Une petite incohérence à ce niveau là :

Lorsque le bouton "1 ticket = 10 RP" est sélectionné

Sachant que X est la valeur du formumaire, Y est X*5

c'est 5 ou 10 RP ?

[GenialJerome]

C'est bien 1 ticket = 10 RP. Petite erreur de ma part

[GenialJerome]

[Scoubifitz]

Je ne sais pas si c'est exactement ce que vous voulez , mais on va tenter de s'en approcher :

Code:

<style type="text/css">
.enseigne{
width:400px;
margin:20px auto;
border:3px outset red;
font:italic small-caps bold 2em/140% "Lucida Grande",sans-serif;
border-radius:30px;
text-shadow:1px 1px 1px white;
background:darkred
}
#achat
{
margin:auto;
text-align:center
}
#tic,#pac,.acheter
{
display:inline-block;
border: outset;
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
text-align: center;
color: white;
width: 100px;
}
#tic
{
background-color: blue;
}
#pac
{
background-color: gray;
}
#redpoint{border:none;text-align:right;}
.acheter
{
background-color: green;
}
#ticket,#pack
{
display:none;
}
</style>
<script type="text/javascript">
function calcul() {
var total = 1;
var choix = "";
if(document.post.choix[0].checked == true)
{
for(i=0;i<document.post.opt1.length;++i)
if(document.post.opt1.options[i].selected == true)
total = Number(document.post.opt1.options[i].value)*10;
document.getElementById("quantite").innerHTML = "Ticket(s)";
document.getElementById("tic").style.backgroundColor = "blue";
document.getElementById("pac").style.backgroundColor = "gray";
}
else if(document.post.choix[1].checked == true)
{ for(i=0;i<document.post.opt1.length;++i)
if(document.post.opt1.options[i].selected == true)
total = Number(document.post.opt1.options[i].value)*40;
document.getElementById("quantite").innerHTML = "Pack(s)";
document.getElementById("tic").style.backgroundColor = "gray";
document.getElementById("pac").style.backgroundColor = "red";
}

// Affiche le total de toutes les cases cochees
document.post.redpoint.value = total;
}
function envoiMessage(form) {
// Créer un message à partir des informations fournies
var choix = "";
if(form.choix[0].checked == true)
choix = " tickets";
else if(form.choix[1].checked == true)
choix = " packs de 5 tickets";

var txt_message = "Bonjour,\n\n"
+ "J'aimerais [b]" + form.opt1.value + "[/b]" + choix + "\n"
+ " pour un montant total de [b]" + form.redpoint.value + "[b] RP\n";

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form action="/post" method="post" name="post" id="achat" 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 = post-it / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="4" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" value="Achat de tickets" />
<input type="hidden" name="opt_base" value="0">
<div class="enseigne">Redstoner's<br />Boutique</div>
<p>Choisissez l'option qui vous intéresse :</p>
<label for="ticket" id="tic"> Ticket</label>
<input name="choix" value="ticket" id="ticket" type="radio" onclick="calcul()" checked="checked" />
<input name="choix" value="pack" id="pack" type="radio" onclick="calcul()" />
<label for="pack" id="pac"> Pack</label><br /><br />
<select name="opt1" id="opt1" onclick="calcul()">
<option value="1" selected="selected">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select> <span id="quantite">Ticket(s)</span> =
<input type="text" name="redpoint" id="redpoint" value="10" size="1" readonly="readonly" /> RP <br /><br />
<input type="reset" value="Effacer" /><input type="submit" name="post" value="Acheter" class="acheter" /><br /><br />
<p>Vérifiez que vous avez assez de RedPoint's avant d'acheter .</p>
</form>

[GenialJerome]

J'aime bien le formulaire. J'ai fait quelque petites modifications et quelques corrections :

Code:

<style type="text/css">
.enseigne{
width:400px;
margin:20px auto;
border:3px outset red;
font:italic small-caps bold 2em/140% "Lucida Grande",sans-serif;
border-radius:30px;
text-shadow:1px 1px 1px white;
background:darkred
}
#achat
{
margin:auto;
text-align:center
}
#tic,#pac,.acheter
{
display:inline-block;
border: outset;
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
text-align: center;
color: white;
width: 100px;
font-size: large;
}
#tic
{
background-color: blue;
}
#pac
{
background-color: gray;
}
#redpoint{border:none;text-align:right;}
.acheter
{
background-color: green;
}
#ticket,#pack
{
display:none;
}
.phrase_début, #quantite, .taille_normal, #redpoint
{
font-size: small;
} 
</style>
<script type="text/javascript">
function calcul() {
var total = 1;
var choix = "";
if(document.post.choix[0].checked == true)
{
for(i=0;i<document.post.opt1.length;++i)
if(document.post.opt1.options[i].selected == true)
total = Number(document.post.opt1.options[i].value)*10;
document.getElementById("quantite").innerHTML = "Ticket(s)";
document.getElementById("tic").style.backgroundColor = "blue";
document.getElementById("pac").style.backgroundColor = "gray";
}
else if(document.post.choix[1].checked == true)
{ for(i=0;i<document.post.opt1.length;++i)
if(document.post.opt1.options[i].selected == true)
total = Number(document.post.opt1.options[i].value)*40;
document.getElementById("quantite").innerHTML = "Pack(s)";
document.getElementById("tic").style.backgroundColor = "gray";
document.getElementById("pac").style.backgroundColor = "red";
}
 
// Affiche le total de toutes les cases cochees
document.post.redpoint.value = total;
}
function envoiMessage(form) {
// Créer un message à partir des informations fournies
var choix = "";
if(form.choix[0].checked == true)
choix = " tickets";
else if(form.choix[1].checked == true)
choix = " packs de 5 tickets";
 
var txt_message = "Bonjour,\n"
+ "J'aimerais [b]" + form.opt1.value + "[/b]" + choix + " pour un montant total de [b]" + form.redpoint.value + "[/b] RP\n";
 
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form action="/post" method="post" name="post" id="achat" 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 = post-it / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="16" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" value="Achat de tickets" />
<input type="hidden" name="opt_base" value="0"><div class="enseigne">Redstoneur<br />Boutique</div>
<p class="phrase_début">Choisissez l'option qui vous intéresse :</p>
<label for="ticket" id="tic"> Ticket</label>
<input name="choix" value="ticket" id="ticket" type="radio" onclick="calcul()" checked="checked" />
<input name="choix" value="pack" id="pack" type="radio" onclick="calcul()" />
<label for="pack" id="pac"> Pack</label><br /><br />
<select name="opt1" id="opt1" onclick="calcul()">
<option value="1" selected="selected">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select> <span id="quantite">Ticket(s)</span><span class=taille_normal> =</span>
<input type="text" name="redpoint" id="redpoint" value="10" size="1" readonly="readonly" /><span class=taille_normal> RP</span> <br /><br />
<input type="submit" name="post" value="Acheter" class="acheter" /><br /><br />
<p>Vérifiez que vous avez assez de RedPoint's avant d'acheter.</p>
</form>

Il ne manques plus que deux choses : Dans un topic existant, le message "10 RP déduit" ou "40 RP déduit" selon le choix, dans un forum différents et donc dans un topic différent mis selon la valeur de opt1. Par exemple, je veux 4 pack de 5 tickets donc 160 RP. Lorsque je clique sur Acheter, le message "Bonjour,\n\n" + "J'aimerais " + form.opt1.value + "" + choix + "\n" + " pour un montant total de [b]" + form.redpoint.value + "[b] RP\n" est envoyé dans un nouveau topic et dans la catégorie approprié selon le choix (ticket ou pack) et le message "40 RP déduit" dans un topic existant et dans la même catégorie que le nouveau topic qui est répété le nombre de la valeur de opt1. Si tu n'as pas compris ce que je voulais dit le moi

[Scoubifitz]

J'avais parfaitement compris ...
Il n'est pas possible de faire un envoi multiple .

Il faudra envoyer le second message manuellement .

Par contre il est possible d'envoyer le premier message vers tel ou tel forum , suivant le choix du pack ou du ticket ...

en modifiant le script , et en vidant la valeur du forum :
tickets vers f=16,
packs vers f=15 ...

Code:

<style type="text/css">
.enseigne{
width:400px;
margin:20px auto;
border:3px outset red;
font:italic small-caps bold 2em/140% "Lucida Grande",sans-serif;
border-radius:30px;
text-shadow:1px 1px 1px white;
background:darkred
}
#achat
{
margin:auto;
text-align:center
}
#tic,#pac,.acheter
{
display:inline-block;
border: outset;
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
text-align: center;
color: white;
width: 100px;
font-size: large;
}
#tic
{
background-color: blue;
}
#pac
{
background-color: gray;
}
#redpoint{border:none;text-align:right;}
.acheter
{
background-color: green;
}
#ticket,#pack
{
display:none;
}
.phrase_début, #quantite, .taille_normal, #redpoint
{
font-size: small;
}
</style>
<script type="text/javascript">
function calcul() {
var total = 1;
var choix = "";
if(document.post.choix[0].checked == true)
{
for(i=0;i<document.post.opt1.length;++i)
if(document.post.opt1.options[i].selected == true)
total = Number(document.post.opt1.options[i].value)*10;
document.getElementById("quantite").innerHTML = "Ticket(s)";
document.getElementById("tic").style.backgroundColor = "blue";
document.getElementById("pac").style.backgroundColor = "gray";
}
else if(document.post.choix[1].checked == true)
{ for(i=0;i<document.post.opt1.length;++i)
if(document.post.opt1.options[i].selected == true)
total = Number(document.post.opt1.options[i].value)*40;
document.getElementById("quantite").innerHTML = "Pack(s)";
document.getElementById("tic").style.backgroundColor = "gray";
document.getElementById("pac").style.backgroundColor = "red";
}

// Affiche le total de toutes les cases cochees
document.post.redpoint.value = total;
}
function envoiMessage(form) {
// Créer un message à partir des informations fournies
var choix = "";
if(form.choix[0].checked == true)
{choix = " tickets";
form.f.value ="16";
}
else if(form.choix[1].checked == true)
{choix = " packs de 5 tickets";
form.f.value ="15";
}

var txt_message = "Bonjour,\n"
+ "J'aimerais [b]" + form.opt1.value + "[/b]" + choix + "\n"
+ " pour un montant total de [b]" + form.redpoint.value + "[/b] RP\n";

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form action="/post" method="post" name="post" id="achat" 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 = post-it / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" value="Achat de tickets" />
<input type="hidden" name="opt_base" value="0"><div class="enseigne">Redstoneur<br />Boutique</div>
<p class="phrase_début">Choisissez l'option qui vous intéresse :</p>
<label for="ticket" id="tic"> Ticket</label>
<input name="choix" value="ticket" id="ticket" type="radio" onclick="calcul()" checked="checked" />
<input name="choix" value="pack" id="pack" type="radio" onclick="calcul()" />
<label for="pack" id="pac"> Pack</label><br /><br />
<select name="opt1" id="opt1" onclick="calcul()">
<option value="1" selected="selected">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select> <span id="quantite">Ticket(s)</span><span class=taille_normal> =</span>
<input type="text" name="redpoint" id="redpoint" value="10" size="1" readonly="readonly" /><span class=taille_normal> RP</span> <br /><br />
<input type="submit" name="post" value="Acheter" class="acheter" /><br /><br />
<p>Vérifiez que vous avez assez de RedPoint's avant d'acheter.</p>
</form>

[GenialJerome]

Merci.
Pour le seconde message, on ne peut pas faire une boucle for qui envoie de 1 à la valeur de opt1 ?

[choopy]

jerome , ca sert a quoi ? c'est pour un forum RPG ?

[Scoubifitz]

questions :
- comment attribuez vous les RP ?

Pour le seconde message, on ne peut pas faire une boucle for qui envoie de 1 à la valeur de opt1 ?

- vous voulez déduire directement les RP ?

[GenialJerome]

Oui je voudrais les déduire mais comme je pense qu'on ne peut pas les faire directement, je veux le faire via les messages et la gestion de points des messages

[Scoubifitz]

Si les RP sont gérés par le système de points , je verrais ça plutôt comme ça :

- un forum pour un ticket (=5RP) .
En postant à partir du formulaire , on se fait retirer 5 points en postant un nouveau message
(voir gestions des points : 0 par message , -5 par sujet)

- un forum pour un pack (=40RP) .
En postant à partir du formulaire , on se fait retirer 40 points en postant un nouveau message
(voir gestions des points : 0 par message , -40 par sujet)

donc , enlever la liste d'options , et la remplacer par un seul choix : 1 ticket ou 1 pack .

En mettant une redirection du bouton "nouveau" de ces 2 forums vers le formulaire , il n'y aura pas de surprise au niveau du décompte de points .

Par contre , aucun moyen d'empêcher le décompte dans le négatif pour un membre qui veut acheter trop de tickets .

[GenialJerome]

Je déduirai manuellement si on ne peut pas. Merci.