IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Remplacement de texte par l'utilisateur


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Mai 2013
    Messages : 4
    Par défaut 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 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 ?

  2. #2
    Membre confirmé Avatar de Periah
    Homme Profil pro
    Chef de projet en SSII
    Inscrit en
    Août 2012
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Chef de projet en SSII
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 27
    Par défaut
    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>' ;
    }

  3. #3
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Mai 2013
    Messages : 4
    Par défaut
    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>

  4. #4
    Membre confirmé Avatar de Periah
    Homme Profil pro
    Chef de projet en SSII
    Inscrit en
    Août 2012
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Chef de projet en SSII
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 27
    Par défaut
    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>

  5. #5
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Mai 2013
    Messages : 4
    Par défaut
    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>

  6. #6
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Mai 2013
    Messages : 4
    Par défaut
    ça y est ça marche ! Merci infiniment !!!!!!!!!!!!!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [RegEx] Remplacer un texte par un include
    Par Oprichnik dans le forum Langage
    Réponses: 4
    Dernier message: 24/01/2008, 23h59
  2. [Tableaux] remplacer du texte par des images
    Par elti69 dans le forum Langage
    Réponses: 2
    Dernier message: 12/06/2007, 10h14
  3. comment bloquer l'agrandissement du texte par l'utilisateur
    Par toupiti dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/08/2006, 11h41
  4. Remplacer du texte par une image en css
    Par Seth77 dans le forum Mise en page CSS
    Réponses: 12
    Dernier message: 03/04/2006, 11h57
  5. Remplacer un texte par un autre
    Par Guillaume602 dans le forum C++
    Réponses: 3
    Dernier message: 24/11/2005, 00h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo