Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

Remplir automatiquement zone input text

https://forum.phpfrance.com/viewtopic.php?f=7&t=270537

Page 1 sur 1

Remplir automatiquement zone input text

Posté : 09 mars 2014, 11:28
par Herve_be
Bonjour,
J'avais posé cette question dans la section php mais on me répond que la solution est en java, alors je la pose à nouveau ici
J'ai un simple formulaire qui contient une zone texte et 2 boutons confirmer / annuler.

Code : Tout sélectionner

<form method="post" action="Send.php"> <p align=center>Commentaire : <input type='text' size='100' name='Comment'> <p align=center><input type="submit" value="Confirmer"> <input type="button" value="Annuler" onClick="window.location.href='http://xxx.php'">
Ceci fonctionne sans problème.
Il arrive souvent qu'on doive remplir la zone texte avec la même phrase.
Je voudrais ajouter quelques boutons en forme d'images cliquables et que, lorsqu'on clique sur une image, la zone texte reçoive une valeur prédéfinie.
L'utilisateur peut ensuite compléter la zone texte puis cliquer sur le bouton "confirmer" pour confirmer.
Comment faire ?
Alors, il va surement falloir passer par javascript:
sur les icones tu mets un onclick qui déclenche une fonction qui modifie le texte de ton champ.
Il faut pour ça que tous les champs à remplir ainsi aient des id différents (rappel name = '' sert à html et id ='' sert à javascript)
Comme je suis nul en java, merci de m'aider.

Re: Remplir automatiquement zone input text

Posté : 13 mars 2014, 20:49
par libertux
Bonsoir mon ami,

Voici une solution utilisant JQuery et l'attribut "data" du HTML5:
soluce.zip
J'explique :
voici le code complet : 

<!DOCTYPE html>
<html>
<head>
 
   <meta charset="utf-8" />
   <title>Jquery Plugin - Menu déroulant</title>
 
   <link rel="stylesheet" href="style.css" type="text/css" />
 
   <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
 
 	<script type="text/javascript" src="jquery.js"></script>
 
</head>
<body>

<form method="post" action="Send.php">
<p align="center">Commentaire : <input type='text' size='100' name='Comment' id="field"></p>
<p align="center"><input type="submit" value="Confirmer"></p>
<p align="center"><input type="button" value="Annuler" onClick="window.location.href='http://xxx.php'"></p>
</form>

<div class="btn">
	
	<div class="btn-1" data-message="je suis le texte du premier bouton"><img src="aaa.png" /></div>
	<div class="btn-1" data-message="je suis le texte du deuxième bouton"><img src="bbb.png" /></div>
	
</div> 
   
   <script>
 	
 	
 	$(document).ready(function() {

 		var field = $("#field");
 		
 		$(".btn-1").click(function() {
 			field.val( $(this).data('message') );	
		});
		
		$(".btn-2").click(function() {
 			field.val( $(this).data('message') );	
		});
 		
 		
 	});
 	
 	
 </script>
   
</body>
</html>
dans le code précédent j'ai ajouter un "id" nommé "field" au champ edit principale pour simplement pouvoir l'identifier:
...
<p align="center">Commentaire : <input type='text' size='100' name='Comment' id="field"></p>
...
puis j'ai ajouter deux images dans des "div" j'ai utiliser les div pour pouvoir stocké des donnée avec l'attribut "data" du html5 :
...
<div class="btn">
	
	<div class="btn-1" data-message="je suis le texte du premier bouton"><img src="aaa.png" /></div>
	<div class="btn-1" data-message="je suis le texte du deuxième bouton"><img src="bbb.png" /></div>
	
</div> 
...
la "div" principale qui englobe les deux "div" des image est utilisé pour le style tu peut la supprimer ou l'adapté a ton design.

maintenant il faut faire appel a JQuery dans le "head" du html :
...
 	<script type="text/javascript" src="jquery.js"></script>
 
</head>
...
maintenant venons au JavaScript (JQuery), nous avons le code suivant à la fin du html:

[javascript]

$(document).ready(function() {

var field = $("#field");

$(".btn-1").click(function() {
field.val( $(this).data('message') );
});

$(".btn-2").click(function() {
field.val( $(this).data('message') );
});


});
[/javascript]

le code suivant :
[javascript]

$(document).ready(function() {
...
});
[/javascript]

est en fait le principe de base de JQuery, c'est ce code qui assure que le code a l'intérieur n'est exécuter que lorsque les éléments de la page html sont tous mis en place et bel est bien présent dans le dom. ça évite qu'on fait appel à des élément non encore télécharger du serveur...

puis on à :

[javascript]
...
var field = $("#field");
...
[/javascript]

ici on a juste mis une instance du champ edit dans une variable pour éviter d'aller le chercher à chaque foi.

puis :

[javascript]
...
$(".btn-1").click(function() {
field.val( $(this).data('message') );
});
...
[/javascript]

ici on détecte l’événement "onclick" sur l'élément html dont la classe est "btn-1" donc notre div qui englobe la première image, alors si on clique dessus on va remplir le champ edit récupérer précédemment dans la variable "field" par le contenu de l'attribut data html5 "message". et c'est la meme logique avec la deuxième image.

voila, j’espère avoir aider avec cette intervention ;)
il y a des améliorations a faire mais je ne sait pas si vous avez le bon niveau en JQuery? mais si tu a assimiler ce code on peut l'améliorer ultérieurement.

tu peut aussi faire un tour sur mon blog pour trouver quelques tutoriels.

Bon Codage

Re: Remplir automatiquement zone input text

Posté : 14 mars 2014, 09:58
par Herve_be
Bonjour,
Merci beaucoup pour ta réponse détaillée.
Même si je ne connais pas bien la syntaxe de Java, je comprends parfaitement ton code.
Entretemps j'ai quand même eu une réponse en php qui consiste à rappeler la même page; je l'ai installé, ça fonctionne très bien, avec le petit défaut qu'on recharge la page à partir du serveur chaque fois qu'on clique sur un bouton.
A l'occasion j'essaierai ta solution qui me semble plus efficace.

Re: [RESOLU] Remplir automatiquement zone input text

Posté : 16 mars 2014, 11:25
par Herve_be
Bonjour,
Pourrais-tu me dire comment modifier le java pour que le texte correspondant soit ajouté au texte existant.

Dans sa version actuelle
si je clique sur le 1er bouton j'obtiens "je suis le texte du premier bouton"
si je clique sur le 2ème bouton j'obtiens "je suis le texte du deuxième bouton"

Ce que je voudrais
si je clique sur le 1er bouton j'obtiens "je suis le texte du premier bouton"
si je clique sur le 2ème bouton j'obtiens "je suis le texte du premier boutonje suis le texte du deuxième bouton"

Merci

Re: Remplir automatiquement zone input text

Posté : 17 mars 2014, 15:30
par Flambi
Bonjour,

Essaye de remplacer
[javascript]
$(".btn-1").click(function() {
field.val( $(this).data('message') );
});

$(".btn-2").click(function() {
field.val( $(this).data('message') );
});
[/javascript]

Par le code suivant :
[javascript]
$(".btn-1").click(function() {
field.val( field.val()+$(this).data('message') );
});

$(".btn-2").click(function() {
field.val( field.val()+$(this).data('message') );
});
[/javascript]

Re: Remplir automatiquement zone input text

Posté : 17 mars 2014, 22:53
par libertux
salut,
bien vue Flambi (+1)

voila une autre possibilité qui peut gérer plusieurs boutons dynamiquement, cette version requière l'ajout d'une classe (disant "mybtn") a tous les boutons dont on veut gérer donc on à:

[javascript]
$(".mybtn").each(function(){

$(this).click(function(){

field.val( field.val()+$(this).data('message') );

});

});
[/javascript]

comme ça, si vous avez à ajouter un bouton ultérieurement, vous n'avez qu'as luis attribuer la classe "mybtn".

Bon Codage.
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/