Afficher un bouton si on entre dans un input

Version imprimable

05/05/2018, 18h58
jireu

Afficher un bouton si on entre dans un input

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é :mrgreen: ), 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 :calim2:

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!

si vous avez des champs définis comme cela

Code:

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:

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();
 
	});

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:

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?

15/05/2018, 14h18
Youhns

Dans ton cas, tu peux utiliser :

Code:

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

Normalement, cela devrait fonctionner
15/05/2018, 14h21
jireu

Salut et merci pour ton retour.

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

Bonne journée !
15/05/2018, 19h44
jireu

hello,

ta ligne fonctionne pour masquer les boutons bootstrap.
je cherche maintenant comment les réafficher quand je tape dans mon input :)
16/05/2018, 01h39
bonjourajax
Bonsoir,
Code:

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

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:

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.

Salut,

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

Code:

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>

17/05/2018, 19h44
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