Ajouter champ à formulaire

**Zephire** · 25/06/2018, 20h36

Je reprends un sujet bien célèbre mais que je dois aborder parce que, bien que non codeur javascript à la base, je dois utiliser ce langage.
Il s'agit du "coup classique" où l'on rajoute un champ dans un formulaire à chaque fois que l'on clique sur le + .
Je vous mets le code dont j'ai repris les principes ici-même. Le HTML comprend les balises Bulma. Si ça vous dérange, je les dégagerai.
Pour l'instant, quand je clique sur l'icone "+" , rien ne se passe.

Code html :

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
<div class="field is-horizontal" id="photosForm">
                <div class="field-label is-normal">
                    {{ form_label(form.picture, 'Image(s)') }}
                </div>
                <div class="field-body" id="loadMoreFiles">
                    <div class="control">
                        <div class="file">
                            <label class="file-label">
                                {{ form_widget(form.picture) }}
                                <span class="file-cta">
                                  <span class="file-icon">
                                    <i class="fas fa-upload"></i>
                                  </span>
                                  <span class="file-label">
                                    Choisir un fichier
                                  </span>
                                </span>
                            </label>
                        </div>
                    </div>
                    <span class="icon is-medium"><i class="far fa-plus-square" onclick="newField()" id="input"></i></span>
                </div>
            </div>

Puis voici le Javascript:

Code :

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

1
2
3
4
5
6
7
8
/* Load more images */
function newField() {
    var obj = document.getElementById('loadMoreFiles');
    var field = obj.cloneNod(true);
    inputs = field.getElementById('input');
    for (var i =0; i < inputs.length; ++i) inputs[i].value=5;
    document.getElementById('photosForm').appendChild('loadMoreFiles');
}

Précision: la boucle for permet normalement d'autoriser 5 fois l'action.
Si vous voyez mon erreur quelque part, j'apprécierais un coup de main. Merci.