Ajout d'une mention dans un formulaire

**Liliana78** · 22/02/2016, 16h09

Bonjour à tous et à toutes !

Je ne sais pas si je suis dans la bonne rubrique. Si non, je vous prie de m'excuser.

Voilà, je suis correctrice de textes en français (thèses, mémoires, romans, etc.). Je corrige l'orthographe, la grammaire...

Je dispose d'un script qui permet à l'internaute de calculer le coût de sa correction en fonction de divers critères (nombre de mots à corriger, formule et statut) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Devis pour correction &ndash; Liliana78</title>
    <style>
        body {
            background-size: 5px 900px, 6px 6px;
            font-family: Verdana, Geneva, sans-serif;
            font-size: 14px;
            color: #000309;
            text-align: center;
            line-height: 24px;
        }
 
        #page {
            width: 1200px;
            margin: auto;
            padding: 20px;
            background: #d8d8d8; /* Old browsers */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #d8d8d8), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
            background: -moz-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* FF3.6+ */
            background: -webkit-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* IE10+ */
            background: linear-gradient(to bottom, #d8d8d8 1%, #ffffff 100%); /* W3C */
        }
 
        .prix {
            font-weight: bold;
            font-size: 200%;
            color: blue;
        }
 
        h1 {
            font-size: 0em;
            line-height: 1em;
            margin: 0;
            text-transform: uppercase;
        }
 
        fieldset {
            border: none;
            margin: 0 0 1ex;
            padding: 0;
        }
 
        .explications {
            border-left: solid thin #0042b0;
            padding-left: 1ex;
        }
 
        .explications ul {
            list-style: none;
            font-size: 14px;
            font-style: italic;
            padding: 0;
        }
 
        .explications li {
            margin: 1ex 0;
        }
 
        .explications h2 {
            font-style: italic;
            font-size: 2em;
            font-weight: bold;
            margin: 0 0 1em;
 
        }
 
        explications h3 {
            font-style: italic;
            font-size: 2em;
            margin: 0 0 1em;
        }
 
        .etape {
            font-weight: bold;
            text-transform: uppercase;
        }
 
        .etape::after {
            content: "\00A0: ";
        }
    </style>
</head>
<body>
 
<section id="page">
    <h1>Calculez le coût de votre correction</h1>
 
    <form id="testform">
        <fieldset>
            <p>
                <label for="nbchar" class="etape">Nombre de mots</label>
                <input id="nbchar" type="text" name="nbchar" value="0"/>
            </p>
 
            <div class="explications">
                <h2>Où trouver le nombre de mots ? </h2>
                <ul>
                    <li>Word 2007, 2010 et 2013 : En bas à gauche de la fenêtre du logiciel.
                    </li>
                    <li>Word 2003/OpenOffice : Cliquez sur <strong>Outils</strong>,
                        puis <strong>Statistiques.</strong> Repérez la ligne
                        <strong>"Mots".</strong>
                    </li>
                </ul>
            </div>
        </fieldset>
        <fieldset>
            <p>
                <strong class="etape">Formule</strong>
                <input id="forumle1" type="radio" name="formule" value="1" checked="checked"/>
                <label for="forumle1">Simple</label>
                <input id="formule2" type="radio" name="formule" value="2"/>
                <label for="formule2">Approfondie</label>
 
 
            </p>
 
            <p class="details">
                Voir <a href="formules/correction-reformulation">Tableau comparatif des formules de correction</a>
            </p>
 
            <p>
                <label class="etape" for="formjur">Statut</label>
                <select id="formjur" name="formjur">
                    <option value="0">Étudiant</option>
                    <option value="1">Particulier</option>
                    <option value="2">Professionnel</option>
                </select>
                <input type="submit" value="Calculer"/>
            </p>
        </fieldset>
    </form>
 
    <div id="resultat"></div>
    <div id="resultatSupplement"></div>
 
</section>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
function formatNumber(num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ")
}
function supplement(result) {
    var more = (result * 10) / 100;
    return Math.ceil(result + more);
}
$(function () {
    $("input:submit" ).click(
            function () {
                var calcul = 0;
                var coefReduction = 10 / 100;
                var supp;
                var nbMots = $("#nbchar" ).val().replace(/[^\d]+/g, "" );
                if ($("input:checked" ).val() == 1) {
                    supp = false;
                    if ($("#formjur" ).val() == 1) {
                        calcul = nbMots * 0.020;
                    } else if ($("#formjur" ).val() == 2) {
                        calcul = nbMots * 0.0237;
                    } else {
                        calcul = nbMots * 0.0178;
                    }
                } else {
                    supp = true;
                    if ($("#formjur" ).val() == 1) {
                        calcul = nbMots * 0.0346;
                    } else if ($("#formjur" ).val() == 2) {
                        calcul = nbMots * 0.0395;
                    } else {
                        calcul = nbMots * 0.0297;
                    }
                }
                var resultat = Math.ceil(calcul);
                var resultatMajore = resultat + (calcul * coefReduction);
                var resultatSupplement = supplement(resultat);
                var resultatSupplementMajore = Math.round(resultatSupplement + (resultatSupplement * coefReduction));
                $("#resultat" ).html("Tarif généralement appliqué : <span class=\"prix\">" + formatNumber(resultat) + " &euro; </span>/ Si correction en rouge :  <span class=\"prix\">" + formatNumber(Math.round(resultatMajore)) + " &euro; </span>" );
                return false;
            }
    );
});
// ]]></script>

Quand il clique sur le bouton "calculer", apparaît :

"Tarif généralement appliqué : ... euros" ; Si correction en rouge :... euros".

J'aimerais insérer une troisième ligne : "Si délai supérieur à 1 mois : ... euros" La réduction serait alors de 10 % par rapport au "Tarif généralement appliqué".

Je vous remercie infiniment de votre aide.

**NoSmoking** · 22/02/2016, 16h54

Bonjour,
j'en conclu que tu n'as pas compris ce que t'as fait __Qu0kk4__ dans cette discussion Ajout phrase formule.

Qu'est ce que tu ne comprends pas pour ajouter un élément dans ta page.

**Liliana78** · 22/02/2016, 17h19

Merci de ta réponse.

Faire une soustraction (prix moins important de 10 %) au lieu d'une addition.

**NoSmoking** · 22/02/2016, 22h11

Faire une soustraction ... au lieu d'une addition.

change le signe !!

**Liliana78** · 23/02/2016, 06h23

J'ai déjà essayé, cela ne marche pas. J'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#resultat" ).html("Tarif généralement appliqué : <span class=\"prix\">" + formatNumber(resultat) + " &euro; </span>/ Si correction en rouge :  <span class=\"prix\">" + formatNumber(Math.round(resultatMajore)) + " &euro; </span>" );
$('#resultatSupplement').html((supp) ? "Tarif économique (délai long) : <span class=\"prix\">" - formatNumber(resultatSupplement) + " &euro; </span>" : "");
                return false;

**SpaceFrog** · 23/02/2016, 08h32

Essayer de soustraire des chiffres et des lettres ...
C'est un concept à creuser !

**Liliana78** · 23/02/2016, 09h19

Oui, comme je n'y connais pas grand-chose, j'essaie de faire des tests.

J'ai également tenté de convertir la multiplication

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var more = (result * 10) / 100;

en division (/ au lieu de *), mais pareil.

C'est pour cette raison que je demandais de l'aide.

Merci.

**SpaceFrog** · 23/02/2016, 09h41

Tu confonds concaténation de texte (ou de code html) et opération sur des chiffres

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#resultatSupplement').html((supp) ? "Tarif économique (délai long) : <span class=\"prix\">" - formatNumber(resultatSupplement) + " &euro; </span>" : "");

là le html() indique que tu mets du code html dans la balise avec l'id resultatSupplement

donc clairement le - n'a aucun sens à cet endroit là ...

**Liliana78** · 23/02/2016, 09h44

C'est un peu du chinois pour moi

, mais merci quand même de ta réponse. Je sais au moins qu'il ne faut pas mettre de soustraction à cet endroit.

Et pour la division au lieu de la multiplication, est-ce normal aussi que ça ne fonctionne pas ?

Merci.

**SpaceFrog** · 23/02/2016, 09h49

Il existe un outil formidable poru developper en js ... la console ...

Tape F12 sur ton navigateur et tu verras apparaitre cet outil magique

Ensuite pour l'uitiliser il existe l'instruction console.log() ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var more = (result * 10) / 100;
console.log(more);

Ce qui te permet de visualiser le résultat ...

**Liliana78** · 23/02/2016, 10h24

Alors, voici ce qui est écrit : Failed to load resource: the server responded with a status of 404 (CatÃ©gorie introuvable)

**SpaceFrog** · 23/02/2016, 10h27

404 => la page n'existe pas

**Liliana78** · 23/02/2016, 10h33

Oui, c'est ce que j'ai cru comprendre. Bon, eh bien tant pis, je pense que mes faibles connaissances en informatique sont insuffisantes pour effectuer cette soustraction.

En tout cas, merci de ton aide et de ta patience, ainsi qu'aux autres forumeurs.

**SpaceFrog** · 23/02/2016, 10h41

Partons d'un fiddle ...

https://fiddle.jshell.net/ft0h6tz2/

Dis nous ce que tu cherches a faire ...

**Liliana78** · 23/02/2016, 10h41

J'ai réussi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function supplement(result) {
    var more = (result * 10) / 100; 
    return Math.ceil(result - more);

Enfin, je crois , car ça s'affiche correctement. Le "-" était donc bien à placer là ?

Edit : ça marche que pour la seconde formule "correction approfondie" et pas pour la première "correction simple".

**NoSmoking** · 23/02/2016, 10h43

Envoyé par NoSmoking

change le signe !!

j’entendais bien sûr sur une opération avec des nombres.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// les valeurs en jeu
var valeur_1 = 350.12;
var valeur_2 = 11.23;
// calcul de la somme
var somme = valeur_1 + valeur_2;
// récupération élément pour affichage
var oSpan = document.getElementById('id_span');
///affichage du résultat dans un élément de la page
oSpan.innerHTML = somme;

**Liliana78** · 23/02/2016, 10h46

Mon "système" ne marche que pour la seconde formule "correction approfondie" et non pour la première "correction simple".

**Liliana78** · 23/02/2016, 11h18

Alors voilà : https://fiddle.jshell.net/ft0h6tz2/#...rjs=fryFaS8NjL

Ca ne marche que pour la première formule.

Ajout d'une mention dans un formulaire

JavaScript

Discussions similaires

Partager

Partager