Je n'arrive pas à récupérer un input cliqué dans une fonction !

Salut à tous !

Je suis débutant en jquery et javascript et je seche sur un ptit probleme.

J'aimerai tout simplement faire un fadeOut et changer le css sur le bouton cliquer :

(document).ready(function() {
		
		$("input").click(function(){
			
			idCommande = $(this).val();
			
			$.post (
				'/admin/ajax/action-listing-commandes.php',
				{  id: idCommande },
				function(resultat){
					
					if ( resultat=="en-production" ) {
						
						console.log('En production');
						$(this).fadeOut(500).css("border","2px solid red");
						
					}
					else if ( resultat == "en-cours-de-traitement" ) {
						
						console.log('En cours de traitement');
						$(this).fadeOut(500).css("border","2px solid blue");
						
					}
				
				},
				'text'
			);
			
			return false;
		});
		
	});

je pense que ca vient du this dans la fonction

je galère
Modifié par romaricl (17 Nov 2010 - 10:22)

Hello,

Quand employé dans une fonction liée à une action (comme le cas de ton "click" ici), le this se rapporte à l'élément en question. Donc ici, this se rapporte au bouton cliqué.

Donc $(this).val() vaut la valeur de ton bouton. A priori un bouton n'a pas de valeur, je pense que c'est de là que vient ton problème. La valeur en question se trouve-t'elle dans un autre champ de ton formulaire ? Un champ text, ou un champ hidden peut-être ?
C'est celui-ci qu'il te faut cibler.

Sinon, quelques autres conseils
- Ta sélection avec $("input") va sélectionner tous les inputs de la page. Ca risque de faire beaucoup, et surtout ça va aussi bien selectionner les boutons de validation que les champs de texte ou les boutons radio ou checkbox. Je pense que tu devrai être plus précis.
Si cela ne concerne qu'un seul champ, cible le avec son id.

- Ensuite, quand tu définie des variables au sein d'une fonction, pense à utiliser "var";

var idCommande = $(this).val();

De cette façon ta variable n'est définie qu'à l'intérieur de la fonction et n'est pas accessible dans le global scope. Polluer le global scope de variables inutiles va t'amener des tas de problèmes si tu n'y fait pas attention une fois que ton script sera plus important.

- Pour styler des éléments depuis un script, il est préférable d'utiliser des classes CSS plutot que de changer les propriétés CSS directement. Donc plutot que de définir un border blue et un border red, tu devrais créer deux classes CSS (par exemple .produitEnProduction et .produitEnCoursDeTraitement) avec les borders définis et appliquer ces classes à ton élément dans le script avec .addClass('produitEnProduction')

ok merci pour cette explication clair