Écrire un formulaire qui change

Version imprimable

08/08/2026, 20h16
noradan

Écrire un formulaire qui change

Bon alors je ne sais pas si je vais réussir à me faire comprendre
Je voudrais faire un formulaire avec un label "fruits" et un champs texte où on écrit par exemple "cerise"
mais si on fait "enter", ça ouvre un nouveau label "fruits" avec un nouveau text etc jusqu'au moment où l'on envoie.

Je n'ai rien trouvé sur la toile.
Merci
08/08/2026, 20h41
casperweb

Bonsoir,
Détecter l’appuie sur la touche Enter (sinon le formulaire risque d'être soumis) et générer un nouveau champ via fonction JS personnelle; puis injecter le tout dans le dom au bon endroit.

Citation:

Je n'ai rien trouvé sur la toile.

Humm Pas sur que tu aies cherchez longtemps. Regarde sur codepen cela m’étonnerais qu'il n'y aie pas des exemples.

PS : juste te dire que sur codepen il y a des exemples à foison.

En voici un parmi d'autre en vanilla (sans angular et sans jQuery) :
https://codepen.io/aggressivetea/pen/MWoeKaM
10/08/2026, 16h42
noradan

Merci je vais essayer de me débrouiller avec ça. En plus un bouton "add" est judicieux pour mon usage.

J'ai en gros la mise en page qui me va mais j'imagine que le JS n'est pas optionnel...
En fait, ça se fait avec du java or je n'y connais mais alors rien de rien, de nada, du tout

Où dois-je mettre le code ?

et surtout qu'est-ce que je dois changer?
Par exemple il y a un array qui a l'air de s'appeler "guests". Ce nom est défini où ? Dans la "legend" ?
Ensuite le numéro ou le nom de la colonne... j'imagine que je le remplace par l'identifiant de mon input ... et dans mon dos php fait le job...

J'ai quand même besoin de quelques indications pour adapter cet exemple. Où pourrais-je trouver ça ?
10/08/2026, 17h18
casperweb

Bonjour, Non ce n'est pas du JAVA:ptdr: mais du JavaScript, ce n'est pas du tout la même chose!! Regarde les premiers paragraphe sur wikipédia de ses deux langages pour en savoir un peux plus.

AMHA il serait long et fastidieux de te dire quoi changer et ou, surtout si tu ne comprend rien au langage. Je préfère te dire de mettre ce projet de coté pour l'instant et de lire un cours sur le JavaScript. Ce serait plus profitable pour toi. Sinon je devrais écrire moi même le script ce qui n'arrangera pas ton apprentissage. :?

Il y a plein de tuto disponible MDN, openclassrooms, grafikart, nouvelle techno, Pierre Giraud...... et j'en passe.
Je te conseille de commencer par fr.javascript.info et de compléter par la documentation MDN qui est très bien faite.
YouTube foisonne de vidéos sur des tuto JS. Cette play liste en en rapport avec javascript.info https://www.youtube.com/playlist?lis...AZ_p3bR6WBbATq (je ne retrouve plus les vidéos en français)

Commence par de petites choses avant de voir grand.

Oui, oui pardon Javascript

En fait, j'ai un peu honte de l'avouer amis en posant la question dans google, l'IA m'a donné directement une réponse très simple donc très compréhensible et qui marche

Code:

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
 
<fieldset>
    <legend>Lyrics</legend>	
    <div id="champs">
        <div class="bloc">
		<ul> <li>   <label>   Titre :
                <input type="text" name="titre[]" />
            </label>
		<button type="button" onclick="supprimerBloc(this)">
                Supprimer
            </button>
		</li>
		<li>             <label>                  Parole :
                <textarea id="lyricsmorso" name="parole[]"></textarea>
            </label>
		</li> </ul>
           </div>
    </div>
    <button type="button" onclick="ajouterBloc()">    Ajouter     </button>
    <button type="submit">       Enregistrer     </button>
 
</form>
 
<script>
function ajouterBloc() {
    const container = document.getElementById("champs");
 
    const bloc = document.createElement("div");
    bloc.className = "bloc";
 
    bloc.innerHTML = `
	<ul> <li> <label> Titre :
            <input type="text" name="titre[]" />
        </label> 		</li>
		<li>
        <label> Parole :  <textarea name="parole[]"></textarea> </label>
 
        <button type="button" onclick="supprimerBloc(this)"> Supprimer </button>
		</li>
	</ul>
    `;
 
    container.appendChild(bloc);
}
 
function supprimerBloc(bouton) {
    bouton.parentElement.remove();
}
</script>

15/08/2026, 19h04
casperweb
Oui sauf que ton bouton supprimer ne supprime que son parent c'est à dire le champ textarea et pas le bloc qui à été ajouté.

Je modifierais le fonction supprimerBloc() comme ceci:
Code:

1 2 3 function supprimerBloc(bouton) { bouton.parentElement.parentElement.parentElement.remove(); }
Bravo si tu comprends ce code sans aucune connaissance en JS.