IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

formulaire avec ajout de champs et calcul


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    Février 2011
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Bâtiment

    Informations forums :
    Inscription : Février 2011
    Messages : 8
    Par défaut formulaire avec ajout de champs et calcul
    bonjour je cherche depuis plus d'un mois comment resoudre mon probleme.
    j ai un formulaire avec ajout de champs( ligne avec 4 champs) et je voudrai calculer la valeur de 2 champs par ligne-
    si quelque un a une idée c est avec grand plaisir

    voici le liens du formulaire http://test.i-creation.ch/total.php



    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    <script type="text/javascript">
    	$(document).ready(function(){	
    		$("#debut").datepicker();
    		$('#blocs').sheepIt({
    			separator: '',
    			allowRemoveLast: true,
    			allowAdd: true,
    			maxFormsCount: 20,
    			minFormsCount: 0,
    			iniFormsCount: 0,
    			indexFormat: '__index1__'
    		});
     
    		$('#blocs2').sheepIt({
    			separator: '',
    			allowRemoveLast: true,
    			allowAdd: true,
    			maxFormsCount: 20,
    			minFormsCount: 0,
    			iniFormsCount: 0,
    			indexFormat: '__index2__'
    		});
    		$('#blocs3').sheepIt({
    			separator: '',
    			allowRemoveLast: true,
    			allowAdd: true,
    			maxFormsCount: 20,
    			minFormsCount: 0,
    			iniFormsCount: 0,
    			indexFormat: '__index3__'
    		});
     
     
    	});
     
     
    var i;
    var total = 0;
     
    // Pour i allant de 1 à 20, par pas de 1
    // on additionne i à la variable total
    for( i=0; i<=20; i=i+1 )
    {
    	total = total + i;
    }
     
     
    function calcul(total,prix,surface)
    { // on se limite à un prix avec un taux de TVA et des frais de port
    x=document.getElementById(prix(i));p=(1*x.value); // le prix
    x=document.getElementById(surface(i));t=(1*x.value); // le taux de TVA
    // les frais de port (boucle car bouton radio)
     
    r=(p*t); // On calcule
    x=document.getElementById(total(i));x.value=r; // On affecte
    }
    </script>
     
     
     
    <form name="frm" method="post" enctype="multipart/form-data" action="pdf2.php">
    <p class="titre">Coordonnées client</p>
    <fieldset id="coordonnees">
      <p id="sex"><label>Sex : </label>
        <input type="radio" name="sex" value="M." />M.
        <input type="radio" name="sex" value="Mlle" />Mlle
        <input type="radio" name="sex" value="Mme" />Mme
      </p>
      <label>Nom : </label>
        <input type="text" name="nom" size="30" /><br />
      <label>Adresse : </label>
        <input type="text" name="adresse" size="30" /><br />
      <label>Code postal : </label>
        <input type="text" name="cp" size="30" /><br />
      <label>Ville : </label>
        <input type="text" name="ville" size="30" /><br />
    	<label>Date : </label>
        <input name="date" type="text" id="debut" class="date_input" value="" size="30"/><br />
    </fieldset>
     
     
    <p class="titre">Préparation</p>
    <fieldset id="facture">
     
     
    		<div id="blocs">
    			<div id="blocs_template">
     
     
     
     
    			<label class="1">Piece: </label>
    				<select class="selection" name="piece[__index1__]">
    					<option value="">--select--</option>
    					<option value="Hall">Hall</option>
    					<option value="Cuisine">Cuisine</option>
     
    				</select>
     
     
    					 Travail
     
    					<select class="selection" name="tt[__index1__]">
    					<option value="">--select--</option>
    					<option value="préparation">préparation</option>
    					<option value="Platres">Platres</option>
    					<option value="peinture">peinture</option>
    					<option value="isolation">isolation</option>
    					<option value="finition">finition</option>
    					<option value="faux-plafont">faux-plafond</option>
     
    				</select>
     
    				M ²<input type="text" name="surface(i)" id="surface" onBlur="calcul('total(i)','prix(i)','surface(i)')" value="0"  size="10" />
    		   Prix M ²<input name="prix(i)" id="prix" onChange="calcul('total(i)','prix(i)','surface(i)')" size="10" />
    			     Total: <input id="total" type="text" name="total(i)" readonly="true">
     
     
     
     
     
     
    			</div>
    			<div id="blocs_noforms_template"></div>
    			<div id="blocs_controls">
    				<button id="blocs_add">Ajouter</button>
    				<button id="blocs_remove_last">Supprimer</button>
    			</div>
    		</div>

  2. #2
    Membre éprouvé
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Décembre 2010
    Messages
    140
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Décembre 2010
    Messages : 140
    Par défaut
    Salut,

    j'ai envie de jouer ce soir , alors je réponds un peu rapidement

    avec cette ligne dans ton document.ready

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setInterval('monCalcul()',1000);
    et cette fonction,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    function monCalcul()
    {
    	$('#blocs div').each(
    		function()
    		{
    			var prix = ( isNaN ( $('#prix',this).val() ) ) ? 0 : $('#prix',this).val() ;
    			var surface = ( isNaN ( $('#surface',this).val() ) ) ? 0 : $('#surface',this).val() ;
    			//console.log(prix + '|' + surface);
    			$('#total',this).val( parseFloat( prix ) * parseFloat( surface ) );
    		}
    	);
    }
    ton calcul marche comme tu veux je pense. il reste à gérer le cas des NaN.

    PS : encode tes fichiers en utf8 si tu veux éviter les problèmes d'accents dans les navigateurs.

  3. #3
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    Février 2011
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Bâtiment

    Informations forums :
    Inscription : Février 2011
    Messages : 8
    Par défaut
    hello merci ca marche a part le NAN qui s inscrit dans la case total

    mais je capte pas comment ca marche ... lol

    mais c est un super bon debut merci encore
    reste plus qu a faire l addition de tout les totaux


    tu joues a quoi ? lol

  4. #4
    Membre éprouvé
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Décembre 2010
    Messages
    140
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Décembre 2010
    Messages : 140
    Par défaut
    Re,

    j'ai ajouté un commentaire au dessus ^.

    Comment ça marche :
    j'ai fait une fonction qui est appelée toutes les secondes (le setInterval)

    cette fonction parcours toutes les divs (les lignes de 4 input) de ta div blocs,
    (le .each ) et prend la valeur de l'input prix et celui de l'input surface.
    ça teste si ce sont des nombres, ou ça donne la valeur 0 par défaut.
    quand on a le prix et la surface (que je récupère avec des conditions ternaires)
    a = ( 5 > 2 ) ? vrai : faux ;
    ce sont des if concis.
    Ensuite, j'attribue la valeur calculée à l'input de résultat. le each s'occupe de reproduire tout ce calcul sur l'ensemble de ton formulaire toutes les secondes.

  5. #5
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    Février 2011
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Bâtiment

    Informations forums :
    Inscription : Février 2011
    Messages : 8
    Par défaut
    Bon je doit dire que c est top ce que tu as fait
    Mais la si je veut faire une addition de tout les totaux
    Je suis perdu . Je pensais qu avec un incrément cela
    Aurai été plus facile ... Mais je ne suis qu un néophyte .


+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Calcul automatique avec ajout de champs de formulaire
    Par spawns dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 23/05/2015, 12h47
  2. ouverture formulaire avec affectation de champ
    Par david87 dans le forum IHM
    Réponses: 6
    Dernier message: 30/04/2008, 16h21
  3. Formulaire avec nombre de champ variable
    Par david87 dans le forum IHM
    Réponses: 0
    Dernier message: 21/04/2008, 10h16
  4. Formulaire avec nombre de champs dynamique
    Par kodo dans le forum Struts 1
    Réponses: 1
    Dernier message: 21/01/2008, 10h07
  5. [MySQL] Formulaire avec vérification des champs
    Par iwanow dans le forum PHP & Base de données
    Réponses: 6
    Dernier message: 26/01/2007, 18h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo