Incrémenter une variable à chaque action JavaScript
Résolu
aureb09
Messages postés
44
Statut
Membre
-
aureb09 Messages postés 44 Statut Membre -
aureb09 Messages postés 44 Statut Membre -
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 :
JS :
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 !
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 !
A voir également:
- Javascript incrémenter compteur
- Compteur électrique - Guide
- Compteur de contractions - Télécharger - Santé & Bien-être
- Telecharger javascript - Télécharger - Langages
- Compteur point fléchette excel - Télécharger - Sport
- Compteur cyber café gratuit - Télécharger - Outils professionnels
2 réponses
Bonjour,
Pourquoi ne pas simplement laisser le code gérer les index de tes name ?
Juste en écrivant :
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 )
Cordialement,
Jordane
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
Bonjour,
Si tu souhaites un tableau qui s'incrémente, il faut une variable : exemple:
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.
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.
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
Si oui.. testes et tu comprendras
J'ai donc récupéré mes champs avec et ceux, pour toutes les autres variables. J'ai mis tous ça dans une boucle for pour récupérer l'ensemble du tableau.