Remplacement de texte par l'utilisateur

**ithonet** · 16/05/2013, 15h47

Bonjour,

Voilà je suis archi débutante en JS/jQuery et là j'ai un souci "d'expression"…
Je n'arrive pas à formaliser une requête convenable dans Google pour chercher la bonne fonction ! :s
Je réalise l'intégration d'une application Web et je voudrais permettre à l'utilisateur de modifier le contenu d'un H2 en cliquant sur le bouton modifier.
Après avoir cliqué sur ce bouton, le H2 se transformerait en input de type texte que l'utilisateur remplirait et en validerait la saisie grâce au bouton modifier se transformerait en valider.

Code html :

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

1
2
3
4
<section id="TitreRecette">
<h2>Truites à la champenoise</h2>
<p class="small"><input class="bouton" id="modif" name="modif" for="modif" type="submit" value="modifier"></p>
</section>

Est-ce que vous avez une idée de la structure HTML (bouton et champs cachés) et des fonctions que je dois utiliser ?

**Periah** · 17/05/2013, 11h34

Une solution est de mettre ton H2 dans une div et de changer le contenu de la div quand l'utilisateur clique sur le H2.

Et bien sûr, tu mets le bouton submit en dehors de cette div...

Ca donne quelque chose comme ça :

Code html :

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

1
2
3
4
5
<DIV id='H2AChanger'>
<section id="TitreRecette">
<h2 onclick='changeContenu() ;'>Truites à la champenoise</h2>
</section>
</DIV>

Code javascript :

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

1
2
3
4
function changeContenu()
{
document.getElementById('H2AChanger').innerHTML = '<section id="TitreRecette"><INPUT type="text" id="valeurUtilisateur"></section>' ;
}

**ithonet** · 17/05/2013, 15h28

Merci infiniment Periah !!!
C'est exactement ça !
Mais HELP : Maintenant je cherche à récupérer le texte saisi et le replacer dans le div quand l'utilisateur clique sur le bouton "modifier" mais j'arrive pas à récupérer #valeurUtilisateur.

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
22
23
24
25
26
27
 
<!DOCTYPE html>
<html>	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/js/jquery/jquery.editable.min.js"></script>
<script>
        function changeContenu(){
var idUser; 
document.getElementById('H2AChanger').innerHTML = '<section id="TitreRecette"><INPUT type="text" id="valeurUtilisateur"></section>';
var idUser = document.getElementById('H2AChanger');}
function remplaceContenu()
{var idUser;alert(idUser);};
</script>
    </head>
	<body>
<DIV id='H2AChanger'>
<section id="TitreRecette">
<h2 onclick='changeContenu() ;'>Truites à la champenoise</h2>
</section>
</DIV>
<p class="txtright">
<input class="bouton" id="change" type="submit" onclick='remplaceContenu() ;' value="Modifier">
</p>
	</body>
</html>

**Periah** · 17/05/2013, 15h37

Et 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
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
		<script src="/js/jquery/jquery.editable.min.js"></script>
		<script>
			function changeContenu(){
				document.getElementById('H2AChanger').innerHTML = '<section id="TitreRecette"><INPUT type="text" id="valeurUtilisateur"></section>';
			}
			function remplaceContenu()
			{
				alert(document.getElementById('valeurUtilisateur').value);
			};
		</script>
    </head>
	<body>
		<DIV id='H2AChanger'>
			<section id="TitreRecette">
			<h2 onclick='changeContenu() ;'>Truites à la champenoise</h2>
		</section>
		</DIV>
		<p class="txtright">
			<input class="bouton" id="change" type="submit" onclick='remplaceContenu() ;' value="Modifier">
		</p>
	</body>
</html>

Mais si je comprends bien ce que tu veux faire, ça serait plus ç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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
		<script src="/js/jquery/jquery.editable.min.js"></script>
		<script>
			function changeContenu(sens){
				switch(sens)
				{
					case 1 :
						document.getElementById('H2AChanger').innerHTML = '<section id="TitreRecette"><INPUT type="text" id="valeurUtilisateur"></section>';
						break ;
					case 2 : 
						var leTexte = document.getElementById('valeurUtilisateur').value ;
						document.getElementById('H2AChanger').innerHTML = '<section id="TitreRecette"><h2 onclick="changeContenu(1) ;">' + leTexte + "</h2></section>" ;
				}
 
			}
		</script>
    </head>
	<body>
		<DIV id='H2AChanger'>
			<section id="TitreRecette">
			<h2 onclick='changeContenu(1) ;'>Truites à la champenoise</h2>
		</section>
		</DIV>
		<p class="txtright">
			<input class="bouton" id="change" type="submit" onclick='changeContenu(2) ;' value="Modifier">
		</p>
	</body>
</html>

**ithonet** · 17/05/2013, 15h43

Je suis pas loin :s…

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
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE html>
<html>	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/js/jquery/jquery.editable.min.js"></script>
<script>
	function changeContenu(){
var idUser; 
document.getElementById('H2AChanger').innerHTML = '<section id="TitreRecette"><INPUT type="text" id="valeurUtilisateur"><input class="bouton" id="change" type="submit" onclick="remplaceContenu() ;" value="Modifier"></section>'
;}
function remplaceContenu(){
var idUser=document.getElementById('valeurUtilisateur').value;
document.getElementById('H2AChanger').innerHTML = '<section id="TitreRecette"><h2>' + idUser + '</h2>'/*alert(idUser)*/
}
</script>
    </head>
	<body>
<DIV id='H2AChanger'>
<section id="TitreRecette">
<h2 onclick='changeContenu() ;'>Truites à la champenoise</h2>
</section>
</DIV>
<p class="txtright">
</p>
	</body>
</html>

**ithonet** · 17/05/2013, 16h08

ça y est ça marche ! Merci infiniment

!!!!!!!!!!!!!!

Remplacement de texte par l'utilisateur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager