Menu
Posez votre question Signaler Répondre au sujet

Incrémenter une variable à chaque action JavaScript [Résolu]

aureb09 26 Messages postés mardi 29 décembre 2015Date d'inscription 9 janvier 2018 Dernière intervention - 28 déc. 2017 à 15:37 - Dernière réponse : aureb09 26 Messages postés mardi 29 décembre 2015Date d'inscription 9 janvier 2018 Dernière intervention
- 3 janv. 2018 à 17:45
Javascript Posez votre question Signaler Répondre au sujet
Bonjour à tous !

Je développe un générateur de devis et facture en PHP et JavaScript. Le PHP me permet de générer un PDF et d'enregistrer dans la BDD ce dernier. Le JavaScript me permet de calculer les prix TTC, prix total, ect. en dynamique (AJAX / Vu.js).

J'ai mis en place un script JS de façon a pouvoir ajouté des lignes permettant d'ajouté un produit au devis ou à la facture. Tout cela est fonctionnel, cependant, de la façon que j'ai codé, le "name" des input est à chaque fois le même, ce qui rend impossible la récupération des données en PHP. Voici mon code :

HTML : 
<table class="table" width="800" id="app">
     <thead>
    <tr>
      <th>Description</th>
      <th>Qte</th>
      <th>Prix unitaire</th>
      <th>Total HT</th>
      <th>Total TTC</th>
      <th>Actions</th>
    </tr>
     </thead>
     <tbody>
    <tr v-for="(row, index) in rows">
        <td><textarea name="description[0]" value="" /> </textarea></td>
      <td><input name="qte[0]" class="text-right" type="text" v-model="row.quantity"></td>
      <td><input name="prixuni[O]" class="text-right" type="text" v-model="row.price"> €</td>
      <td><input name="prixht[0]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><input name="prixttc[0]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><a href="#!" @click.prevent="add(index)">Ajouter</a> <a href="#!" @click.prevent="del(index)">Supprimer</a>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Total TTC</td>
      <td><input name="totalttc" class="text-right" type="text" v-model="total"> €</td>
    </tr>
     </tbody>
   </table>


JS : 
  var name=0;
 new Vue({
  el: "#app",
   data: {
  rows: [{
   quantity: 0,
    price: 0,
    amount: 0
  }],
  total: 0
   },
   methods: {
  add(index) {
   this.rows.splice(index + 1, 0, {
   quantity: 0,
   price: 0,
   amount: 0,
    })
  },
  del(index) {
   this.rows.splice(index, 1)
  }
   },
   watch: {
  rows: {
   handler() {
   this.rows.map(row => row.amount = Math.round(row.price * row.quantity * 100) / 100)
   this.total = Math.round(this.rows.reduce((accumulator, current) => accumulator + current.amount, 0) * 100) / 100
    },
    deep: true
  }
   }
 })


Lors du clique sur "ajouter", le JS ajoute une ligne mais copie le name de tous les input, à savoir qte[0], prixuni[0], etc.
J'aimerais qu'à chaque ajout de ligne, le name devienne qte[1], prixuni[1], ... puis qte[2], prixuni[2], ... si on ajoute une troisième ligne.

Merci d'avance pou vos réponses !
Afficher la suite 

7 réponses

Répondre au sujet
Signaler Commenter la réponse de jordane45
jordane45 20601 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 avril 2018 Dernière intervention - Modifié par jordane45 le 3/01/2018 à 07:54
+1
Utile
5
Bonjour,

Pourquoi ne pas simplement laisser le code gérer les index de tes name ?
Juste en écrivant : 
    <tr v-for="(row, index) in rows">
        <td><textarea name="description[]" value="" /> </textarea></td>
      <td><input name="qte[]" class="text-right" type="text" v-model="row.quantity"></td>
      <td><input name="prixuni[]" class="text-right" type="text" v-model="row.price"> €</td>
      <td><input name="prixht[]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><input name="prixttc[]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><a href="#!" @click.prevent="add(index)">Ajouter</a> <a href="#!" @click.prevent="del(index)">Supprimer</a>
      </td>
   </tr>


Sinon... tu peux toujours essayer de les mettre à jour via du code...
(je n'ai pas le temps de chercher.. mais tu pourrais partir sur un truc du genre ) 
Vue.config.debug = true

 var name=0;
 new Vue({
  el: "#app",
   data: {
  rows: [{
   quantity: 0,
    price: 0,
    amount: 0
  }],
  total: 0
   },
   methods: {
    updateRowNames(row){
        console.log(row);
        //la suite du code ici...        
    }, 
  add(index) {
   this.rows.splice(index + 1, 0, {
   quantity: 0,
   price: 0,
   amount: 0,
    })
    
    this.updateRowNames(index);
  },
  del(index) {
   this.rows.splice(index, 1)
  }
   },
   watch: {
  rows: {
   handler() {
   this.rows.map(row => row.amount = Math.round(row.price * row.quantity * 100) / 100)
   this.total = Math.round(this.rows.reduce((accumulator, current) => accumulator + current.amount, 0) * 100) / 100
    },
    deep: true
  }
   }
 })


Cordialement, 
Jordane                                                                 
Cette réponse vous a-t-elle aidé ?  
Signaler Commenter la réponse de aureb09
aureb09 26 Messages postés mardi 29 décembre 2015Date d'inscription 9 janvier 2018 Dernière intervention - 3 janv. 2018 à 01:11
Bonjour, Merci pour ta réponse !

Tu parles de quel code qui pourrait gérer les index ? PHP ou JS ?

Ta deuxième proposition est celle que j'envisagais mais je t'avoue que je ne vois pas trop comment coder ça sachant que je ne suis pas un expert en JS...

J'avais penser sinon réaliser l'incrémentation en PHP mais vu que l'ajout des inputs est en JS, même si je définit une variable $i, mon script copiera toujours la dernière valeur de i
Signaler Commenter la réponse de jordane45
jordane45 20601 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 avril 2018 Dernière intervention > aureb09 26 Messages postés mardi 29 décembre 2015Date d'inscription 9 janvier 2018 Dernière intervention - 3 janv. 2018 à 07:55
Pourquoi ne pas appliquer la première solution ?
Signaler Commenter la réponse de aureb09
aureb09 26 Messages postés mardi 29 décembre 2015Date d'inscription 9 janvier 2018 Dernière intervention - 3 janv. 2018 à 13:20
Oui mais je vois pas trop comment le code peut gérer l'incrémentation en mettant juste mes names sous le format qte[], prixht[], ... ? Comment pensais-tu faire exactement ?
Signaler Commenter la réponse de jordane45
jordane45 20601 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 23 avril 2018 Dernière intervention - 3 janv. 2018 à 13:50
Ton formulaire... Il est fait pour faire un submit php ensuite non ???
Si oui.. testes et tu comprendras
Signaler Commenter la réponse de aureb09
aureb09 26 Messages postés mardi 29 décembre 2015Date d'inscription 9 janvier 2018 Dernière intervention - 3 janv. 2018 à 17:45
Ah oui je vois et effectivement ça marche ! Je te remercie !

J'ai donc récupéré mes champs avec 
$_POST['qte'][0]
et ceux, pour toutes les autres variables. J'ai mis tous ça dans une boucle for pour récupérer l'ensemble du tableau.
Commenter la réponse de jordane45
Signaler Commenter la réponse de forum92
forum92 179 Messages postés lundi 6 juillet 2015Date d'inscription 1 avril 2018 Dernière intervention - 29 déc. 2017 à 19:21
-1
Utile
Bonjour,
Si tu souhaites un tableau qui s'incrémente, il faut une variable : exemple: 

//pour un tableau associatif 
$tab1=  array("blablaKey"=>"blablaValue", ...);
foreach( $tab1 as $ligne){
    echo " <td><input name=' ".$ligne.' " ... ></td>";
}

//ou un tableau normal avec un for
for($i = 0, $i < $tab1.lengh , $i++){
 
    echo " <td><input name=' ".$tab1[i].' " ... ></td>";
}


tout dépend de ce que contienne tes tableaux .
tu as l'air d'avoir beaucoup de tableau , je te conseillerai donc si tu travail en php objet de crée un objet contenant toutes ces caractéristiques . Sinon u for simple serait plus adapté , je pense.
Commenter la réponse de forum92
Posez votre question