Formulaire type devis en php et javascript

Version imprimable

Bonjour, ceci est mon premier post sur cette communauté.
Je commence l'apprentissage de PHP et je me suis attelé à une tâche qui parfois me dépasse un peu.

Je souhaiterais faire une page de type devis avec des formulaires à remplir et un calcul automatique selon la qté, tva etc...

Pour le calcul automatique j'ai une solution en javascript par contre, après, je ne sais pas comment envoyer mes données en php vers la base de données.

Pour le devis j'ai 2 tables.
Table "Offre" qui donne un nouveau numéro d'offre
Table "entrée" dans laquelle vont se mettre les lignes complétées plus haut avec les montants calculés par JS.

Pour le formulaire voici un extrait du tableau:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <FORM NAME="form1"> <TR> <TD> <input type="text" name="ArDesc1" size="100"/> </TD> <input type="hidden" name="OfLigne" value="1"> <TD> <input type="text" name="EntPU1" size="8" onBlur="calcul_form(this)"/> </TD> <TD> <input type="text" name="EntQte1" size="5"onBlur="calcul_form(this)"/> </TD> <TD><select name="EntTVAID1" onBlur="calcul_form(this)"> <option value="1.21">21%</option> <option value="1.06">6%</option> </select> </TD> <TD> <INPUT TYPE="text" NAME="t1" readonly SIZE=8> </TD> </TR> <TR> <TD> <input type="text" name="ArDesc2" size="100" /> </TD> <input <input type="hidden" name="OfLigne" value="2"> <TD> <input type="text" name="EntPU2" size="8" onBlur="calcul_form(this)"/> </TD> <TD> <input type="text" name="EntQte2" size="5"onBlur="calcul_form(this)"/> </TD> <TD><select name="EntTVAID2" onBlur="calcul_form(this)"> <option value="1.21">21%</option> <option value="1.06">6%</option> </select> </TD> <TD> <input type="text" name="t2" readonly size="8"/> </TD> <INPUT TYPE="SUBMIT" VALUE=" Enregistrer l'offre " onClick="soumettre_form()">
Le Javascript ressemble à ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function calcul_form() { with (document.forms.form1) { t1.value = (Math.round(EntPU1.value * EntQte1.value * EntTVAID1.value *100)/100) ; t2.value = (Math.round(EntPU2.value * EntQte2.value * EntTVAID2.value *100)/100) ; total.value = (Math.round((t1.value *1 + t2.value *1 ) *100)/100) ; tva.value = total.value -((EntPU1.value * EntQte1.value) + (EntPU2.value * EntQte2.value) + (EntPU3.value * EntQte3.value) + (EntPU4.value * EntQte4.value) + (EntPU5.value * EntQte5.value) + (EntPU6.value * EntQte6.value) + (EntPU7.value * EntQte7.value)); // Ai mis les *1 ci-dessus afin que les + fassent une somme arithmétique // et non pas une concaténation de chaînes de caractères } } function soumettre_form() { if ( document.forms.form1.total.value == 0 ) { alert ("Vous n'avez rien commandé !\n => commande non soumise") ; return false ; } else { document.form1.method = "POST" ; document.form1.action = "insert_offre_entree.php" ; document.close () ; return true ; }
Ma question est donc, ok j'ai mes lignes remplies par le visiteur, les calculs sont fait mais comment l'envoyer vers ma BDD?

A savoir: il y à 7 lignes (que j'ai retirées ici pour ne pas alourdir)

J'espérais pouvoir faire une variable puisque à chaque ligne se sont les mêmes données qui reviennent (description, prix unitaire, taux de TVA, montant total calculé)
Mais je n'y arrive pas.

Si quelqu'un peut me guider voire, soyons fous, m'aider, j'arreterais de m'arracher le peu de cheveux qui me reste.

Bien cordialement.

11/02/2013, 15h16
camyo

dans ta page insert_offre_entree.php

tu recuperes les valeurs de tes POST
et tu fais un INSERT dans ta BDD

J'ai raté un truc :koi:

VI-2. Alimenter sa base via PHP
11/02/2013, 16h01
kiyeko

Non, tu n'as rien raté, Je suis débutant, j'ai du mal à exprimer mon problème.

Je suis juste ennuyé par le grand nombre de champs différents.
Pour faire mon calcul Javascript, j'ai dû nommer les champs:
Ligne 1: ArDesc1, EntPU1, EntQte1, EntTVAID1, t1
Ligne 2: ArDesc2, EntPU2, EntQte2, EntTVAID1, t2
Ligne3:....-> jusque ligne 7

J'ai donc autant de "ArDesc" qu'il y a de lignes donc 5 variables X 7 lignes soit 35 Variables différentes alors qu'elles ne concernent que 5 champs dans la BDD.

J'aurais aimé pouvoir créer 5 variables ArDesc[], EntPU[], EntQte[], EntTVAID[], t[]. et faire un array pour les 7 lignes puis tout envoyer, déballer ce tableau et insérer proprement dans la BDD.

Je crois que je vais aller voir un pro pour me le faire. C'est trop compliqué à exprimer par écrit.

Salut,

tu aurais dû essayer :mouarf:
il te suffit de faire comme ça pour récupérer un tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
<td><input type="text" name="ArDesc[]" size="100" /></td> 
<input type="hidden" name="OfLigne" value="1"> 
<td><input type="text" name="EntPU[]" size="8" onBlur="calcul_form(this)" /></td> 
<td><input type="text" name="EntQte[]" size="5"onBlur="calcul_form(this)" /></td> 
<td>
    <select name="EntTVAID[]" onBlur="calcul_form(this)"> 
        <option value="1.21">21%</option> 
        <option value="1.06">6%</option> 
    </select> 
</td>
<td><input type="text" name="t[]" readonly size=8 /></td>

et tu peux même faire comme ça :

Code:

<input type="text" name="ArDesc[1]" size="100" />

11/02/2013, 17h06
kiyeko

J'ai passé le WE dessus le problème que j'avais est que avec un nom commun de variable type ArDesc[] fatalement mon Script Javascript ne fonctionnait plus par contre j'ignorais pouvoir faire ArDesc[1] pour définir une variable spéciale à javascript et la récupérer ensuite comme ArDesc[] avec php.

Je vais essayer immédiatement.

Merci pour vos conseils, je reviens pour, j'espère, clôturer ce post rapidement. :-)

Bon ben, pour le php ça fonctionne plus ou moins. Disons que je récupère les variables en array mais j'ai un message: Notice: Use of undefined constant ArDesc - assumed 'ArDesc'
Je ne me tracasse pas trop pour le moment j'ai lu que ce n'est qu'une notice qui ne change rien au code. Je reglerai ça plus tard.

Par contre mon script de calcul javascript ne fonctionne plus. J'ai évidemment changé les formules mais sans succes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function calcul_form() {
      // le with ci-dessous permet d'abréger "document.forms.form1.p1.value" en "p1.value"
      with (document.forms.form1) {
        t1.value = (Math.round(EntPU[1].value * EntQte[1].value * EntTVAID1.value *100)/100) ;
        t2.value = (Math.round(EntPU[2].value * EntQte[2].value * EntTVAID2.value *100)/100) ;
        t3.value = (Math.round(EntPU[3].value * EntQte[3].value * EntTVAID3.value *100)/100) ;
 
 total.value = (Math.round((t1.value *1 + t2.value *1 + t3.value *1 + t4.value *1 + t5.value *1 + t6.value *1 + t7.value *1) *100)/100) ;
 
tva.value = total.value -((EntPU[1].value * EntQte[1].value) + (EntPU[2].value * EntQte[2].value) + (EntPU[3].value * EntQte[3].value));
      }
    }

mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<TR> 
			<TD> <input type="text" name="ArDesc[1]" size="100"/> </TD> <input type="hidden" name="OfLigne" value="1"> 
			<TD> <input type="text" name="EntPU[1]" size="8" onBlur="calcul_form(this)"/> </TD> 
			<TD> <input type="text" name="EntQte[1]" size="5"onBlur="calcul_form(this)"/> </TD> 
			<TD><select name="EntTVAID1" onBlur="calcul_form(this)"> 
				   <option value="1.21">21%</option> 
				   <option value="1.06">6%</option> 
				</select> </TD>
			<TD> <INPUT TYPE="text" NAME="t1" readonly SIZE=8> </TD> 			 
		</TR>
		<TR> 
			<TD> <input type="text" name="ArDesc[2]" size="100" onBlur="soumettre_form()"/> </TD> <input <input type="hidden" name="OfLigne" value="2"> 
			<TD> <input type="text" name="EntPU[2]" size="8" onBlur="calcul_form(this)"/> </TD> 
			<TD> <input type="text" name="EntQte[2]" size="5"onBlur="calcul_form(this)"/> </TD> 
			<TD><select name="EntTVAID2" onBlur="calcul_form(this)"> 
				   <option value="1.21">21%</option> 
				   <option value="1.06">6%</option> 
				</select> </TD>
			<TD> <input type="text" name="t2" readonly size="8"/> </TD> 			 
		</TR>
		<TR> 
			<TD> <input type="text" name="ArDesc[3]" size="100"/> </TD>  <input type="hidden" name="OfLigne" value="3"> 
			<TD> <input type="text" name="EntPU[3]" size="8" onBlur="calcul_form(this)"/> </TD> 
			<TD> <input type="text" name="EntQte[3]" size="5"onBlur="calcul_form(this)"/> </TD> 
			<TD><select name="EntTVAID3" onBlur="calcul_form(this)"> 
				   <option value="1.21">21%</option> 
				   <option value="1.06">6%</option> 
				</select> </TD>
			<TD> <input type="text" name="t3" readonly size="8"/> </TD>

12/02/2013, 09h22
camyo

Je crois que pour t'aider sur ton erreur , tu n'as pas mis le code de la bonne page.

Salut,

Voici un exemple adapté à ton formulaire qui fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <script type="text/javascript">
 
        function calcul_form()
        {
            var fd = document.forms['form1'];
            var total = 0;
            var tva = 0;
            fd['t1'].value = (Math.round(parseFloat(fd['EntPU[1]'].value) * parseInt(fd['EntQte[1]'].value) * parseFloat(fd['EntTVAID1'].value) * 100) / 100);
        }
 
  </script>
</head>
 
<body>
  <form name="form1" id="form1">
    <table>
      <tbody>
        <tr>
          <td><input type="text" name="ArDesc[1]" size="100"></td>
          <td><input type="text" name="EntPU[1]" size="8" /></td>
          <td><input type="text" name="EntQte[1]" size="5" /></td>
          <td>
            <select name="EntTVAID1">
                <option value="1.21">21%</option>
                <option value="1.06">6%</option>
            </select>
          </td>
          <td><input type="text" name="t1" readonly size="8"></td>
        </tr>
      </tbody>
    </table><input type="button" value="Compute" onclick="calcul_form()">
  </form>
</body>
</html>

un petit conseil, le js est case sensitive alors évite dans le DOM au niveau du nommage des contrôles de mélanger des majuscules avec des minuscules... C'est soit l'un soit l'autre et si tu as besoin de séparer les mots tu as le _ (tiret bas)

12/02/2013, 10h41
kiyeko

Ca fonctionne!!
Merci beaucoup c'est sympa de m'avoir consacré un peu de temps! :ccool: