Discussion :

[jireu]

Bonjour à tous,

Ne trouvant pas de solution au problème que je vais vous décrire et qui pourtant ne me semble pas si compliqué (bon après je suis une quiche en javascript du coup c'est ptêtre compliqué ), je m'adresse à vous afin d'être aiguillé:

Je récupère des valeurs dans une BDD que j'affiche sur une page web sous forme de tableau. chaque valeur est affichée en tant que "placeholder" dans un input et un bouton submit est associé à chaque input. Quand je souhaite modifier une des valeurs, je clique sur l'input et tape ce que je veux, puis j'appuie sur le bouton qui permet d'ajouter la nouvelle valeur dans ma BDD et de l'afficher au prochain reload de la page.

Aujourd'hui, cette méthode fonctionne correctement mais, dans un soucis d'optimisation esthétique, je souhaiterai rendre le bouton visible seulement si je clique dans l'input ou , encore mieux, seulement si je tape quelque chose dans l'input. Malheureusement, le hic c'est que je ne sais pas comment faire

Alors si certains d'entre vous , cher développeur pro et amateur , avez des idées, n'hésitez pas à partager

merci et bon weekend!

[mathieu]

si vous avez des champs définis comme cela

Code html :

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

1
2
3
4
5
6
7
8
9
10
<p class="saisie">
	<input type="text" name="valeur1"/>
	<button>enregistrer</button>
</p>
 
 
<p class="saisie">
	<input type="text" name="valeur2"/>
	<button>enregistrer</button>
</p>

vous pouvez gérer les boutons avec jQuery comme cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	// cacher les boutons au chargement de la page
	$(".saisie button").hide();
 
 
	// afficher lors d'une saisie
 
	$(".saisie input[type=\"text\"]").on("change keydown", function () {
 
		$(this).parent().find("button").show();
 
	});

[jireu]

Bonsoir et merci pour ce retour !

j'ai testé ce code qui fonctionne très bien.

En revanche dans mon cas, mon bouton est issu de bootstrap et est inclus dans un form.

Code html :

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

1
2
3
4
5
6
7
8
 
<form class="form-inline" method="post">
   <?= $form->input('M_name', '',['placeholder' => $word,'color'=>$color]); ?>
   <?= $form->input('M_id','',['type'=>'hidden','placeholder' => $v->M_id]); ?>
   <?= $form->input('C_id','',['type'=>'hidden','placeholder' => $v->C_id]); ?>
 
   <button class="btn btn-primary">Sauvegarder</button>
</form>

Existe-t-il une possibilité de gérer l'affichage de ce type de bouton avec jquery?

[Youhns]

Dans ton cas, tu peux utiliser :

Code :

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

$(".form-inline button").hide();

Normalement, cela devrait fonctionner

[jireu]

Salut et merci pour ton retour.

Je testes ça ce soir et reviens vous dire ce qu'il en est .

Bonne journée !

[jireu]

hello,

ta ligne fonctionne pour masquer les boutons bootstrap.
je cherche maintenant comment les réafficher quand je tape dans mon input

[bonjourajax]

Bonsoir,

Code javascript :

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

1
2
 
$(".form-inline button").show()

[jireu]

j'avais bien essayé de mettre cette ligne mais , si je la met directement mes boutons ne disparaissent pas. j'ai donc essayé de l'intégrer au code précédemment proposé:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script>
    $(".saisie button").hide();// cacher les boutons saisie
    $(".form-inline button").hide(); // cacher les boutons form-inline
 
  // affichage bouton form-inline?
  $(".form-inline input[type=\"text\"]").on("change keydown", function () {
    $(this).parent().find("button").show();
  });
 
  // afficher bouton saisie
  $(".saisie input[type=\"text\"]").on("change keydown", function () {
    $(this).parent().find("button").show();
  });
  </script>

mais ceci ne fonctionne pas non plus.

[Youhns]

Salut,

As-tu essayé de l'écrire comme cela ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    $(".saisie button").hide();// cacher les boutons saisie
    $(".form-inline button").hide(); // cacher les boutons form-inline
 
  // affichage bouton form-inline?
  $(".form-inline input[type=\"text\"]").on("change keydown", function () {
    $(".form-inline button").show();
  });
 
  // afficher bouton saisie
  $(".saisie input[type=\"text\"]").on("change keydown", function () {
    $(".saisie button").show();
  });
  </script>

[jireu]

hello,

la méthode que tu proposes fonctionne mais sur ma page j'ai plusieurs input avec bouton associés et quand je tape dans un input, les boutons de tous les input s'affichent.

j'ai essayé de remplacer dans le find le mot "button" par ".form-inline button" mais ca ne fonctionne pas

Bonne soirée