Discussion :

[baguiweb]

Bonjour à tous, (ou bonsoir)

J'ai un petit script jquery qui me permet de cloner un div avec son contenu (4 champs input text).
Tous fonctionne bien sauf que j'aimerais que la clé du tableau s'incrémente automatiquement.
Merci de votre aide

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
 
// Ce que je souhaite en retour POST
Array
(
    [0] => Array
        (
            [name] => encart 1
            [succursale1] => 54
            [succursale2] => 454
            [succursale3] => 5465
        )
[1] => Array
        (
            [name] => encart 2
            [succursale1] => 156
            [succursale2] => 5643
            [succursale3] => 150
        )
 
)
 
 
// Formulaire avec le DIV qui est cloné en jquery
<form method="post" action="traitement.php">
        <div class="encart">
<ul>
<li><input type="text" name="encarts[0][name]" value=""/> Encart</li> // nom différent à chaque clonage
<li>Entreprise 1 <input type="text" name="encarts[0][entreprise1]"</li> // quantité
<li>Entreprise 1 <input type="text" name="encarts[0][entreprise1]"</li> // quantité
<li>Entreprise 1 <input type="text" name="encarts[0][entreprise1]"</li> // quantité
</ul>
        </div>
        <a id="add" href="javascript:;">Add</a>
        <a href="javascript:;" title="Supprimer" class="del" rel="encart">Supprimer</a>
        <input type="submit" value="ok"/>
    </form>
 
jQuery(function() {
 
    $("#add").click(function(){
 
        var form = $(this).closest('form');
        var encarts = form.find('.encart');
 
        var firstEncart = $(encarts[0]);
        var lastEncart = $(encarts[n-1]);
 
        var clonedEncart = firstEncart.clone();
 
        // Pour chaque input clonés
        clonedEncart.find(':input').each(function() {
            // On vide la valeur
            $(this).filter(':text').val('').end()
        })
 
        $(this).attr("name", "encarts["+n+"]");
        clonedEncart.insertAfter(lastEncart).hide().fadeIn('slow');
 
        // On ajoute le le lien de suppression
        $(".del").fadeIn("fast");
 
    })
 
    $(".del").click(function (){
        var encartLast = $(".encart:last");
        encartLast.remove();
        // S'il y a moins de 2 articles (autrement dit un seul) on cache le bouton supprimer.
        if ( $(".encart").length < 2 ) { $(".del").fadeOut("fast"); }
 
    });
 
 
})

[baguiweb]

J'ai trouvé la réponse en cherchant

il suffiet de rajouter ce petit bout de code lorsque l'on boucle sur chaque champ
et cela incrémente bien tous les champs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
...
this.name = this.name.replace(/\[(\d+)\]/,
    function(str,p1){
        return '[' + (parseInt(p1,10)+n) + ']';
    });
...