Remplacement de texte par l'utilisateur

Version imprimable

16/05/2013, 15h47
ithonet

Remplacement de texte par l'utilisateur
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:

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 ?

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:

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

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

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:

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>

Et comme ça ?

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

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>

Je suis pas loin :s…

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
 
<!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>

17/05/2013, 16h08
ithonet

ça y est ça marche ! Merci infiniment :D !!!!!!!!!!!!!!