Discussion :

[avenged59]

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 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
<!-- ici ou la personne entrera le nombre de semaine-->
	<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>
	<!--  ici que je voudrais que les semaines apparaissent avec un champs pour que la personne puisse écrire-->
	<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

[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 html :

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

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

Code JS :

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

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.

[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

[Watilin]

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

Oui

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 :

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
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 html :

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

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 :

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

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().

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

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

[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