Boucle dans un formulaire

Version imprimable

Bonjour à tous,

Voila mon petit soucis, je suis en train de faire un formulaire en HTML/CSS(bootstrap) et j'aimerais que dans ce formulaire la personne qui le remplit rentre un nombre de semaines et en fonction du nombre rentré en dessous il s'affiche "semaine 1", "semaine 2" etc les uns en dessous des autres et que la personne puisse écrire des précisions pour chacune des semaines.

je vois pas trop comment écrire ma fonction et l'appliquer avec un onkeydown="maFonction()" par exemple.

voici mon
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20  <div class="row"> <div class="col-xl-6"> <h5>Nombres de semaines: </h5> <input type="text" class="form-control semaines" name="nombre" id="nombre" required> </div> <div class="col-xl-6"> <h5>Compétences mobilisées</h5> </div> </div>  <div class="row"> <div class="col-xl-6"> <input id="semaine" class="form-control" aria-label="With textarea" required> </input> </div> <div class="col-xl-6"> <textarea class="form-control" aria-label="With textarea"></textarea> </div> </div>
J'espère avoir été clair et merci d'avance pour vos réponse :)

04/07/2019, 13h29
Watilin
Préfère onkeyup à onkeydown, la différence se remarque quand on garde une touche de clavier enfoncée. Tu peux aussi utiliser l’évènement plus récent oninput.

Lorsque tu appelles une fonction depuis un attribut on*, ta fonction reçoit comme contexte this l’élément sur lequel l’évènement a eu lieu.

Code:

<input type="text" class="form-control semaines" name="nombre" id="nombre" required oninput="maFonction()" />
Code:

1 2 3 4 5 function maFonction() { "use strict"; // voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode console.log(this); // affiche l’input dans la console }
Pour le reste de ta question, il faut d’abord que tu nous donnes une information importante : utilises-tu jQuery ? Après tout, jQuery n’est pas obligatoire avec Bootstrap, et tu n’as pas posté ta question dans le forum jQuery, donc le doute est permis.

Dans les grandes lignes, l’idée est de :
1. récupérer le nombre n saisi dans l’input ;
2. faire une boucle for avec n itérations ;
3. à chaque itération, créer les éléments que tu veux insérer et les ajouter à un fragment de document ;
4. à la fin de la boucle, insérer le fragment à l’endroit voulu dans le DOM.
Voir MDN : DocumentFragment et jQuery : Append Outside of Loops.
04/07/2019, 13h41
avenged59

Non je n'utilise pas jQuery je pense que je devrais mieux maitriser Javascript avant de me pencher sur jQuery tu crois pas?

Du coup il est possible de faire une boucle comme tu as dis et de mettre a l'intérieur des "document.createElement" etc pour créer mes éléments?
tu penses que ca serait plus simple a faire avec jQuery?

Merci pour tes conseils et tes pistes :)

Citation:

Envoyé par avenged59

Non je n'utilise pas jQuery je pense que je devrais mieux maitriser Javascript avant de me pencher sur jQuery tu crois pas?

Oui :)

Citation:

Envoyé par avenged59

Du coup il est possible de faire une boucle comme tu as dis et de mettre a l'intérieur des "document.createElement" etc pour créer mes éléments?

Oui ! Un truc comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function maFonction() { "use strict"; // comme l’input est de type texte, on convertit explicitement la valeur // en nombre pour éviter les mauvaises surprises const n = parseInt(this.value, 10); const fragment = document.createDocumentFragment(); for (let i = 1; i <= n; i++) { const p = document.createElement("p"); const textNode = document.createTextNode(`semaine ${i}`); const textarea = document.createElement("textarea"); p.appendChild(textNode); p.appendChild(textarea); fragment.appendChild(p); } document.body.appendChild(fragment); }
J’ai utilisé la syntaxe de chaîne ``, pas de panique si tu ne la connais pas, c’est très intuitif. Les parties entre ${} sont simplement remplacées par leurs valeurs à l’exécution. `semaine ${i}` est équivalent à "semaine " + i. Au cas où, la doc : Littéraux de gabarits.

Pour que l’exemple reste concis, j’insère une structure HTML très simple :
Code:

1 2 3 4 5 <p> Semaine 1 <textarea></textarea> </p> ...
Et le tout est inséré à la fin du <body>.

Bien entendu, en situation réelle, tu veux pouvoir insérer à un endroit précis, pour ça il faut trouver l’endroit à l’aide de getElementById() ou querySelector(), puis utiliser une méthode d’insertion :

appendChild() ;
insertBefore() ;
replaceWith().

Malheureusement, la très pratique méthode insertAdjacentElement() n’est pas compatible avec DocumentFragment. Garde-la sous le coude pour les cas où tu as simplement besoin de faire une insertion ponctuelle ;)

insertBefore(), qui fait partie du DOM niveau 1, est garantie compatible même sous les très vieux navigateurs. Mais elle est un peu moins pratique car elle nécessite un second argument. Par exemple, pour insérer au début du receveur, on écrit ceci :

Code:

receveur.insertBefore(fragment, receveur.firstChild);

replaceWith() n’est pas compatible avec IE (avant Edge), à toi de voir si tu choisis de supporter ce navigateur ou pas. Il y a également une version plus récente de appendChild(), append(), qui apporte des facilités mais qui n’est pas compatible avec Edge.

(Note : j’ai oublié de vérifier la compatibilité de oninput dans mon message précédent. Si tu veux supporter Edge, utilise onkeyup à la place.)

Un mot à propos de innerHTML : on trouve cette propriété dans un grand nombre d’exemples de code, et tu en as sans doute déjà entendu parler. À mon avis, rien n’a jamais justifié son utilisation (à part peut-être la flemme), et j’explique pourquoi dans ce message. En dernier recours, il y a insertAdjacentHTML().

Citation:

Envoyé par avenged59

tu penses que ca serait plus simple a faire avec jQuery?

Pas plus simple, pas plus compliqué, juste différent.

04/07/2019, 16h42
avenged59

merci beaucoup pour toutes tes explications je vais prendre ton code et bosser pour bien le maitriser et tout comprendre et au passage jeter un oeil a jQuery lol