Formulaire : JavaScript

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

Résolu Formulaire : JavaScript

Message par GenialJerome le Ven 5 Juin 2015 - 22:18

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:

Code:

<form id="achat_ticket">
    <fieldset>
         <input class="un_ticket" type="button" id="un_ticket" name="un_ticket" value="1 ticket = 10 RP"/>
         <input class="cinq_tickets" type="button" id="cinq_tickets" name="cinq_tickets" value="5 ticket = 40 RP"/><br/>
   <input class="nombre_un_ticket" type="number" id="nombre_un_ticket" name="nombre_un_ticket" value="0" min="0" max="10"/>
   <input class="nombre_cinq_tickets" type="number" id="nombre_cinq_tickets" name="nombre_cinq_tickets" value="0" min="0" max="10" step="5"/><br/>
    </fieldset>
    <input class="acheter" type="button" value="Acheter"/>
 
    <script src="lecodeJS"></script>
</form>
Code:
.un_ticket, .cinq_tickets
{
  border: outset;
  font-size: large;
  text-align: center;
  color: white;
  position: relative;
  left: 36%;
}

.un_ticket
{
  background-color: blue;
}

.cinq_tickets
{
  background-color: red;
}

.nombre_un_ticket, .nombre_cinq_tickets
{
  margin-top: 5px;
  font-size:large;
  text-align: center;
  position: relative;
    left: 40%;
}
.nombre_un_ticket
{
  padding-left: 20px;
  padding-right: 20px;
}

.nombre_cinq_tickets
{
  padding-left: 25px;
  padding-right: 25px;
}

.acheter
{
  margin-top: 5px;
  margin-bottom: 5px;
  border: outsert;
  background-color: green;
  font-size: large
  text-align: center;
  color: white;
  position: relative;
    left:45%;
}

.un_ticket:active, .cinq_tickets:active, .acheter:active
{
  border: inset;
}
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.


Dernière édition par GenialJerome le Mar 9 Juin 2015 - 23:42, édité 2 fois

GenialJerome
**

Masculin
Messages : 82
Inscrit(e) le : 21/05/2015

http://redstoneur.pro-forum.fr
GenialJerome a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par GenialJerome le Sam 6 Juin 2015 - 23:52

UP

GenialJerome
**

Masculin
Messages : 82
Inscrit(e) le : 21/05/2015

http://redstoneur.pro-forum.fr
GenialJerome a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par Scoubifitz le Dim 7 Juin 2015 - 19:44

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 ?

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par GenialJerome le Dim 7 Juin 2015 - 20:06

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

GenialJerome
**

Masculin
Messages : 82
Inscrit(e) le : 21/05/2015

http://redstoneur.pro-forum.fr
GenialJerome a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par GenialJerome le Lun 8 Juin 2015 - 20:57


GenialJerome
**

Masculin
Messages : 82
Inscrit(e) le : 21/05/2015

http://redstoneur.pro-forum.fr
GenialJerome a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par Scoubifitz le Lun 8 Juin 2015 - 22:32

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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par GenialJerome le Mar 9 Juin 2015 - 17:43

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

GenialJerome
**

Masculin
Messages : 82
Inscrit(e) le : 21/05/2015

http://redstoneur.pro-forum.fr
GenialJerome a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Formulaire : JavaScript

Message par Scoubifitz le Mar 9 Juin 2015 - 18:03

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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par GenialJerome le Mar 9 Juin 2015 - 19:27

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

GenialJerome
**

Masculin
Messages : 82
Inscrit(e) le : 21/05/2015

http://redstoneur.pro-forum.fr
GenialJerome a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par choopy le Mar 9 Juin 2015 - 19:31

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

choopy
****

Masculin
Messages : 427
Inscrit(e) le : 09/03/2009

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

Résolu Re: Formulaire : JavaScript

Message par Scoubifitz le Mar 9 Juin 2015 - 20:30

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 ?

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par GenialJerome le Mar 9 Juin 2015 - 22:10

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

GenialJerome
**

Masculin
Messages : 82
Inscrit(e) le : 21/05/2015

http://redstoneur.pro-forum.fr
GenialJerome a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par Scoubifitz le Mar 9 Juin 2015 - 22:52

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 .

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire : JavaScript

Message par GenialJerome le Mar 9 Juin 2015 - 23:40

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

GenialJerome
**

Masculin
Messages : 82
Inscrit(e) le : 21/05/2015

http://redstoneur.pro-forum.fr
GenialJerome 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