Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Changement de méthode Javascript...je ne sais pas faire

Changement de méthode Javascript...je ne sais pas faire

6 réponses
Avatar
Sam Lion
Bonsoir,

Mon problème est simple, mais pas sa solution pour moi qui ne suis pas
spécialiste javascript.

Le principe : Dans un formulaire HTML, une personne saisie un nom d'article,
un montant TTC dans un champ, la TVA dans l'autre et obtient par le
javascript le HT (hors taxes) dans un 3ème champ, grâce à un javascript tout
bête.

On a donc sur une page une ligne de formulaire unique :

Article | Montant ht | Tx_TVA | TVA

Jusque là tout va bien et cela fonctionne très bien (voir codes sources
ci-dessous). Je définie un ID pour chaque champ et je travaille avec

Mais on me demande maintenant un formulaire contenant plusieurs lignes, et
devant fonctionner sur le même système :

Article1 | Montant ht | Tx_TVA | TVA
Article2 | Montant ht | Tx_TVA | TVA
Article3 | Montant ht | Tx_TVA | TVA

Je n'arrive pas à adapter mon code source pour cela. Je ne peux plus passer
par un l'ID du champ (il y aurait plusieurs fois le même). Je vais bien
changer mes balises name (name="article[]") pour traiter le formulaire après
le submit, mais en passant par le name ou par "this", je n'arrive pas à
trouver le truc !

Quelqu'un pourrait-t-il m'aider ?

Merci d'avance !!

Sam

//// code javascript tva

function calc_ht_tva()
{

var TTC = document.getElementById("TTC").value;
var TVA = document.getElementById("TVA").value;
TTC= parseFloat(TTC);
TVA= parseFloat(TVA);

// on s'occupe du HT

var HT=TTC-TVA
var HT_ARRONDI=Math.round(HT*100) / 100;

// Je renvoie une fois le HT dans le paragraphe (pour qu'il soit visible
mais non modifiable) et une fois en input hidden pour le traitement

document.getElementById("HT").innerHTML='<p>'+HT_ARRONDI+'</p>';
document.getElementById("montant_ht").value=HT_ARRONDI;
}

/// code html

<form name="form_tva" action="" method="post">
<input type="text" name="article" size="10" autocomplete="off" id="ARTICLE"
onKeyUp="calc_ht_tva('')" />
<input type="text" name="achat_montant_ttc" size="10" autocomplete="off"
id="TTC" onKeyUp="calc_ht_tva('')" />
<input type="text" name="achat_montant_tva" size="10" autocomplete="off"
id="TVA" onKeyUp="calc_ht_tva('')" />
<div id="HT"><p>0</p></div>
<input type="hidden" name="montant_ht" id="montant_ht" value="" />
</td>
[...]
</form>
Signaler un problème avec ce contenu

6 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
Le 4/1/10 6:28 PM, Sam Lion a écrit :
Bonsoir,

Mon problème est simple, mais pas sa solution pour moi qui ne suis pas
spécialiste javascript.

Le principe : Dans un formulaire HTML, une personne saisie un nom
d'article, un montant TTC dans un champ, la TVA dans l'autre et obtient
par le javascript le HT (hors taxes) dans un 3ème champ, grâce à un
javascript tout bête.



Ça m'a l'air bien laborieux : devoir "saisir" (entrer) le taux de TVA
Je ne voudrais pas être celui qui aura à compléter le formulaire de x lignes

moi j'ussions proposé la tva par un select ou une série de radio-boutons
le taux le + souvent utilisé étant pré-sélectionné
(il y a aussi la méthode comptable : un code de tva 1, 2, 3, 4, 5)

On a donc sur une page une ligne de formulaire unique :

Article | Montant ht | Tx_TVA | TVA

Jusque là tout va bien et cela fonctionne très bien (voir codes sources
ci-dessous). Je définie un ID pour chaque champ et je travaille avec

Mais on me demande maintenant un formulaire contenant plusieurs lignes,
et devant fonctionner sur le même système :



<p onkeyup="calcul(this)">
<input name="article[]">
<input name="ht[]">
<input name="tva[]">
<span></span><input type="hidden" name="ttc[]">
</p>
<p onkeyup="calcul(this)">
<input name="article[]">
<input name="ht[]">
<input name="tva[]">
<span></span><input type="hidden" name="ttc[]">
</p>

<script type="text/javascript">
function calcul(quoi) {
var px = quoi.getElementsByTagName('INPUT');
var ttc = quoi.getElementsByTagName('SPAN')[0];
var v = function(x) { return x.value.replace(',','.')*1; }
ttc.innerHTML = Math.round(v(px[1])*(100+v(px[2])))/100;
ttc.innerHTML = px[3].value = ttc.innerHTML.replace('.',',');
}
window.onload = function() {
var c = document.getElementsByTagName('INPUT'), n = c.length;
while(n--) c[n].autocomplete = 'off';
}
</script>


Article1 | Montant ht | Tx_TVA | TVA
Article2 | Montant ht | Tx_TVA | TVA
Article3 | Montant ht | Tx_TVA | TVA

Je n'arrive pas à adapter mon code source pour cela. Je ne peux plus
passer par un l'ID du champ (il y aurait plusieurs fois le même).



on va donc passer par les tags (les balises),
par la collection d'inputs de la ligne

on profite des calculs pour gérer le séparateur 'point' en JS
et 'virgule' en français

la fonction v(x) retourne sous forme de nombre le value du champs x
dont l'éventuelle ',' a été changée en '.'

--
sm
Avatar
Yves Le Dain
Merci beaucoup ! il fallait penser à placer le OnKeyUp sur une balise
<p>
Sympa d'avoir passé du temps à améliorer le code.

J'ai essayé d'ajouter le select pour la TVA comme le disait votre
message (d'ailleurs j'ai bien un select sur mon ancienne
version :-) ), et comme je place un input par colonne dans un tableau,
j'ai modifié le code pour placer le OnKeyUp sur la balise <tr>

Voir code ci-dessous

Mais voici mon nouveau problème : j'ai donc ajouté un "onchange" pour
gérer quand on modifie le select, mais ce onchange dans le <tr> ne
réagit pas ??!! (il réagissait dans mon ancienne version, placé
directement sans le select)

Encore lié à mon incompétence en javascript ?

Sam

---

<table>
<tr onkeyup="calcul(this)" onchange="calcul(this)">
<td>
<input name="article[]">
</td>
<td>
<input name="ht[]">
</td>
<td>
<input name="tva[]">
</td>
<td>
<p><select name="tva_default[]" >
<option value="0.196" selected="selected">19.6</option>
<option value="0.085">8.5</option>
<option value="0.055">5.5</option>
<option value="0">0</option>
<option value="0">Autre</option>
</select>%</p>
</td>
<td>
<span></span><input type="hidden" name="ttc[]">
</td>
</tr>
<tr onkeyup="calcul(this)" onchange="calcul(this)">
<td>
<input name="article[]">
</td>
<td>
<input name="ht[]">
</td>
<td>
<input name="tva[]">
</td>
</td>
<td>
<p><select name="tva_default[]" >>
<option value="0.196" selected="selected">19.6</option>
<option value="0.085">8.5</option>
<option value="0.055">5.5</option>
<option value="0">0</option>
<option value="0">Autre</option>
</select>%</p>
</td>
<td>
<span></span><input type="hidden" name="ttc[]">
</td>
</tr>
</table>
Avatar
SAM
Le 4/2/10 12:44 PM, Yves Le Dain a écrit :
Merci beaucoup ! il fallait penser à placer le OnKeyUp sur une balise
<p>
Sympa d'avoir passé du temps à améliorer le code.

J'ai essayé d'ajouter le select pour la TVA comme le disait votre
message (d'ailleurs j'ai bien un select sur mon ancienne
version :-) ), et comme je place un input par colonne dans un tableau,
j'ai modifié le code pour placer le OnKeyUp sur la balise <tr>



Bon, avant de se battre avec le TR
voici, avzc un select :
<http://cjoint.com/?ecqmDWlClH>
une seule ligne (qui est un clone d'une autre cachée)
et on rajoute une nvelle ligne pour chaque autre article

Bon, avec les tables ça va être un peu + compliqué ... :-(

Mais voici mon nouveau problème : j'ai donc ajouté un "onchange" pour
gérer quand on modifie le select,



ça se place donc dans le select

mais ce onchange dans le <tr> ne réagit pas ??!!



Ie TR ne peu pas connaitre le onchange
ce n'est pas un élément de formulaire, ça n'a pas vocation à pouvoir changer

(il réagissait dans mon ancienne version, placé
directement sans le select)

Encore lié à mon incompétence en javascript ?



Les essais et erreurs y a qu'ça d'vrai ;-)

--
sm
Avatar
Yves Le Dain
A nouveau un grand merci !
La résolution de mon problème + une petite manipulation très efficace
du DOM, c'est super sympa...
Bon, j'essaye de me débrouiller comme un grand pour la suite.
Sam
Avatar
Mickaël Wolff
Sam Lion a écrit :
var TTC = document.getElementById("TTC").value;
var TVA = document.getElementById("TVA").value;
TTC= parseFloat(TTC);
TVA= parseFloat(TVA);

// on s'occupe du HT

var HT=TTC-TVA
var HT_ARRONDI=Math.round(HT*100) / 100;




N'oublie pas que le montant obtenu est indicatif. En effet, les float
ne sont pas des nombres décimaux exacts. Tes calculs peuvent être faux.
En JS, il est impossible d'en faire des calculs exacts. De plus, le
calcul de la TVA est soumise à des contraintes légales.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Avatar
Sam Lion
"Mickaël Wolff" a écrit dans le message de
groupe de discussion : 4bb959bd$0$4591$
Sam Lion a écrit :
var TTC = document.getElementById("TTC").value;
var TVA = document.getElementById("TVA").value;
TTC= parseFloat(TTC);
TVA= parseFloat(TVA);

// on s'occupe du HT

var HT=TTC-TVA
var HT_ARRONDI=Math.round(HT*100) / 100;




N'oublie pas que le montant obtenu est indicatif. En effet, les float ne
sont pas des nombres décimaux exacts. Tes calculs peuvent être faux. En
JS, il est impossible d'en faire des calculs exacts.



Merci pour cette précision je vais en tirer les conséquences...

Sam