Générateur de factures (Html/Css)
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Générateur de factures (Html/Css)
Bonjour, je vous explique le plus clairement possible mon problème, ainsi que les moyens utilisés pour résoudre sans résultat mon problème.
Afin d'être le plus précis et le plus clair possible, je me permettrai de séparer ma question en deux sections différentes.
1.
Le résultat attendu (Html + CSS) (Page Html offert par Forumactif): http://www.vous-etes-le-patron.net/h4-facturation
Le résultat réel à l'intérieur d'un message sur le forum: http://www.vous-etes-le-patron.net/t2782-test-de-facturation#11989
Les problèmes et tentatives:
a) On remarque que la facture se retrouve très loin en bas de l'écran.
- Je ne comprend pas d'où peut venir le problème. Il n'y a pas de saut de ligne, il n'y a pas de <div> superflu (Il fonctionne bien dans une page html). Le Html est bel et bien activé.
b) Le Css n'est pas géré.
- J'ai essayé d'héberger le code css avec archive-host. La prévisualisation fonctionne très bien, mais une fois envoyé, le résultat est décevant (aucun style).
--- Je vous demande donc votre aide pour corriger le problème (MERCI ! ) ----
2.
Résultat réel: Je n'arrive pas du tout à coder la partie pour que le générateur fonctionne bien.
Je vous explique l'intérêt du générateur.
a) En entrant les données dans le générateur, celles-ci sont directement incluses dans la mise en forme de la facture et cela permet d'offrir une jolie mise en page au membre, sans qu'il n'ait à chercher à modifier le code.
b) Pour le moment, le générateur n'offre qu'une liste des résultats.
c) Je souhaiterais de tout cœur arriver à lier la mise en forme de la facture relever en 1 à ce générateur de sorte que le résultat du générateur donnerait un code qui se rapproche à celui relever en 1, mais avec les informations qui ont été entrées dans le générateur.
d) Je n'arrive pas à jumeler les deux. Les tentatives que j'ai fait n'ont pas abouties, je ne suis pas parvenue à faire apparaitre une donnée du générateur dans le code relever en 1. Si vous me le permettez, je me passerai de vous montrer mes tentatives au risque d'être plus complexe à comprendre.
e) Ce que j'ai compris: Évidemment, il faut ajouter des bandes de données dans le générateur. Les voici:
- Logo (Lien image) entre les balises <img> => donne une image sur la facture (Si possible, mettre une limitation de taille de 100*200)
- Nom de mon entreprise
- Mon continent
- Mon Pays
- La Date
- Le numéro du client
- Le nom de l'entreprise du client
- Le continent du client
- Le pays du client
- Le nom du produit
- La quantité du produit
- Le prix à l'unité du produit
- Le coût pour le transport et la manutention
- Les frais de douane
- Le taux en % de Taxe de vente provinciale
- Le taux en % de Taxe de vente fédérale
Ensuite, je comprends qu'il faut que le générateur interprète les données de la sorte à répondre à d'autres catégories de données.
- [La quantité de produit] * [Le prix à l'unité] => Le Montant HT et le Sous-Total
- [Le sous-total] * [Le pourcentage de taxe de vente provinciale] = [Le montant de la taxe de vente provinciale]
- [Le sous-total] * [Le pourcentage de taxe de vente fédérale] = [Le montant de la taxe de vente fédérale]
- [Sous-Total + TVP + TVF + P&M + FD] => Le montant net à payer
f) Les boutons - calculer - générer le code pour le copier - réinitialiser la page - retour au forum - doivent toujours se retrouver sur la page du générateur.
g) Croyez-vous pouvoir m'aider à réaliser ce projet? Est-il possible de réaliser un tel projet?
Je vous remercie déjà pour l'attention que vous porterez à mes questions et à mon problème.
Au plaisir,
VSG.
Afin d'être le plus précis et le plus clair possible, je me permettrai de séparer ma question en deux sections différentes.
1.
- Le code 1:
- 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">
<head>
<meta content="en-ca" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>LOGO</title>
<style type="text/css">
.auto-style6 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.auto-style15 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
font-variant: small-caps;
text-align: center;
}
.auto-style17 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
text-align: center;
}
.auto-style18 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
text-align: right;
font-variant: small-caps;
}
.auto-style1 {
border-left: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
text-align: center;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
font-variant: small-caps;
}
.auto-style13 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
font-variant: small-caps;
text-align: left;
}
.auto-style19 {
border-right-width: 0;
border-bottom-width: 0;
border-left-color: #C0C0C0;
border-left-width: 0;
border-top-color: #C0C0C0;
border-top-width: 0;
}
.auto-style21 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: center;
}
.auto-style22 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: left;
}
.auto-style23 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: right;
}
</style>
</head>
<body>
<table style="width: 70%; height: 750px;" class="auto-style19" align="left">
<tr>
<td colspan="5" style="height: 248px" >
<table style="width: 100%" class="auto-style19">
<tr>
<td class="auto-style1" style="height: 75px; width: 30%;">[LOGO
100 * 200]</td>
<td class="auto-style1" colspan="4" style="height: 75px; width: 70%;">FACTURE</td>
</tr>
<tr>
<td class="auto-style13" style="width: 30%">[Nom de
l'entreprise]</td>
<td class="auto-style15" style="width: 15%" rowspan="2"># de Facture</td>
<td class="auto-style15" style="width: 15%" rowspan="2">DATE</td>
<td class="auto-style15" style="width: 15%" rowspan="2">Code Client</td>
<td class="auto-style15" style="width: 25%" rowspan="2">Client</td>
</tr>
<tr>
<td class="auto-style13" style="width: 30%">[COntinent, Pays]</td>
</tr>
<tr>
<td class="auto-style22" style="width: 30%; height: 44px;"> </td>
<td class="auto-style21" style="width: 15%; height: 44px;">
VSG[Date]</td>
<td class="auto-style21" style="width: 15%; height: 44px;">
[Date]</td>
<td class="auto-style21" style="width: 15%; height: 44px;">
#[#Client]</td>
<td class="auto-style21" style="width: 25%; height: 44px;">[Nom
du Client]<br />
[Continent, Pays]</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5" >
</td>
</tr>
<tr>
<td class="auto-style15" style="width: 10%">Code</td>
<td class="auto-style15" style="width: 50%">Description</td>
<td class="auto-style15" style="width: 10%">Quantité</td>
<td class="auto-style15" style="width: 10%">PU /
$ HT</td>
<td class="auto-style15" style="width: 20%">Montant /
$ HT</td>
</tr>
<tr>
<td class="auto-style21" style="height: 50px; width: 10%;">0001</td>
<td class="auto-style21" style="height: 50px; width: 50%;">[Produit]</td>
<td class="auto-style21" style="height: 50px; width: 10%;">[Quantité]</td>
<td class="auto-style21" style="height: 50px">[Prix unité]</td>
<td class="auto-style21" style="height: 50px; width: 20%;">[Quantité *
Prix Unité]</td>
</tr>
<tr>
<td class="auto-style6" style="height: 50px; width: 10%;"></td>
<td class="auto-style6" style="height: 50px; width: 50%;"></td>
<td class="auto-style6" style="height: 50px; width: 10%;"></td>
<td class="auto-style6" style="height: 50px"></td>
<td class="auto-style6" style="height: 50px; width: 20%;"></td>
</tr>
<tr>
<td class="auto-style6" style="height: 50px; width: 10%;"></td>
<td class="auto-style6" style="height: 50px; width: 50%;"></td>
<td class="auto-style6" style="height: 50px; width: 10%;"></td>
<td class="auto-style6" style="height: 50px"></td>
<td class="auto-style6" style="height: 50px; width: 20%;"></td>
</tr>
<tr>
<td class="auto-style6" colspan="2" rowspan="6"> </td>
<td class="auto-style18" colspan="2">Sous-Total</td>
<td class="auto-style23">[Quantité * Prix unité]</td>
</tr>
<tr>
<td class="auto-style18" colspan="2">Taxe de Vente Provinciale</td>
<td class="auto-style23">[5% du sous-total]</td>
</tr>
<tr>
<td class="auto-style18" colspan="2">Taxe de Vente Fédérale</td>
<td class="auto-style23">[10% du sous-total]</td>
</tr>
<tr>
<td class="auto-style18" colspan="2">Port & Manutention</td>
<td class="auto-style23">[Prix du transport]</td>
</tr>
<tr>
<td class="auto-style18" colspan="2">Frais de Douane</td>
<td class="auto-style23">[Prix frais de douane]</td>
</tr>
<tr>
<td class="auto-style15" colspan="2">Net à Payer</td>
<td class="auto-style17">[Sous-Total + TVP + TVF + P&M + FD]</td>
</tr>
<tr>
<td class="auto-style6" colspan="2" rowspan="2"><em>Les conditions de vente sont
déterminées dans le contrat général de vente de l'entreprise. </em></td>
<td colspan="3"> </td>
</tr>
<tr>
<td class="auto-style18" colspan="3">Vous êtes le patron 2013</td>
</tr>
</table>
</body>
</html>
Le résultat attendu (Html + CSS) (Page Html offert par Forumactif): http://www.vous-etes-le-patron.net/h4-facturation
Le résultat réel à l'intérieur d'un message sur le forum: http://www.vous-etes-le-patron.net/t2782-test-de-facturation#11989
Les problèmes et tentatives:
a) On remarque que la facture se retrouve très loin en bas de l'écran.
- Je ne comprend pas d'où peut venir le problème. Il n'y a pas de saut de ligne, il n'y a pas de <div> superflu (Il fonctionne bien dans une page html). Le Html est bel et bien activé.
b) Le Css n'est pas géré.
- J'ai essayé d'héberger le code css avec archive-host. La prévisualisation fonctionne très bien, mais une fois envoyé, le résultat est décevant (aucun style).
--- Je vous demande donc votre aide pour corriger le problème (MERCI ! ) ----
2.
- Le code 2:
- Code:
<div class="contenu_onglet" id="contenu_onglet_cat1">
<span class="titre_article">Coût Total de la Transaction</span>
<form action="" method="post" name="trans">
<div align="center">
<table>
<tbody>
<tr align="left" bgcolor="#eaeaea">
<th align="left" colspan="5">
<div align="center"><font color="#6b6b6b">SAISIE des données</font></div>
</th>
</tr>
<tr bgcolor="#e0e0e0">
<td align="center" colspan="4">Coût Total de la Transaction</td>
</tr>
<tr bgcolor="#e0e0e0">
<td width="25%"><label>Quantité de produit<input size="5" name="Quantite" type="text" value="0" /> </label></td>
<td width="25%"><label>Coût par unité<input size="5" name="Unite" type="text" value="0" /> </label></td>
<td width="25%"><label>Coût pour le Transport<input size="5" name="Transport" type="text" value="0"/> </label></td>
<td width="25%"><label>Coût pour la douane<input size="5" name="douane" type="text" value="0"/> </label></td>
</label></td>
</tbody>
</table>
<table>
<tbody>
<tr align="left" bgcolor="#eaeaea">
<th align="left" colspan="4">
<div align="center"><font color="#6b6b6b">Résultats </font></div>
</th>
</tr>
<tr bgcolor="#e0e0e0">
<td align="left" width="100%">Coût Total de la Transaction <input size="5" name="transaction" type="text" /> $</td>
</tr>
</tbody>
</table>
</div>
<p align="center"><input class="bouton" type="button" onClick="
quantit = parseInt(Somme=(parseInt(document.forms['trans'].Quantite.value)));
unit = parseFloat(Somme=(parseFloat(document.forms['trans'].Unite.value)));
transp = parseInt(Somme=(parseInt(document.forms['trans'].Transport.value)));
douan = parseInt(Somme=(parseInt(document.forms['trans'].douane.value)));
transac = (quantit*unit)+((quantit*unit)*0.15)+transp+douan;
document.forms['trans'].transaction.value=(Somme=Math.round((parseFloat(transac))*1000)/1000);
" name="Submit" value="Calculer" /></p>
<p align="center"><input type="button" value="Générer le code pour le copier" onclick="
quantit = parseInt(Somme=(parseInt(document.forms['trans'].Quantite.value)));
unit = parseFloat(Somme=(parseFloat(document.forms['trans'].Unite.value)));
transp = parseInt(Somme=(parseInt(document.forms['trans'].Transport.value)));
douan = parseInt(Somme=(parseInt(document.forms['trans'].douane.value)));
prod = quantit*unit;
tax = (quantit*unit)*0.15;
transac = (quantit*unit)+tax+transp+douan;
Volreel = Math.round(parseInt(Somme=(parseInt(transac)))*1000)/1000;
document.trans.cod1.style.display='block';
document.trans.cod1.value='<strong>Coût pour les produits : </strong>'+prod+' $\n<strong>Taxe (15%): </strong>'+tax+' $\n<strong>Douane: </strong>'+douan+' $\n<strong>Coût pour le transport: </strong>'+transp+' $\n<strong>Coût total pour la transaction: </strong>'+transac+' $\n';document.getelementbyid('validate').disabled=(document.getelementbyid('code').value!='')?false:true;" />
<input type="reset" value=" Réinitialiser la page"/><input type="button" name="lien" value="Retour au Forum" onClick="self.location.href='http://www.velp.monempire.net/'" />
<br><br>
<textarea class="post" style="width: 700px;" id="code" name="cod1" wrap="virtual" onselect="storecaret(this);" tabindex="3" cols="35" rows="25" onkeyup="storecaret(this);document.getelementbyid('validate').disabled=(this.value!=''&&document.getelementbyid('code').value!='')?false:true;" onclick="storecaret(this);" style="width: 250px; height: 250px; border: 1px solid #98d0cd;" readonly="true">
</textarea>
<a href="http://www.velp.monempire.net">Retour au forum</a></p>
</form>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'cat1';
change_onglet(anc_onglet);
//-->
</script>
</div>
Résultat réel: Je n'arrive pas du tout à coder la partie pour que le générateur fonctionne bien.
Je vous explique l'intérêt du générateur.
a) En entrant les données dans le générateur, celles-ci sont directement incluses dans la mise en forme de la facture et cela permet d'offrir une jolie mise en page au membre, sans qu'il n'ait à chercher à modifier le code.
b) Pour le moment, le générateur n'offre qu'une liste des résultats.
c) Je souhaiterais de tout cœur arriver à lier la mise en forme de la facture relever en 1 à ce générateur de sorte que le résultat du générateur donnerait un code qui se rapproche à celui relever en 1, mais avec les informations qui ont été entrées dans le générateur.
d) Je n'arrive pas à jumeler les deux. Les tentatives que j'ai fait n'ont pas abouties, je ne suis pas parvenue à faire apparaitre une donnée du générateur dans le code relever en 1. Si vous me le permettez, je me passerai de vous montrer mes tentatives au risque d'être plus complexe à comprendre.
e) Ce que j'ai compris: Évidemment, il faut ajouter des bandes de données dans le générateur. Les voici:
- Logo (Lien image) entre les balises <img> => donne une image sur la facture (Si possible, mettre une limitation de taille de 100*200)
- Nom de mon entreprise
- Mon continent
- Mon Pays
- La Date
- Le numéro du client
- Le nom de l'entreprise du client
- Le continent du client
- Le pays du client
- Le nom du produit
- La quantité du produit
- Le prix à l'unité du produit
- Le coût pour le transport et la manutention
- Les frais de douane
- Le taux en % de Taxe de vente provinciale
- Le taux en % de Taxe de vente fédérale
Ensuite, je comprends qu'il faut que le générateur interprète les données de la sorte à répondre à d'autres catégories de données.
- [La quantité de produit] * [Le prix à l'unité] => Le Montant HT et le Sous-Total
- [Le sous-total] * [Le pourcentage de taxe de vente provinciale] = [Le montant de la taxe de vente provinciale]
- [Le sous-total] * [Le pourcentage de taxe de vente fédérale] = [Le montant de la taxe de vente fédérale]
- [Sous-Total + TVP + TVF + P&M + FD] => Le montant net à payer
f) Les boutons - calculer - générer le code pour le copier - réinitialiser la page - retour au forum - doivent toujours se retrouver sur la page du générateur.
g) Croyez-vous pouvoir m'aider à réaliser ce projet? Est-il possible de réaliser un tel projet?
Je vous remercie déjà pour l'attention que vous porterez à mes questions et à mon problème.
Au plaisir,
VSG.
Dernière édition par undertaker999 le Ven 19 Juil 2013 - 1:06, édité 1 fois
Re: Générateur de factures (Html/Css)
Un petit up : votre aide sera très apprécié.
VSG.
VSG.
Re: Générateur de factures (Html/Css)
undertaker999 a écrit:Bonjour, je vous explique le plus clairement possible mon problème, ainsi que les moyens utilisés pour résoudre sans résultat mon problème.
Afin d'être le plus précis et le plus clair possible, je me permettrai de séparer ma question en deux sections différentes.
1.
- Le code 1:
- 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">
<head>
<meta content="en-ca" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>LOGO</title>
<style type="text/css">
.auto-style6 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.auto-style15 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
font-variant: small-caps;
text-align: center;
}
.auto-style17 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
text-align: center;
}
.auto-style18 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
text-align: right;
font-variant: small-caps;
}
.auto-style1 {
border-left: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
text-align: center;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
font-variant: small-caps;
}
.auto-style13 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
font-variant: small-caps;
text-align: left;
}
.auto-style19 {
border-right-width: 0;
border-bottom-width: 0;
border-left-color: #C0C0C0;
border-left-width: 0;
border-top-color: #C0C0C0;
border-top-width: 0;
}
.auto-style21 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: center;
}
.auto-style22 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: left;
}
.auto-style23 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: right;
}
</style>
</head>
<body>
<table style="width: 70%; height: 750px;" class="auto-style19" align="left">
<tr>
<td colspan="5" style="height: 248px" >
<table style="width: 100%" class="auto-style19">
<tr>
<td class="auto-style1" style="height: 75px; width: 30%;">[LOGO
100 * 200]</td>
<td class="auto-style1" colspan="4" style="height: 75px; width: 70%;">FACTURE</td>
</tr>
<tr>
<td class="auto-style13" style="width: 30%">[Nom de
l'entreprise]</td>
<td class="auto-style15" style="width: 15%" rowspan="2"># de Facture</td>
<td class="auto-style15" style="width: 15%" rowspan="2">DATE</td>
<td class="auto-style15" style="width: 15%" rowspan="2">Code Client</td>
<td class="auto-style15" style="width: 25%" rowspan="2">Client</td>
</tr>
<tr>
<td class="auto-style13" style="width: 30%">[COntinent, Pays]</td>
</tr>
<tr>
<td class="auto-style22" style="width: 30%; height: 44px;"> </td>
<td class="auto-style21" style="width: 15%; height: 44px;">
VSG[Date]</td>
<td class="auto-style21" style="width: 15%; height: 44px;">
[Date]</td>
<td class="auto-style21" style="width: 15%; height: 44px;">
#[#Client]</td>
<td class="auto-style21" style="width: 25%; height: 44px;">[Nom
du Client]<br />
[Continent, Pays]</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5" >
</td>
</tr>
<tr>
<td class="auto-style15" style="width: 10%">Code</td>
<td class="auto-style15" style="width: 50%">Description</td>
<td class="auto-style15" style="width: 10%">Quantité</td>
<td class="auto-style15" style="width: 10%">PU /
$ HT</td>
<td class="auto-style15" style="width: 20%">Montant /
$ HT</td>
</tr>
<tr>
<td class="auto-style21" style="height: 50px; width: 10%;">0001</td>
<td class="auto-style21" style="height: 50px; width: 50%;">[Produit]</td>
<td class="auto-style21" style="height: 50px; width: 10%;">[Quantité]</td>
<td class="auto-style21" style="height: 50px">[Prix unité]</td>
<td class="auto-style21" style="height: 50px; width: 20%;">[Quantité *
Prix Unité]</td>
</tr>
<tr>
<td class="auto-style6" style="height: 50px; width: 10%;"></td>
<td class="auto-style6" style="height: 50px; width: 50%;"></td>
<td class="auto-style6" style="height: 50px; width: 10%;"></td>
<td class="auto-style6" style="height: 50px"></td>
<td class="auto-style6" style="height: 50px; width: 20%;"></td>
</tr>
<tr>
<td class="auto-style6" style="height: 50px; width: 10%;"></td>
<td class="auto-style6" style="height: 50px; width: 50%;"></td>
<td class="auto-style6" style="height: 50px; width: 10%;"></td>
<td class="auto-style6" style="height: 50px"></td>
<td class="auto-style6" style="height: 50px; width: 20%;"></td>
</tr>
<tr>
<td class="auto-style6" colspan="2" rowspan="6"> </td>
<td class="auto-style18" colspan="2">Sous-Total</td>
<td class="auto-style23">[Quantité * Prix unité]</td>
</tr>
<tr>
<td class="auto-style18" colspan="2">Taxe de Vente Provinciale</td>
<td class="auto-style23">[5% du sous-total]</td>
</tr>
<tr>
<td class="auto-style18" colspan="2">Taxe de Vente Fédérale</td>
<td class="auto-style23">[10% du sous-total]</td>
</tr>
<tr>
<td class="auto-style18" colspan="2">Port & Manutention</td>
<td class="auto-style23">[Prix du transport]</td>
</tr>
<tr>
<td class="auto-style18" colspan="2">Frais de Douane</td>
<td class="auto-style23">[Prix frais de douane]</td>
</tr>
<tr>
<td class="auto-style15" colspan="2">Net à Payer</td>
<td class="auto-style17">[Sous-Total + TVP + TVF + P&M + FD]</td>
</tr>
<tr>
<td class="auto-style6" colspan="2" rowspan="2"><em>Les conditions de vente sont
déterminées dans le contrat général de vente de l'entreprise. </em></td>
<td colspan="3"> </td>
</tr>
<tr>
<td class="auto-style18" colspan="3">Vous êtes le patron 2013</td>
</tr>
</table>
</body>
</html>
Le résultat attendu (Html + CSS) (Page Html offert par Forumactif): http://www.vous-etes-le-patron.net/h4-facturation
Le résultat réel à l'intérieur d'un message sur le forum: http://www.vous-etes-le-patron.net/t2782-test-de-facturation#11989
Les problèmes et tentatives:
a) On remarque que la facture se retrouve très loin en bas de l'écran.
- Je ne comprend pas d'où peut venir le problème. Il n'y a pas de saut de ligne, il n'y a pas de <div> superflu (Il fonctionne bien dans une page html). Le Html est bel et bien activé.
b) Le Css n'est pas géré.
- J'ai essayé d'héberger le code css avec archive-host. La prévisualisation fonctionne très bien, mais une fois envoyé, le résultat est décevant (aucun style).
--- Je vous demande donc votre aide pour corriger le problème (MERCI ! ) ----
2.Générateur souhaité: http://www.vous-etes-le-patron.net/h12-generateur-complet-pour-comptable
- Le code 2:
- Code:
<div class="contenu_onglet" id="contenu_onglet_cat1">
<span class="titre_article">Coût Total de la Transaction</span>
<form action="" method="post" name="trans">
<div align="center">
<table>
<tbody>
<tr align="left" bgcolor="#eaeaea">
<th align="left" colspan="5">
<div align="center"><font color="#6b6b6b">SAISIE des données</font></div>
</th>
</tr>
<tr bgcolor="#e0e0e0">
<td align="center" colspan="4">Coût Total de la Transaction</td>
</tr>
<tr bgcolor="#e0e0e0">
<td width="25%"><label>Quantité de produit<input size="5" name="Quantite" type="text" value="0" /> </label></td>
<td width="25%"><label>Coût par unité<input size="5" name="Unite" type="text" value="0" /> </label></td>
<td width="25%"><label>Coût pour le Transport<input size="5" name="Transport" type="text" value="0"/> </label></td>
<td width="25%"><label>Coût pour la douane<input size="5" name="douane" type="text" value="0"/> </label></td>
</label></td>
</tbody>
</table>
<table>
<tbody>
<tr align="left" bgcolor="#eaeaea">
<th align="left" colspan="4">
<div align="center"><font color="#6b6b6b">Résultats </font></div>
</th>
</tr>
<tr bgcolor="#e0e0e0">
<td align="left" width="100%">Coût Total de la Transaction <input size="5" name="transaction" type="text" /> $</td>
</tr>
</tbody>
</table>
</div>
<p align="center"><input class="bouton" type="button" onClick="
quantit = parseInt(Somme=(parseInt(document.forms['trans'].Quantite.value)));
unit = parseFloat(Somme=(parseFloat(document.forms['trans'].Unite.value)));
transp = parseInt(Somme=(parseInt(document.forms['trans'].Transport.value)));
douan = parseInt(Somme=(parseInt(document.forms['trans'].douane.value)));
transac = (quantit*unit)+((quantit*unit)*0.15)+transp+douan;
document.forms['trans'].transaction.value=(Somme=Math.round((parseFloat(transac))*1000)/1000);
" name="Submit" value="Calculer" /></p>
<p align="center"><input type="button" value="Générer le code pour le copier" onclick="
quantit = parseInt(Somme=(parseInt(document.forms['trans'].Quantite.value)));
unit = parseFloat(Somme=(parseFloat(document.forms['trans'].Unite.value)));
transp = parseInt(Somme=(parseInt(document.forms['trans'].Transport.value)));
douan = parseInt(Somme=(parseInt(document.forms['trans'].douane.value)));
prod = quantit*unit;
tax = (quantit*unit)*0.15;
transac = (quantit*unit)+tax+transp+douan;
Volreel = Math.round(parseInt(Somme=(parseInt(transac)))*1000)/1000;
document.trans.cod1.style.display='block';
document.trans.cod1.value='<strong>Coût pour les produits : </strong>'+prod+' $\n<strong>Taxe (15%): </strong>'+tax+' $\n<strong>Douane: </strong>'+douan+' $\n<strong>Coût pour le transport: </strong>'+transp+' $\n<strong>Coût total pour la transaction: </strong>'+transac+' $\n';document.getelementbyid('validate').disabled=(document.getelementbyid('code').value!='')?false:true;" />
<input type="reset" value=" Réinitialiser la page"/><input type="button" name="lien" value="Retour au Forum" onClick="self.location.href='http://www.velp.monempire.net/'" />
<br><br>
<textarea class="post" style="width: 700px;" id="code" name="cod1" wrap="virtual" onselect="storecaret(this);" tabindex="3" cols="35" rows="25" onkeyup="storecaret(this);document.getelementbyid('validate').disabled=(this.value!=''&&document.getelementbyid('code').value!='')?false:true;" onclick="storecaret(this);" style="width: 250px; height: 250px; border: 1px solid #98d0cd;" readonly="true">
</textarea>
<a href="http://www.velp.monempire.net">Retour au forum</a></p>
</form>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'cat1';
change_onglet(anc_onglet);
//-->
</script>
</div>
Résultat réel: Je n'arrive pas du tout à coder la partie pour que le générateur fonctionne bien.
Je vous explique l'intérêt du générateur.
a) En entrant les données dans le générateur, celles-ci sont directement incluses dans la mise en forme de la facture et cela permet d'offrir une jolie mise en page au membre, sans qu'il n'ait à chercher à modifier le code.
b) Pour le moment, le générateur n'offre qu'une liste des résultats.
c) Je souhaiterais de tout cœur arriver à lier la mise en forme de la facture relever en 1 à ce générateur de sorte que le résultat du générateur donnerait un code qui se rapproche à celui relever en 1, mais avec les informations qui ont été entrées dans le générateur.
d) Je n'arrive pas à jumeler les deux. Les tentatives que j'ai fait n'ont pas abouties, je ne suis pas parvenue à faire apparaitre une donnée du générateur dans le code relever en 1. Si vous me le permettez, je me passerai de vous montrer mes tentatives au risque d'être plus complexe à comprendre.
e) Ce que j'ai compris: Évidemment, il faut ajouter des bandes de données dans le générateur. Les voici:
- Logo (Lien image) entre les balises <img> => donne une image sur la facture (Si possible, mettre une limitation de taille de 100*200)
- Nom de mon entreprise
- Mon continent
- Mon Pays
- La Date
- Le numéro du client
- Le nom de l'entreprise du client
- Le continent du client
- Le pays du client
- Le nom du produit
- La quantité du produit
- Le prix à l'unité du produit
- Le coût pour le transport et la manutention
- Les frais de douane
- Le taux en % de Taxe de vente provinciale
- Le taux en % de Taxe de vente fédérale
Ensuite, je comprends qu'il faut que le générateur interprète les données de la sorte à répondre à d'autres catégories de données.
- [La quantité de produit] * [Le prix à l'unité] => Le Montant HT et le Sous-Total
- [Le sous-total] * [Le pourcentage de taxe de vente provinciale] = [Le montant de la taxe de vente provinciale]
- [Le sous-total] * [Le pourcentage de taxe de vente fédérale] = [Le montant de la taxe de vente fédérale]
- [Sous-Total + TVP + TVF + P&M + FD] => Le montant net à payer
f) Les boutons - calculer - générer le code pour le copier - réinitialiser la page - retour au forum - doivent toujours se retrouver sur la page du générateur.
g) Croyez-vous pouvoir m'aider à réaliser ce projet? Est-il possible de réaliser un tel projet?
Je vous remercie déjà pour l'attention que vous porterez à mes questions et à mon problème.
Au plaisir,
VSG.
bonjour,
1 a) - pour ne pas avoir le vide au-dessus du tableau , il faut impérativement mettre le code sur une seule ligne ...
chaque retour à la ligne dans le code correspond à un retour à la ligne dans le messga .
voilà le tableau à placer dans le message :
- Code:
<table style="width: 70%; height: 750px;" class="auto-style19" align="left"> <tr> <td colspan="5" style="height: 248px" > <table style="width: 100%" class="auto-style19"> <tr> <td class="auto-style1" style="height: 75px; width: 30%;">[LOGO 100 * 200]</td> <td class="auto-style1" colspan="4" style="height: 75px; width: 70%;">FACTURE</td> </tr> <tr> <td class="auto-style13" style="width: 30%">[Nom de l'entreprise]</td> <td class="auto-style15" style="width: 15%" rowspan="2"># de Facture</td> <td class="auto-style15" style="width: 15%" rowspan="2">DATE</td> <td class="auto-style15" style="width: 15%" rowspan="2">Code Client</td> <td class="auto-style15" style="width: 25%" rowspan="2">Client</td> </tr> <tr> <td class="auto-style13" style="width: 30%">[COntinent, Pays]</td> </tr> <tr> <td class="auto-style22" style="width: 30%; height: 44px;"> </td> <td class="auto-style21" style="width: 15%; height: 44px;"> VSG[Date]</td> <td class="auto-style21" style="width: 15%; height: 44px;">[Date]</td> <td class="auto-style21" style="width: 15%; height: 44px;">#[#Client]</td> <td class="auto-style21" style="width: 25%; height: 44px;">[Nom du Client]<br /> [Continent, Pays]</td> </tr> </table> </td> </tr> <tr> <td colspan="5" > </td> </tr> <tr> <td class="auto-style15" style="width: 10%">Code</td> <td class="auto-style15" style="width: 50%">Description</td> <td class="auto-style15" style="width: 10%">Quantité</td> <td class="auto-style15" style="width: 10%">PU / $ HT</td> <td class="auto-style15" style="width: 20%">Montant / $ HT</td> </tr> <tr> <td class="auto-style21" style="height: 50px; width: 10%;">0001</td> <td class="auto-style21" style="height: 50px; width: 50%;">[Produit]</td> <td class="auto-style21" style="height: 50px; width: 10%;">[Quantité]</td> <td class="auto-style21" style="height: 50px">[Prix unité]</td> <td class="auto-style21" style="height: 50px; width: 20%;">[Quantité * Prix Unité]</td> </tr> <tr> <td class="auto-style6" style="height: 50px; width: 10%;"></td> <td class="auto-style6" style="height: 50px; width: 50%;"></td> <td class="auto-style6" style="height: 50px; width: 10%;"></td> <td class="auto-style6" style="height: 50px"></td> <td class="auto-style6" style="height: 50px; width: 20%;"></td> </tr> <tr> <td class="auto-style6" style="height: 50px; width: 10%;"></td> <td class="auto-style6" style="height: 50px; width: 50%;"></td> <td class="auto-style6" style="height: 50px; width: 10%;"></td> <td class="auto-style6" style="height: 50px"></td> <td class="auto-style6" style="height: 50px; width: 20%;"></td> </tr> <tr> <td class="auto-style6" colspan="2" rowspan="6"> </td> <td class="auto-style18" colspan="2">Sous-Total</td> <td class="auto-style23">[Quantité * Prix unité]</td> </tr> <tr> <td class="auto-style18" colspan="2">Taxe de Vente Provinciale</td> <td class="auto-style23">[5% du sous-total]</td> </tr> <tr> <td class="auto-style18" colspan="2">Taxe de Vente Fédérale</td> <td class="auto-style23">[10% du sous-total]</td> </tr> <tr> <td class="auto-style18" colspan="2">Port & Manutention</td> <td class="auto-style23">[Prix du transport]</td> </tr> <tr> <td class="auto-style18" colspan="2">Frais de Douane</td> <td class="auto-style23">[Prix frais de douane]</td> </tr> <tr> <td class="auto-style15" colspan="2">Net à Payer</td> <td class="auto-style17">[Sous-Total + TVP + TVF + P&M + FD]</td> </tr> <tr> <td class="auto-style6" colspan="2" rowspan="2"><em>Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise. </em></td> <td colspan="3"> </td> </tr> <tr> <td class="auto-style18" colspan="3">Vous êtes le patron 2013</td> </tr> </table>
b) - le CSS devra être placé dans la feuille de style du panneau admin :
- Code:
.auto-style6 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.auto-style15 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
font-variant: small-caps;
text-align: center;
}
.auto-style17 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
text-align: center;
}
.auto-style18 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
text-align: right;
font-variant: small-caps;
}
.auto-style1 {
border-left: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
text-align: center;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
font-variant: small-caps;
}
.auto-style13 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
font-variant: small-caps;
text-align: left;
}
.auto-style19 {
border-right-width: 0;
border-bottom-width: 0;
border-left-color: #C0C0C0;
border-left-width: 0;
border-top-color: #C0C0C0;
border-top-width: 0;
}
.auto-style21 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: center;
}
.auto-style22 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: left;
}
.auto-style23 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: right;
}
on peut naturellement simplifier le CSS et le tableau , on peut aussi mettre le tableau en BBcode pour éviter de tout mettre sur une seule ligne .
2 - si j'ai bien compris , vous voulez que ce tableau soit généré comme "le générateur du cout des transactions" , avec des champs à remplir ?
Re: Générateur de factures (Html/Css)
1- Merci beaucoup, votre nouveau code fonctionne parfaitement.
2- C'est exactement comme vous l'avez présenté.
Merci beaucoup pour votre aide.
VSG.
2- C'est exactement comme vous l'avez présenté.
Merci beaucoup pour votre aide.
VSG.
Re: Générateur de factures (Html/Css)
Petit up, pour ne pas me retrouver sur la deuxième page
Re: Générateur de factures (Html/Css)
Vous n'êtes pas oublié , rassurez vous ! ^^
Il me faudra juste un peu de temps pour faire le générateur ... et bizarrement , le temps , c'est ce qui nous manque le plus en été !
Il me faudra juste un peu de temps pour faire le générateur ... et bizarrement , le temps , c'est ce qui nous manque le plus en été !
Re: Générateur de factures (Html/Css)
Génial !
En effet, et je tiens à ce que vous en profitiez bien
Bien à vous,
VSG.
En effet, et je tiens à ce que vous en profitiez bien
Bien à vous,
VSG.
Re: Générateur de factures (Html/Css)
bonjour ,
désolé pour le retard de réponse ...
avant de fournir le générateur , je voudrais être sûr de ce que vous souhaitez , voici déjà la fiche à mettre dans la page HTML :
désolé pour le retard de réponse ...
avant de fournir le générateur , je voudrais être sûr de ce que vous souhaitez , voici déjà la fiche à mettre dans la page HTML :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>LOGO</title>
<style type="text/css">
#fact {
width: 800px;
margin:auto;
}
#fact td {
border: 1px outset #999999;
padding:0 5px;
}
#fact .caps {
font-variant: small-caps;
}
#fact .right {
text-align: right;
}
.center {
text-align: center;
}
#fact .bg {
background-color: #dadfd8;
}
#fact .bordernone {
border: none!important;
}
</style>
</head>
<script>
function calcul(form)
{
var quant1 = form.quant1.value;
var PUHT1 = form.PUHT1.value;
var STHT1 = Number(quant1*PUHT1);
form.STHT1.value = STHT1;
}
</script>
<body>
<form action="" method="post">
<table id="fact" border="0">
<tr>
<td class="caps center" style="height: 100px;">[LOGO 100 * 200]<br /><input type="text" class="caps" size="30" placeholder="[Url de l'image]" /></td>
<td class="caps center" colspan="4">FACTURE</td>
</tr>
<tr>
<td class="caps bg" style="width:210px"><input type="text" class="caps" size="25" placeholder="[Nom de l'entreprise]" /></td>
<td class="caps center bg" style="width:110px" rowspan="2"># de Facture</td>
<td class="caps center bg" style="width:50px" rowspan="2">Date</td>
<td class="caps center bg" style="width:105px" rowspan="2">Code Client</td>
<td class="caps center bg" rowspan="2">Client</td>
</tr>
<tr>
<td class="caps bg"><input type="text" class="caps" size="25" placeholder="[Continent, Pays]" /></td>
</tr>
<tr>
<td class="center"> </td>
<td class="center"><input type="text" class="caps" size="10" placeholder="VSG[Date]" /></td>
<td class="center"><input type="text" class="caps" size="5" placeholder="[Date]" /></td>
<td class="center"><input type="text" class="caps" size="10" placeholder="#[#Client]" /></td>
<td class="center"><input type="text" class="caps" size="20" placeholder="[Nom du Client]" /><br />
<input type="text" class="caps" size="20" placeholder="[Continent, Pays]" /></td>
</tr>
</table><br />
<table id="fact" style="height: 500px;" border="0">
<tr>
<td class="caps center bg" style="width:50px">Code</td>
<td class="caps center bg">Description</td>
<td class="caps center bg" style="width:110px">Quantité</td>
<td class="caps center bg" style="width:110px">PU / $ HT</td>
<td class="caps center bg" style="width:110px">Montant / $ HT</td>
</tr>
<tr>
<td class="center">0001</td>
<td class="center"><input type="text" class="caps" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant1" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT1" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT1" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0002</td>
<td class="center"><input type="text" class="caps" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant2" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT2" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT2" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0003</td>
<td class="center"><input type="text" class="caps" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant3" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT3" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT3" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="bordernone" colspan="2" rowspan="6"> </td>
<td class="caps right bg" colspan="2">Sous-Total</td>
<td class="center"><input type="text" class="right" name="totalHT" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Provinciale <a title="5% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVP" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Fédérale <a title="10% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVF" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Port & Manutention <a title="Prix du transport">[?]</a></td>
<td class="center"><input type="text" class="right" name="transport" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Frais de Douane</td>
<td class="center"><input type="text" class="right" name="douane" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps center bg" colspan="2">Net à Payer<br />
<input class="bouton" type="button" onClick='
var quant1=parseInt(Somme=(parseInt(form.quant1.value)));
var PUHT1=parseFloat(Somme=(parseFloat(form.PUHT1.value)));
var STHT1=parseFloat(quant1*PUHT1);
form.STHT1.value=(Somme=(parseFloat(parseFloat(STHT1))));
var quant2=parseInt(Somme=(parseInt(form.quant2.value)));
var PUHT2=parseFloat(Somme=(parseFloat(form.PUHT2.value)));
var STHT2=parseFloat(quant2*PUHT2);
form.STHT2.value=(Somme=(parseFloat(parseFloat(STHT2))));
var quant3=parseInt(Somme=(parseInt(form.quant3.value)));
var PUHT3=parseFloat(Somme=(parseFloat(form.PUHT3.value)));
var STHT3=parseFloat(quant3*PUHT3);
form.STHT3.value=(Somme=(parseFloat(parseFloat(STHT3))));
var totalHT=parseFloat(STHT1+STHT2+STHT3);
form.totalHT.value=(Somme=(parseFloat(parseFloat(totalHT))));
var TVP=parseFloat(totalHT*0.05);
form.TVP.value=(Somme=(parseFloat(parseFloat(TVP))));
var TVF=parseFloat(totalHT*0.10);
form.TVF.value=(Somme=(parseFloat(parseFloat(TVF))));
var transport=parseInt(Somme=(parseInt(form.transport.value)));
var douane=parseInt(Somme=(parseInt(form.douane.value)));
var total=parseFloat(totalHT+TVP+TVF+transport+douane);
form.total.value=(Somme=(parseFloat(parseFloat(total))));
' name="Submit" value="Calculer" /><input type="reset" value=" Réinitialiser la page"/></td>
<td class="center bg"><input type="text" class="right" name="total" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><em>Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise. </em></td>
<td class="bordernone" colspan="3"> </td>
</tr>
<tr>
<td class="caps right bg" colspan="3">Vous êtes le patron © 2013</td>
</tr>
</table>
</form>
</body>
</html>
Re: Générateur de factures (Html/Css)
WOW !
Comme à tous les coups, vous savez comment nous épater !
Cela est tout à fait en accord avec ma demande. Je vous en suis très reconnaissant, et même, j'irais jusqu'à dire que vous avez su comment simplifier la rentrée des données.
En conformité avec ce qui précède, je vous autorise à fournir le générateur, mais bien entendu je vous laisse le temps qu'il vous faut pour le réaliser.
----
Petite question: Seriez-vous en mesure de me dire pour quelle raison est-ce que l'affichage du CSS est disponible uniquement en prévisualisation dans le message suivant : http://www.vous-etes-le-patron.net/t2782-test-de-facturation#11989
En effet, lorsque je prévisualise je peux voir facilement la facture avec le css. Or, lorsque j'enregistre, je vois la facture, mais sans le css.
Merci de votre aide
VSG.
Comme à tous les coups, vous savez comment nous épater !
Cela est tout à fait en accord avec ma demande. Je vous en suis très reconnaissant, et même, j'irais jusqu'à dire que vous avez su comment simplifier la rentrée des données.
En conformité avec ce qui précède, je vous autorise à fournir le générateur, mais bien entendu je vous laisse le temps qu'il vous faut pour le réaliser.
----
Petite question: Seriez-vous en mesure de me dire pour quelle raison est-ce que l'affichage du CSS est disponible uniquement en prévisualisation dans le message suivant : http://www.vous-etes-le-patron.net/t2782-test-de-facturation#11989
En effet, lorsque je prévisualise je peux voir facilement la facture avec le css. Or, lorsque j'enregistre, je vois la facture, mais sans le css.
Merci de votre aide
VSG.
Re: Générateur de factures (Html/Css)
en fait , seule une partie du CSS est prise en compte , mais une de vos pages script prend le dessus sur les fonds de cellule ...
Retrouvez la page javascript qui contient ceci , et désactivez là :
vérifiez que le fond du tableau est revenu ...
ensuite , remplacez le CSS du tableau par celui ci :
et faites un test avec ce tableau :
Retrouvez la page javascript qui contient ceci , et désactivez là :
- Code:
$(function(){$('tr.post:has(".fondstaff") td').css('background-color','#ffffff')});
vérifiez que le fond du tableau est revenu ...
ensuite , remplacez le CSS du tableau par celui ci :
- Code:
/* debut CSS facture */
#fact { width: 700px; margin:auto; }
#fact td { border: 1px outset #999999; padding:4px 5px; }
#fact .caps { font-variant: small-caps; }
#fact .rgt {text-align: right;}
#fact .center { text-align: center; }
#fact .bg { background-color: #dadfd8; }
#fact .bordernone { border: none!important; }
/* fin CSS facture */
et faites un test avec ce tableau :
- Code:
[table id="fact" border="0"][tr][td class="caps center" style="height: 100px;"][LOGO 100 * 200][/td]
[td class="caps center" colspan="4"]FACTURE[/td]
[/tr]
[tr][td class="caps bg" style="width:210px"][Nom de l'entreprise][/td]
[td class="caps center bg" style="width:110px" rowspan="2"]# de Facture[/td]
[td class="caps center bg" style="width:50px" rowspan="2"]Date[/td]
[td class="caps center bg" style="width:105px" rowspan="2"]Code Client[/td]
[td class="caps center bg" rowspan="2"]Client[/td]
[/tr]
[tr][td class="caps bg"][Continent, Pays][/td]
[/tr]
[tr][td class="center"][/td]
[td class="center"]VSG[Date][/td]
[td class="center"][Date][/td]
[td class="center"]#[#Client][/td]
[td class="center"][Nom du Client]
[Continent, Pays][/td]
[/tr]
[/table]
[table id="fact" border="0"][tr][td class="caps center bg" style="width:50px"]Code[/td]
[td class="caps center bg"]Description[/td]
[td class="caps center bg" style="width:110px"]Quantité[/td]
[td class="caps center bg" style="width:110px"]PU / $ HT[/td]
[td class="caps center bg" style="width:110px"]Montant[/td]
[/tr]
[tr][td class="center"]0001[/td]
[td class="center"][ Nom du Produit ][/td]
[td class="rgt"]0[/td]
[td class="rgt"]0.00[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="center"]0002[/td]
[td class="center"][ Nom du Produit ][/td]
[td class="rgt"]0[/td]
[td class="rgt"]0.00[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="center"]0003[/td]
[td class="center"][ Nom du Produit ][/td]
[td class="rgt"]0[/td]
[td class="rgt"]0.00[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="bordernone" colspan="2" rowspan="6"][/td]
[td class="caps rgt bg" colspan="2"]Total Hors-Taxe[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Provinciale[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Fédérale[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="caps rgt bg" colspan="2"]Port & Manutention[/td]
[td class="rgt"]0.00[/td]
[/tr]
[tr][td class="caps rgt bg" colspan="2"]Frais de Douane[/td]
[td class="rgt"]0.00[/td]
[/tr]
[tr][td class="caps center bg" colspan="2"]Net à Payer[/td]
[td class="rgt bg"]0.00[/td]
[/tr]
[tr][td colspan="2" rowspan="2"]Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise.[/td]
[td class="bordernone" colspan="3"]
[/td]
[/tr]
[tr][td class="caps rgt bg" colspan="3"]Vous êtes le patron © 2013[/td]
[/tr]
[/table]
Re: Générateur de factures (Html/Css)
Plus que parfait
J'espère qu'il sera possible d'obtenir facilement le code par le générateur... Je ne sais comment vous remercier pour votre aide... C'est tout simplement fantastique !!!
Merci !
J'espère qu'il sera possible d'obtenir facilement le code par le générateur... Je ne sais comment vous remercier pour votre aide... C'est tout simplement fantastique !!!
Merci !
Re: Générateur de factures (Html/Css)
dernières questions ...
la case du logo peut-elle rester vide ?
doit-elle être remplacée par une image par défaut ?
le maximum du logo est-il de 100 de haut , 200 de large ?
Quel est le format de la date ? (dd/mm/yyyy ?)
pouvez-vous me donner plus d'infos sur : VSG[Date] , #[#Client] ? ( un exemple pour la mise en forme )
la case du logo peut-elle rester vide ?
doit-elle être remplacée par une image par défaut ?
le maximum du logo est-il de 100 de haut , 200 de large ?
Quel est le format de la date ? (dd/mm/yyyy ?)
pouvez-vous me donner plus d'infos sur : VSG[Date] , #[#Client] ? ( un exemple pour la mise en forme )
Re: Générateur de factures (Html/Css)
la case du logo peut-elle rester vide ?
doit-elle être remplacée par une image par défaut ?
-> En effet, puisque vous en parlez, j'aimerais bien que l'image par défaut soit celle-ci :
https://i.servimg.com/u/f35/13/09/19/90/logo_v10.png
le maximum du logo est-il de 100 de haut , 200 de large ?
-> Oui, bien 100 de haut et 200 de large
Quel est le format de la date ? (dd/mm/yyyy ?)
-> Oui, bien dd/mm/yyyy
pouvez-vous me donner plus d'infos sur : VSG[Date]
-> En fait, ce qui serait plus judicieux de faire finalement serait de mettre les 3 premières lettres du nom de l'entreprise (si cela est possible). Cela dans le but d'archiver les factures de chaque entreprise.
Par exemple:
1) L'entreprise 1 se nomme Forumactifs
2) La date est 15/07/2013
2) Le numero de la facture pourrait être FOR-15-07-2013 (Si bien sur quelques choses du genre est possible)
, #[#Client] ? ( un exemple pour la mise en forme )
-> Le numero du client identifie chaque membre du forum.
Par exemple:
1) Le membre 1 possède le numero 0001
2) Et pour faire plus jolie, j'ai ajouter un "#".
3) Donc, le numero de cette entreprise est #0001
Merci pour votre bon travail,
VSG.
doit-elle être remplacée par une image par défaut ?
-> En effet, puisque vous en parlez, j'aimerais bien que l'image par défaut soit celle-ci :
https://i.servimg.com/u/f35/13/09/19/90/logo_v10.png
le maximum du logo est-il de 100 de haut , 200 de large ?
-> Oui, bien 100 de haut et 200 de large
Quel est le format de la date ? (dd/mm/yyyy ?)
-> Oui, bien dd/mm/yyyy
pouvez-vous me donner plus d'infos sur : VSG[Date]
-> En fait, ce qui serait plus judicieux de faire finalement serait de mettre les 3 premières lettres du nom de l'entreprise (si cela est possible). Cela dans le but d'archiver les factures de chaque entreprise.
Par exemple:
1) L'entreprise 1 se nomme Forumactifs
2) La date est 15/07/2013
2) Le numero de la facture pourrait être FOR-15-07-2013 (Si bien sur quelques choses du genre est possible)
, #[#Client] ? ( un exemple pour la mise en forme )
-> Le numero du client identifie chaque membre du forum.
Par exemple:
1) Le membre 1 possède le numero 0001
2) Et pour faire plus jolie, j'ai ajouter un "#".
3) Donc, le numero de cette entreprise est #0001
Merci pour votre bon travail,
VSG.
Re: Générateur de factures (Html/Css)
Bonsoir,
premier code , celui-ci est pour éviter un logo trop grand ...
à rajouter au CSS :
à mettre dans la page HTML , dites moi s'il y a des choses à modifier (j'avoue que je me suis fait plaisir sur ce coup là ):
premier code , celui-ci est pour éviter un logo trop grand ...
à rajouter au CSS :
- Code:
#fact img { max-height:100px;max-width:200px; }
à mettre dans la page HTML , dites moi s'il y a des choses à modifier (j'avoue que je me suis fait plaisir sur ce coup là ):
- Code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>FACTURE</title>
<style type="text/css">
#fact,#code {
width: 800px;
margin:auto;
}
#fact td {
border: 1px outset #999999;
padding:0 5px;
}
#fact .caps {
font-variant: small-caps;
}
#fact .right {
text-align: right;
}
.center {
text-align: center;
}
#fact .bg {
background-color: #dadfd8;
}
#fact .bordernone {
border: none!important;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
<!--
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
autoSize: true,
dateFormat: "dd/mm/yy",
altField: "#alternate",
altFormat: "-dd-mm-yy",
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre" ],
monthNamesShort: [ "Janv", "Fevr", "Mars", "Avril", "Mai", "Juin", "Juil", "Aout", "Sept", "Oct", "Nov", "Dec" ],
showAnim: "fadeIn"
});
});
function idem(form){
var meme = form.firm.value;
var coupe = meme.substring(0,3);
form.VSGdate.value = coupe;
}
function calcul(form){
var quant1=parseInt(Somme=(parseInt(form.quant1.value)));
var PUHT1=parseFloat(Somme=(parseFloat(form.PUHT1.value)));
var STHT1=parseFloat(quant1*PUHT1);
form.STHT1.value=Math.round(STHT1*100)/100;
var quant2=parseInt(Somme=(parseInt(form.quant2.value)));
var PUHT2=parseFloat(Somme=(parseFloat(form.PUHT2.value)));
var STHT2=parseFloat(quant2*PUHT2);
form.STHT2.value=Math.round(STHT2*100)/100;
var quant3=parseInt(Somme=(parseInt(form.quant3.value)));
var PUHT3=parseFloat(Somme=(parseFloat(form.PUHT3.value)));
var STHT3=parseFloat(quant3*PUHT3);
form.STHT3.value=Math.round(STHT3*100)/100;
var totalHT=parseFloat(STHT1+STHT2+STHT3);
form.totalHT.value=Math.round(totalHT*100)/100;
var TVP=parseFloat(totalHT*0.05);
form.TVP.value=Math.round(TVP*100)/100;
var TVF=parseFloat(totalHT*0.10);
form.TVF.value=Math.round(TVF*100)/100;
var transport=parseInt(Somme=(parseInt(form.transport.value)));
var douane=parseInt(Somme=(parseInt(form.douane.value)));
var total=parseFloat(totalHT+TVP+TVF+transport+douane);
form.total.value=Math.round(total*100)/100;
}
function collecte(form){
var logo=form.logo.value;
var firm=form.firm.value;
var firmpays=form.pays.value;
var VSGdate=form.VSGdate.value;
var alternate=form.alternate.value;
var date=form.datepicker.value;
var codeclient=form.codeclient.value;
var client=form.client.value;
var paysclient=form.paysclient.value;
var prod1=form.prod1.value;
var quant1=form.quant1.value;
var PUHT1=form.PUHT1.value;
var STHT1=form.STHT1.value;
var prod2=form.prod2.value;
var quant2=form.quant2.value;
var PUHT2=form.PUHT2.value;
var STHT2=form.STHT2.value;
var prod3=form.prod3.value;
var quant3=form.quant3.value;
var PUHT3=form.PUHT3.value;
var STHT3=form.STHT3.value;
var totalHT=form.totalHT.value;
var TVP=form.TVP.value;
var TVF=form.TVF.value;
var transport=form.transport.value;
var douane=form.douane.value;
var total=form.total.value;
var facture ='[table id="fact" border="0"][tr]\n'
+'[td class="caps center" style="height: 100px;"]' + (logo ?'[img]' + logo + '[/img]':'[img]http://i35.servimg.com/u/f35/13/09/19/90/logo_v10.png[/img]') + '[/td]\n'
+'[td class="caps center" colspan="4"]FACTURE[/td]\n[/tr]\n'
+'[tr][td class="caps bg" style="width:210px"]' + firm + '[/td]\n'
+'[td class="caps center bg" style="width:110px" rowspan="2"]# de Facture[/td]\n'
+'[td class="caps center bg" style="width:50px" rowspan="2"]Date[/td]\n'
+'[td class="caps center bg" style="width:105px" rowspan="2"]Code Client[/td]\n'
+'[td class="caps center bg" rowspan="2"]Client[/td]\n[/tr]\n'
+'[tr][td class="caps bg"]' + firmpays + '[/td]\n[/tr]\n'
+'[tr][td class="center"][/td]\n'
+'[td class="caps center"]' + VSGdate + alternate + '[/td]\n'
+'[td class="center"]' + date + '[/td]\n'
+'[td class="center"]#' + codeclient + '[/td]\n'
+'[td class="center"]' + client + '\n' + paysclient + '[/td]\n[/tr]\n[/table]\n'
+'[table id="fact" border="0"][tr]'
+'[td class="caps center bg" style="width:50px"]Code[/td]\n'
+'[td class="caps center bg"]Description[/td]\n'
+'[td class="caps center bg" style="width:110px"]Quantité[/td]\n'
+'[td class="caps center bg" style="width:110px"]PU / $ HT[/td]\n'
+'[td class="caps center bg" style="width:110px"]Montant[/td]\n[/tr]\n'
+'[tr][td class="center"]0001[/td]\n'
+'[td class="center"][ Nom du Produit ]' + prod1 + '[/td]\n'
+'[td class="rgt"]' + quant1 + '[/td]\n'
+'[td class="rgt"]' + PUHT1 + '[/td]\n'
+'[td class="rgt"]' + STHT1 + '[/td]\n[/tr]\n'
+'[tr][td class="center"]0002[/td]\n'
+ (quant2=="0"?'[td class="center"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[/tr]\n':'[td class="center"]' + prod2 + '[/td]\n[td class="rgt"]' + quant2 + '[/td]\n[td class="rgt"]' + PUHT2 + '[/td]\n[td class="rgt"]' + STHT2 + '[/td]\n[/tr]\n')
+'[tr][td class="center"]0003[/td]\n'
+ (quant3=="0"?'[td class="center"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[/tr]\n':'[td class="center"]' + prod3 + '[/td]\n[td class="rgt"]' + quant3 + '[/td]\n[td class="rgt"]' + PUHT3 + '[/td]\n[td class="rgt"]' + STHT3 + '[/td]\n[/tr]\n')
+'[tr][td class="bordernone" colspan="2" rowspan="6"][/td]\n'
+'[td class="caps rgt bg" colspan="2"]Total Hors-Taxe[/td]\n'
+'[td class="rgt"]' + totalHT + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Provinciale[/td]\n'
+'[td class="rgt"]' + TVP + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Fédérale[/td]\n'
+'[td class="rgt"]' + TVF + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Port & Manutention[/td]\n'
+'[td class="rgt"]' + transport + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Frais de Douane[/td]\n'
+'[td class="rgt"]' + douane + '[/td]\n[/tr]\n'
+'[tr][td class="caps center bg" colspan="2"]Net à Payer[/td]\n'
+'[td class="rgt bg"]' + total + '[/td]\n[/tr]\n'
+'[tr][td colspan="2" rowspan="2"]Les conditions de vente sont déterminées dans le contrat général de vente de l\'entreprise.[/td]\n'
+'[td class="bordernone" colspan="3"]\n[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="3"]Vous êtes le patron © 2013[/td]\n[/tr]\n[/table]\n';
form.code.value = facture;
}
-->
</script>
</head>
<body>
<form action="" method="post">
<table id="fact" border="0">
<tr>
<td class="caps center" style="height: 100px;">[LOGO 200 * 100]<br />
<input type="text" name="logo" size="30" placeholder="de type:http://liendelimage.jpg" /><br />
(facultatif)</td>
<td class="caps center" colspan="4">FACTURE</td>
</tr>
<tr>
<td class="caps bg" style="width:210px"><input type="text" class="caps" name="firm" size="25" placeholder="[Nom de l'entreprise]" onkeyup="idem(this.form)" /></td>
<td class="caps center bg" style="width:120px" rowspan="2"># de Facture</td>
<td class="caps center bg" style="width:90px" rowspan="2">Date</td>
<td class="caps center bg" style="width:90px" rowspan="2">Code Client</td>
<td class="caps center bg" rowspan="2">Client</td>
</tr>
<tr>
<td class="caps bg"><input type="text" class="caps" name="pays" size="25" placeholder="[Continent, Pays]" /></td>
</tr>
<tr>
<td class="center"> </td>
<td class="center"><input type="text" class="caps" name="VSGdate" size="3" maxlength="3" readonly="readonly" /><input type="text" id="alternate" size="9" readonly="readonly" /></td>
<td class="center"><input type="text" name="datepicker" id="datepicker" size="7" /></td>
<td class="center">#<input type="text" class="caps" name="codeclient" size="10" placeholder="[#Client]" /></td>
<td class="center"><input type="text" class="caps center" name="client" size="20" placeholder="[Nom du Client]" /><br />
<input type="text" class="caps center" name="paysclient" size="20" placeholder="[Continent, Pays]" /></td>
</tr>
</table><br />
<table id="fact" style="height: 500px;" border="0">
<tr>
<td class="caps center bg" style="width:50px">Code</td>
<td class="caps center bg">Description</td>
<td class="caps center bg" style="width:110px">Quantité</td>
<td class="caps center bg" style="width:110px">PU / $ HT</td>
<td class="caps center bg" style="width:110px">Montant / $ HT</td>
</tr>
<tr>
<td class="center">0001</td>
<td class="center"><input type="text" class="caps" name="prod1" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant1" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT1" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT1" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0002</td>
<td class="center"><input type="text" class="caps" name="prod2" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant2" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT2" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT2" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0003</td>
<td class="center"><input type="text" class="caps" name="prod3" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant3" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT3" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT3" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="bordernone" colspan="2" rowspan="6"> </td>
<td class="caps right bg" colspan="2">Sous-Total</td>
<td class="center"><input type="text" class="right" name="totalHT" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Provinciale <a title="5% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVP" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Fédérale <a title="10% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVF" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Port & Manutention <a title="Prix du transport">[?]</a></td>
<td class="center"><input type="text" class="right" name="transport" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Frais de Douane</td>
<td class="center"><input type="text" class="right" name="douane" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps center bg" colspan="2">Net à Payer<br />
<input class="bouton" type="button" onClick="calcul(this.form)" name="Submit" value="Calculer" /><input type="reset" value=" Réinitialiser la page" /></td>
<td class="center bg"><input type="text" class="right" name="total" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><em>Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise. </em></td>
<td class="bordernone" colspan="3"> </td>
</tr>
<tr>
<td class="caps right bg" colspan="3">Vous êtes le patron © 2013</td>
</tr>
</table>
<p align="center"><input value="Générer la facture" onclick="collecte(this.form)" type="button" /> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code').focus();document.getElementById('code').select();" /> <input name="lien" value="Retour au Forum" onclick="self.location.href='http://www.velp.monempire.net/'" type="button" /><br><br>
<textarea id="code" name="code" rows="25" readonly="true"></textarea></p>
</form>
</body>
</html>
Re: Générateur de factures (Html/Css)
Bonsoir,
Comme d'habitude c'est plus que parfait !!!
Je suis content de voir que vous vous êtes fait plaisir sur ce coup... Toutes vos modifications sont agréables et très appréciées.
Je ne peux qu'être satisfait pour votre merveilleux travail...
Merci beaucoup
Bien à vous,
VSG.
Comme d'habitude c'est plus que parfait !!!
Je suis content de voir que vous vous êtes fait plaisir sur ce coup... Toutes vos modifications sont agréables et très appréciées.
Je ne peux qu'être satisfait pour votre merveilleux travail...
Merci beaucoup
Bien à vous,
VSG.
Re: Générateur de factures (Html/Css)
Avez vous pu tester toutes les fonctionnalités ? Le sujet est-il résolu ?
Re: Générateur de factures (Html/Css)
Oui, j'ai bien essayé les fonctions et elles fonctionnent très bien.
J'aurais cependant une quelques questions:
- Est-ce possible de mettre un menu liste dans la section "Continent, Pays" (ex: Tu peux sélectionner Amérique du Nord, Canada ou Europe, France) ?
- Est-ce possible de mettre un menu liste dans la section "Nom de l'entreprise" (et que les trois lettres soient prises en compte pareil ?
- Est-ce possible de mettre une zone de texte qui peut être générée ?
- Est-ce possible de mettre une zone à bouton que l'on peut cliquer et qui peut-être générée ?
Évidemment, ce n'est pas nécessairement pour ce générateur, mais pour les prochains que je pourrais avoir besoin
Merci beaucoup.
J'aurais cependant une quelques questions:
- Est-ce possible de mettre un menu liste dans la section "Continent, Pays" (ex: Tu peux sélectionner Amérique du Nord, Canada ou Europe, France) ?
- Est-ce possible de mettre un menu liste dans la section "Nom de l'entreprise" (et que les trois lettres soient prises en compte pareil ?
- Est-ce possible de mettre une zone de texte qui peut être générée ?
- Est-ce possible de mettre une zone à bouton que l'on peut cliquer et qui peut-être générée ?
Évidemment, ce n'est pas nécessairement pour ce générateur, mais pour les prochains que je pourrais avoir besoin
Merci beaucoup.
Re: Générateur de factures (Html/Css)
c'est faisable- Est-ce possible de mettre un menu liste dans la section "Continent, Pays" (ex: Tu peux sélectionner Amérique du Nord, Canada ou Europe, France) ?
à essayer , mais doit aussi être faisable- Est-ce possible de mettre un menu liste dans la section "Nom de l'entreprise" (et que les trois lettres soient prises en compte pareil ?
oui ... un textarea ...- Est-ce possible de mettre une zone de texte qui peut être générée ?
là , je ne vois pas ... "zone" ? ... les boutons générés ne fonctionnent pas dans un message (ne sont pas actifs , cause javascript interdit dans un message)- Est-ce possible de mettre une zone à bouton que l'on peut cliquer et qui peut-être générée ?
Évidemment, ce n'est pas nécessairement pour ce générateur, mais pour les prochains que je pourrais avoir besoin
je vous prépare les 3 premières modifs ?
Re: Générateur de factures (Html/Css)
Il serait bien en effet d'avoir les parties de codes correspondent aux trois premiers.
Et en ce qui concerne la zone à boutons, je voulais plutôt "Bouton radio".
Merci pour votre aide
VSG.
Et en ce qui concerne la zone à boutons, je voulais plutôt "Bouton radio".
Merci pour votre aide
VSG.
Re: Générateur de factures (Html/Css)
comme je ne savais pas où mettre un textarea , je l'ai placé dans le nom du premier produit
voici déjà le code pour les trois premiers :
pour les boutons radios et les cases à cocher , ça marche comme dans tout formulaire , il y a quelques exemples sur ce forum ...
voici déjà le code pour les trois premiers :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>FACTURE</title>
<style type="text/css">
#fact,#code {
width: 800px;
margin:auto;
}
#fact td {
border: 1px outset #999999;
padding:0 5px;
}
#fact .caps {
font-variant: small-caps;
}
#fact .right {
text-align: right;
}
.center {
text-align: center;
}
#fact .bg {
background-color: #dadfd8;
}
#fact .bordernone {
border: none!important;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
<!--
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
autoSize: true,
dateFormat: "dd/mm/yy",
altField: "#alternate",
altFormat: "-dd-mm-yy",
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre" ],
monthNamesShort: [ "Janv", "Fevr", "Mars", "Avril", "Mai", "Juin", "Juil", "Aout", "Sept", "Oct", "Nov", "Dec" ],
showAnim: "fadeIn"
});
});
function idem(form){
var meme = form.firm.value;
var coupe = meme.substring(0,3);
form.VSGdate.value = coupe;
}
function calcul(form){
var quant1=parseInt(Somme=(parseInt(form.quant1.value)));
var PUHT1=parseFloat(Somme=(parseFloat(form.PUHT1.value)));
var STHT1=parseFloat(quant1*PUHT1);
form.STHT1.value=Math.round(STHT1*100)/100;
var quant2=parseInt(Somme=(parseInt(form.quant2.value)));
var PUHT2=parseFloat(Somme=(parseFloat(form.PUHT2.value)));
var STHT2=parseFloat(quant2*PUHT2);
form.STHT2.value=Math.round(STHT2*100)/100;
var quant3=parseInt(Somme=(parseInt(form.quant3.value)));
var PUHT3=parseFloat(Somme=(parseFloat(form.PUHT3.value)));
var STHT3=parseFloat(quant3*PUHT3);
form.STHT3.value=Math.round(STHT3*100)/100;
var totalHT=parseFloat(STHT1+STHT2+STHT3);
form.totalHT.value=Math.round(totalHT*100)/100;
var TVP=parseFloat(totalHT*0.05);
form.TVP.value=Math.round(TVP*100)/100;
var TVF=parseFloat(totalHT*0.10);
form.TVF.value=Math.round(TVF*100)/100;
var transport=parseInt(Somme=(parseInt(form.transport.value)));
var douane=parseInt(Somme=(parseInt(form.douane.value)));
var total=parseFloat(totalHT+TVP+TVF+transport+douane);
form.total.value=Math.round(total*100)/100;
}
function collecte(form){
var logo=form.logo.value;
var firm=form.firm.value;
var firmpays=form.pays.value;
var VSGdate=form.VSGdate.value;
var alternate=form.alternate.value;
var date=form.datepicker.value;
var codeclient=form.codeclient.value;
var client=form.client.value;
var paysclient=form.paysclient.value;
var prod1=form.prod1.value;
var quant1=form.quant1.value;
var PUHT1=form.PUHT1.value;
var STHT1=form.STHT1.value;
var prod2=form.prod2.value;
var quant2=form.quant2.value;
var PUHT2=form.PUHT2.value;
var STHT2=form.STHT2.value;
var prod3=form.prod3.value;
var quant3=form.quant3.value;
var PUHT3=form.PUHT3.value;
var STHT3=form.STHT3.value;
var totalHT=form.totalHT.value;
var TVP=form.TVP.value;
var TVF=form.TVF.value;
var transport=form.transport.value;
var douane=form.douane.value;
var total=form.total.value;
var facture ='[table id="fact" border="0"][tr]\n'
+'[td class="caps center" style="height: 100px;"]' + (logo ?'[img]' + logo + '[/img]':'[img]http://i35.servimg.com/u/f35/13/09/19/90/logo_v10.png[/img]') + '[/td]\n'
+'[td class="caps center" colspan="4"]FACTURE[/td]\n[/tr]\n'
+'[tr][td class="caps bg" style="width:210px"]' + firm + '[/td]\n'
+'[td class="caps center bg" style="width:110px" rowspan="2"]# de Facture[/td]\n'
+'[td class="caps center bg" style="width:50px" rowspan="2"]Date[/td]\n'
+'[td class="caps center bg" style="width:105px" rowspan="2"]Code Client[/td]\n'
+'[td class="caps center bg" rowspan="2"]Client[/td]\n[/tr]\n'
+'[tr][td class="caps bg"]' + firmpays + '[/td]\n[/tr]\n'
+'[tr][td class="center"][/td]\n'
+'[td class="caps center"]' + VSGdate + alternate + '[/td]\n'
+'[td class="center"]' + date + '[/td]\n'
+'[td class="center"]#' + codeclient + '[/td]\n'
+'[td class="center"]' + client + '\n' + paysclient + '[/td]\n[/tr]\n[/table]\n'
+'[table id="fact" border="0"][tr]'
+'[td class="caps center bg" style="width:50px"]Code[/td]\n'
+'[td class="caps center bg"]Description[/td]\n'
+'[td class="caps center bg" style="width:110px"]Quantité[/td]\n'
+'[td class="caps center bg" style="width:110px"]PU / $ HT[/td]\n'
+'[td class="caps center bg" style="width:110px"]Montant[/td]\n[/tr]\n'
+'[tr][td class="center"]0001[/td]\n'
+'[td class="center"][ Nom du Produit ]' + prod1 + '[/td]\n'
+'[td class="rgt"]' + quant1 + '[/td]\n'
+'[td class="rgt"]' + PUHT1 + '[/td]\n'
+'[td class="rgt"]' + STHT1 + '[/td]\n[/tr]\n'
+'[tr][td class="center"]0002[/td]\n'
+ (quant2=="0"?'[td class="center"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[/tr]\n':'[td class="center"]' + prod2 + '[/td]\n[td class="rgt"]' + quant2 + '[/td]\n[td class="rgt"]' + PUHT2 + '[/td]\n[td class="rgt"]' + STHT2 + '[/td]\n[/tr]\n')
+'[tr][td class="center"]0003[/td]\n'
+ (quant3=="0"?'[td class="center"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[/tr]\n':'[td class="center"]' + prod3 + '[/td]\n[td class="rgt"]' + quant3 + '[/td]\n[td class="rgt"]' + PUHT3 + '[/td]\n[td class="rgt"]' + STHT3 + '[/td]\n[/tr]\n')
+'[tr][td class="bordernone" colspan="2" rowspan="6"][/td]\n'
+'[td class="caps rgt bg" colspan="2"]Total Hors-Taxe[/td]\n'
+'[td class="rgt"]' + totalHT + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Provinciale[/td]\n'
+'[td class="rgt"]' + TVP + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Fédérale[/td]\n'
+'[td class="rgt"]' + TVF + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Port & Manutention[/td]\n'
+'[td class="rgt"]' + transport + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Frais de Douane[/td]\n'
+'[td class="rgt"]' + douane + '[/td]\n[/tr]\n'
+'[tr][td class="caps center bg" colspan="2"]Net à Payer[/td]\n'
+'[td class="rgt bg"]' + total + '[/td]\n[/tr]\n'
+'[tr][td colspan="2" rowspan="2"]Les conditions de vente sont déterminées dans le contrat général de vente de l\'entreprise.[/td]\n'
+'[td class="bordernone" colspan="3"]\n[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="3"]Vous êtes le patron © 2013[/td]\n[/tr]\n[/table]\n';
form.code.value = facture;
}
-->
</script>
</head>
<body>
<form action="" method="post">
<table id="fact" border="0">
<tr>
<td class="caps center" style="height: 100px;">[LOGO 200 * 100]<br />
<input type="text" name="logo" size="30" placeholder="de type:http://liendelimage.jpg" /><br />
(facultatif)</td>
<td class="caps center" colspan="4">FACTURE</td>
</tr>
<tr>
<td class="caps bg" style="width:210px"><select name="firm" class="caps" onclick="idem(this.form)">
<option value="Forumactif">Forumactif</option>
<option value="Facom">Facom</option>
<option value="Catavana">Catavana</option>
<option value="Jasper">Jasper</option>
<option value="Molette">Molette</option>
</select></td>
<td class="caps center bg" style="width:120px" rowspan="2"># de Facture</td>
<td class="caps center bg" style="width:90px" rowspan="2">Date</td>
<td class="caps center bg" style="width:90px" rowspan="2">Code Client</td>
<td class="caps center bg" rowspan="2">Client</td>
</tr>
<tr>
<td class="caps bg"><select name="pays" class="caps">
<optgroup label="Amérique du Nord">
<option value="Amérique du Nord - New-york">New-york</option>
<option value="Amérique du Nord - Dallas">Dallas</option>
<optgroup label="Canada">
<option value="Canada - Ontario">Ontario</option>
<optgroup label="Europe">
<option value="Europe - France">France</option>
<option value="Europe - Madrid">Madrid</option>
</select></td>
</tr>
<tr>
<td class="center"> </td>
<td class="center"><input type="text" class="caps" name="VSGdate" size="3" maxlength="3" readonly="readonly" /><input type="text" id="alternate" size="9" readonly="readonly" /></td>
<td class="center"><input type="text" name="datepicker" id="datepicker" size="7" /></td>
<td class="center">#<input type="text" class="caps" name="codeclient" size="10" placeholder="[#Client]" /></td>
<td class="center"><input type="text" class="caps center" name="client" size="20" placeholder="[Nom du Client]" /><br />
<input type="text" class="caps center" name="paysclient" size="20" placeholder="[Continent, Pays]" /></td>
</tr>
</table><br />
<table id="fact" style="height: 500px;" border="0">
<tr>
<td class="caps center bg" style="width:50px">Code</td>
<td class="caps center bg">Description</td>
<td class="caps center bg" style="width:110px">Quantité</td>
<td class="caps center bg" style="width:110px">PU / $ HT</td>
<td class="caps center bg" style="width:110px">Montant / $ HT</td>
</tr>
<tr>
<td class="center">0001</td>
<td class="center"><textarea class="caps" name="prod1" placeholder="Nom du Produit et description" cols="30" rows="4"></textarea></td>
<td class="center"><input type="text" class="right" name="quant1" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT1" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT1" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0002</td>
<td class="center"><input type="text" class="caps" name="prod2" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant2" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT2" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT2" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0003</td>
<td class="center"><input type="text" class="caps" name="prod3" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant3" size="5" value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT3" size="5" value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT3" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="bordernone" colspan="2" rowspan="6"> </td>
<td class="caps right bg" colspan="2">Sous-Total</td>
<td class="center"><input type="text" class="right" name="totalHT" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Provinciale <a title="5% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVP" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Fédérale <a title="10% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVF" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Port & Manutention <a title="Prix du transport">[?]</a></td>
<td class="center"><input type="text" class="right" name="transport" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Frais de Douane</td>
<td class="center"><input type="text" class="right" name="douane" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps center bg" colspan="2">Net à Payer<br />
<input class="bouton" type="button" onClick="calcul(this.form)" name="Submit" value="Calculer" /><input type="reset" value=" Réinitialiser la page" /></td>
<td class="center bg"><input type="text" class="right" name="total" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><em>Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise. </em></td>
<td class="bordernone" colspan="3"> </td>
</tr>
<tr>
<td class="caps right bg" colspan="3">Vous êtes le patron © 2013</td>
</tr>
</table>
<p align="center"><input value="Générer la facture" onclick="collecte(this.form)" type="button" /> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code').focus();document.getElementById('code').select();" /> <input name="lien" value="Retour au Forum" onclick="self.location.href='http://www.velp.monempire.net/'" type="button" /><br><br>
<textarea id="code" name="code" rows="25" readonly="true"></textarea></p>
</form>
</body>
</html>
pour les boutons radios et les cases à cocher , ça marche comme dans tout formulaire , il y a quelques exemples sur ce forum ...
Re: Générateur de factures (Html/Css)
Comme d'habitude tout est parfait
Merci pour tout !
VSG.
Merci pour tout !
VSG.
Sujets similaires
» [Html] Formulaire -> Générateur de code
» Page HTML comme le générateur de commande du FdF
» Mon code HTML ne veut pas fonctionner sur mon gestionnaire de pages HTML
» Code HTML dans l'éditeur HTML mais il ne marche pas.
» Afficher un code HTML sur une page html créé.
» Page HTML comme le générateur de commande du FdF
» Mon code HTML ne veut pas fonctionner sur mon gestionnaire de pages HTML
» Code HTML dans l'éditeur HTML mais il ne marche pas.
» Afficher un code HTML sur une page html créé.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum