Transformer un paragraphe ou une liste en input

Version imprimable

Bonjour,
J’aurais besoin de votre aide. J’aimerais transformer le deuxième, le quatrième, le sixième paragraphe en input lorsqu’on clique sur le bouton modifier.
Code:

1 2 3 4 5 6 7 <p >Exo 1:</p> <p >3</p> <p >Exo 2:</p> <p>4</p> <p >Exo 3:</p> <p>4</p> <button type="button" >Modifier</button>
J’ai trouvé un code js mais ça transforme en input lorsqu’on clique sur le paragraphe et pas quand on click sur le bouton et je n’arrive pas à l’adapter sur le mien.

Voici le code :
Code:

1 2 3 4 5 6 7 8 9 <input type="text" id="moninput" value="" style="display:none;"/> <span onclick="afficher_input(this)">Coucou</span> <script type="text/javascript"> function afficher_input(t) { document.getElementById('moninput').style.display = ''; document.getElementById('moninput').value = t.innerHTML; } </script>
Voilà ! J'espère quelqu’un pourra m’aider.
Merci.

Un exemple avec des fruits :

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
<!DOCTYPE html>
<html>
<body>
 
<form>
Select a fruit:
<br>
<select id="mySelect" size="4">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<br>
 
<button onclick="myFunction()">Remove selected fruit</button>
 
<script>
function myFunction() {
    var x = document.getElementById("mySelect");
    x.remove(x.selectedIndex);
}
</script>
 
</body>
</html>

Bonjour et bienvenue sur DVP.

Citation:

J’ai trouvé un code js mais ...

cela ne suffit pas il faut essayer de comprendre ce que celui ci fait, ce qui visiblement est ton cas.

TRES souvent le plus simple et de bien savoir ce que tu cherches à faire et de faire correspondre la structure HTML à ton besoin.

Dans ton cas tu pourrais très bien avoir un formulaire « like » comme suit
Code:

1 2 3 4 5 6 7 <fieldset> <legend>Exercice</legend> <p>Exo 1 : <input value="3" disabled></p> <p>Exo 2 : <input value="4" disabled></p> <p>Exo 3 : <input value="5" disabled></p> <p><button type="button" >Modifier</button></p> </fieldset>
les <input> sont mis en disabled pour ne pas être modifié, ils peuvent être stylé pour obtenir une apparence neutre, non input, par exemple :
Code:

1 2 3 4 5 6 7 8 fieldset input { background: #EFEFEF; border: none; font: inherit; } fieldset input:disabled { background: #FFF; }
au final ta solution revient à supprimer l'attribut disabled lorsque tu appuies sur le <button> et ceci se fait en utilisant la méthode removeAttribute(), fonction qui pourrait ressembler à :
Code:

1 2 3 4 5 6 7 8 function removeDisabled() { var oInputs = document.querySelectorAll('input'); var i; var nb = oInputs.length; for (i = 0; i < nb; i += 1) { oInputs[i].removeAttribute('disabled'); } }
et pour l'appel de la fonction il suffit de faire un simple
Code:

1 2 var oBtn = document.querySelector('button'); oBtn.onclick = removeDisabled;
Le fichier simplifié pour test
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>INPUT Disabled</title> <meta name="Author" content="NoSmoking"> <style> fieldset { width: 20em; } fieldset input { background: #EFEFEF; border: none; font: inherit; } fieldset input:disabled { background: #FFF; } </style> </head> <body> <fieldset> <legend>Exercice</legend> <p>Exo 1 : <input value="3" disabled></p> <p>Exo 2 : <input value="4" disabled></p> <p>Exo 3 : <input value="5" disabled></p> <p><button type="button" >Modifier</button></p> </fieldset> <script> function removeDisabled() { var oInputs = document.querySelectorAll('input'); var i; var nb = oInputs.length; for (i = 0; i < nb; i += 1) { oInputs[i].removeAttribute('disabled'); } } var oBtn = document.querySelector('button'); oBtn.onclick = removeDisabled; </script> </body> </html>

Bonjour,

1/ une autre solution : https://codepen.io/jreaux62/pen/BRmYWd

Code:

1
2
3
4
5
6
7
<fieldset>
  <legend>Exercice</legend>
  <p>Exo 1 : <span class="editable">3</span></p>
  <p>Exo 2 : <span class="editable">4</span></p>
  <p>Exo 3 : <span class="editable">5</span></p>
  <p><button type="button" onclick="toggleInput(this)">Modifier ?</button></p>
</fieldset>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var isInput = false; // initialisation : ce ne sont pas des input
function showInput(id) {
  var oInputs = document.querySelectorAll('span.editable');
  var nb = oInputs.length;
  if( !isInput ) // si ce ne sont pas déjà des input, on les rajoute
  {
    for (var i = 0; i < nb; i++) {
     oVal = oInputs[i].innerHTML;
      oInputs[i].innerHTML = '<input type="number" value="'+oVal+'" />';
    }
      isInput = true;
    // on peut aussi masquer le bouton (devenu inutile)
    // id.style.display='none';
  }
}

2/ variante, avec retour possible (afficher / masquer les input) : https://codepen.io/jreaux62/pen/qmVxaW

Code:

1
2
3
4
5
6
7
<fieldset>
  <legend>Exercice</legend>
  <p>Exo 1 : <span class="editable">3</span></p>
  <p>Exo 2 : <span class="editable">4</span></p>
  <p>Exo 3 : <span class="editable">5</span></p>
  <p><button type="button" onclick="toggleInput(this)">Modifier ?</button></p>
</fieldset>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var isInput = false; // initialisation : ce ne sont pas des input
function toggleInput(id) {
  var oInputs = document.querySelectorAll("span.editable");
  var nb = oInputs.length;
  if (isInput) {
    // si ce sont déjà des input, on les remplace par leur valeur
    for (var i = 0; i < nb; i++) {
      oVal = oInputs[i].querySelector("input").value;
      oInputs[i].innerHTML = oVal;
      isInput = false;
      id.innerHTML = "Modifier ?";
    }
  } else {
    // on remplace les valeur par des input
    for (var i = 0; i < nb; i++) {
      oVal = oInputs[i].innerHTML;
      oInputs[i].innerHTML = '<input type="number" value="' + oVal + '" />';
      isInput = true;
      id.innerHTML = "Ne pas Modifier";
    }
  }
}

3/ Cela dit, comment récupérer les valeurs des input s'ils n'ont pas de nom (name) ?
On va donc rajouter des name -> https://codepen.io/jreaux62/pen/mmqXXW

Code:

1
2
3
4
5
6
7
<fieldset>
  <legend>Exercice</legend>
  <p>Exo 1 : <span class="editable" data-name="exo1">3</span></p>
  <p>Exo 2 : <span class="editable" data-name="exo2">4</span></p>
  <p>Exo 3 : <span class="editable" data-name="exo3">5</span></p>
  <p><button type="button" onclick="showInput(this)">Modifier</button></p>
</fieldset>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var isInput = false; // initialisation : ce ne sont pas des input
function showInput(id) {
  var oInputs = document.querySelectorAll('span.editable');
  var nb = oInputs.length;
  if( !isInput ) // si ce ne sont pas déjà des input, on les rajoute
  {
    for (var i = 0; i < nb; i++) {
     oVal = oInputs[i].innerHTML;
     oName = oInputs[i].dataset.name;
      oInputs[i].innerHTML = '<input type="number" name="'+oName+'" value="'+oVal+'" />';
    }
      isInput = true;
    // on peut aussi masquer le bouton (devenu inutile)
    id.style.display='none';
  }
}

07/05/2017, 16h59
diane621

Merci de votre reponse ! :D C'est exactement ce que je voulais faire.