Discussion :

[jfsylbe]

Bonjour à tous,

Meilleur voeux 2022

Je suis actuellement occupé à créer un site en PHP, j'ai dans ce site une liste déroulante type SELECT..

A chaque sélection dans cette liste, je prends le contenu affiché/sélectionné pour l'ajouter un champ type input, toutefois j'aimerais un saut de ligne à chaque ajout

Voici mon souci : le contenu s'ajoute bien dans mon champs mais je ne parviens pas à ajouter le saut de ligne dans le "onchange:...."

J'ai testé la basile <br>, </br>, /n, //n, sans succès et je ne suis pas certain de la bonne syntaxe...

Merci pour votre aide


Voici mon code :

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
<label>Choisir une/des panne(s):</label>
<select id="list" style="width:150px" onchange="document.getElementById('displayValue').value=document.getElementById('displayValue').value+this.options[this.selectedIndex].text;document.getElementById('displayValue').value = document.getElementById('displayValue').valeur.replace(code+'\r\n', '');">
    <option value="">Selectionner panne</option>
    <option value="Radio HS">Radios HS</option>
    <option value="Antenne cassée">Antenne cassée</option>
    <option value="Ecran HS">Ecran HS</option>
    <option value="Problème d'émission">Problème d'émission</option>
    <option value="Problème de réception">Problème de réception</option>
    <option value="Pas de service">Pas de service</option>
    <option value="Bouton rotatif cassé">Bouton rotatif cassé</option>
    <option value="Bouton latéral HS">Bouton latéral HS</option>
    <option value="Baterie HS">Batterie HS</option>
    <option value="Haut parleur HS">Haut parleur HS</option>
    <option value="Micro HS">Micro HS</option>
 
</select>
<input type="text" name="displayValue" id="displayValue" style="width:183px;height:123px">

[Doksuri]

developer.mozilla.org/fr/docs/Web/HTML/Element/Input/text

Les éléments <input> dont l'attribut type vaut "text" permettent de créer des champs de saisie avec du texte sur une seule ligne.

si tu veux autoriser plusieurs lignes, tu devras passer par un <textarea> developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea

[jfsylbe]

Merci beaucoup

Sans vouloir abuser de votre gentillesse, le saut de ligne je dois utilise </br> ou //n ?

mon code ne semble pas fonctionner...j

Code html :

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

<select id="list" style="width:150px" onchange="document.getElementById('displayValue').value=document.getElementById('displayValue').value+this.options[this.selectedIndex].text;document.getElementById('displayValue').value = document.getElementById('displayValue').valeur.replace(code+'\r\n', '');">

[SpaceFrog]

Essaye

Code :

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

.replace(code+'\\r\\n', '')

[jfsylbe]

Merci mais ça ne fonctionne pas..

pas de saut de ligne ....

[jreaux62]

Bananier 2022,

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
<p>
  <label>Choisir une/des panne(s):</label>
  <select id="list" style="width:150px" >
    <option value="">Selectionner panne</option>
    <option value="Radio HS">Radios HS</option>
    <option value="Antenne cassée">Antenne cassée</option>
    <option value="Ecran HS">Ecran HS</option>
    <option value="Problème d'émission">Problème d'émission</option>
    <option value="Problème de réception">Problème de réception</option>
    <option value="Pas de service">Pas de service</option>
    <option value="Bouton rotatif cassé">Bouton rotatif cassé</option>
    <option value="Bouton latéral HS">Bouton latéral HS</option>
    <option value="Baterie HS">Batterie HS</option>
    <option value="Haut parleur HS">Haut parleur HS</option>
    <option value="Micro HS">Micro HS</option>
 
  </select>
</p>
<p>
  <textarea name="displayValue" id="displayValue" style="width:183px;height:123px"></textarea>
</p>

Code js :

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

1
2
3
4
5
6
7
8
window.addEventListener("DOMContentLoaded", (event) => {
  "use strict";
  const list = document.getElementById('list');
  const displayValue = document.getElementById('displayValue');
  list.addEventListener('change', (e) => {
    displayValue.value += list.value + "\n";
  });
});

[jfsylbe]

merci beaucoup !!

la solution de jreaux62 fonctionne parfaitement.

Encore merci pour votre aide, je marque le post comme résolu !!!