Aller au contenu


Photo

Javascript : Formulaire, quel est le bouton utilisé ?

Started by BorakLeRouge, juin 15 2011 16:22

  • Please log in to reply
12 replies to this topic

#1 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 949 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 15 juin 2011 - 16:22

Coucou,

Une petite Borakerie.

J'ai une belle page HTML (réalisé en COBOL sur Gros système IBM, ben oui, c'est possible). Sur un Formulaire, le but est de faire des Contrôles de présence. Seulement ça change selon les boutons.

Mon pb est donc de pouvoir détecter en Javascript, quel est le bouton qui a été cliqué. Mais attention, uniquement dans le Script qui est envoyé par le
onsubmit="return ControlWMEC1(this) ;"
En PHP je sais faire, mais en javascript (à part en utilisant le onclick du bouton).

Merci à ceux qui trouvent :)

Ce message a été modifié par BorakLeRouge - 15 juin 2011 - 16:24 .

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...

#2 AliGator

AliGator

    (Trop) Grand Bavard

  • Membres d'honneur
  • PipPipPipPipPipPipPipPipPip
  • 12 338 Messages :
  • Configuration:• MacBook Pro 15" 2,2GHz, 10.6
    • MacMini G4 1,42GHz, 10.5
  • Sexe:Masculin
  • Localisation:Rennes (Bretagne, France)
  • Passions:Piano, Cuisine, Danse (Rock, ...), faire des réponses de 3km

Posté 15 juin 2011 - 16:50

Tu veux dire que tu as plusieurs boutons <input type="submit">, et que tu veux détecter dans le code de l'event "onsubmit" de ton formulaire <form onsubmit="..."> quel est le bouton qui a généré cette soumission, et non pas faire cette détection dans le "onclick" de chacun des boutons submit ?

Parce que le plus simple que je verrais moi c'est dans le onclick de chaque bouton, positionner une variable pour indiquer le bouton cliqué. Par exemple <input type="submit" id="submit1" onclick="submitBtnId=this.id" /><input type="submit" id="submit2" onclick="submitBtnId=this.id" />...Et ensuite dans le onsubmit de ton formulaire tu peux tester la variable submitBtnId (variable que tu auras déclaré globale dans ton javascript).

En fait quelle est ta contrainte qui fait que tu ne peux pas mettre le code / du code dans le onclick de chaque bouton ?

Le posteur fou de macfr
Mon blog: Crunchy Development
______________
Devise Shadok : S'il n'y a pas de solution, c'est qu'il n'y a pas de problème...

#3 AliGator

AliGator

    (Trop) Grand Bavard

  • Membres d'honneur
  • PipPipPipPipPipPipPipPipPip
  • 12 338 Messages :
  • Configuration:• MacBook Pro 15" 2,2GHz, 10.6
    • MacMini G4 1,42GHz, 10.5
  • Sexe:Masculin
  • Localisation:Rennes (Bretagne, France)
  • Passions:Piano, Cuisine, Danse (Rock, ...), faire des réponses de 3km

Posté 15 juin 2011 - 17:02

Pour info j'avais essayé en utilisant les propriété "target" et/ou "currentTarget" qu'on peut récupérer de l'event qui a appelé la fonction... Mais dans les deux cas ça me retourne l'objet correspondant au formulaire comme target de l'event, et pas le bouton qui a servi au submit
<html>
<head>
	<script language="javascript" type="text/javascript">
		function dump(e)
		{
			alert("target: " + e.target + " ["+e.target.id+"]\n"
			+"currentTarget: " + e.currentTarget + " ["+e.currentTarget.id+"]");
		}
	</script>
</head>
<body>
	<form id="form1" onsubmit="dump(event)" action="#">
		<input type="submit" id="s1" />
		<input type="submit" id="s2" />
	</form>
</body>
</html>
Donc j'avais pensé que ça pourrait être une solution, mais à priori ce n'est pas le cas :(

Le posteur fou de macfr
Mon blog: Crunchy Development
______________
Devise Shadok : S'il n'y a pas de solution, c'est qu'il n'y a pas de problème...

#4 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 949 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 15 juin 2011 - 17:05

Réponse à la première question d'ali :) (il a écrit un second message trop vite pour moi).

Parce que je veux que ça reste simple en html. J'appelle le script une fois, et il fait tout.

(s'il n'y a pas d'autre solution que le onclick sur les boutons, je l'ajouterai dans tous les boutons par javascript dynamiquement).

En réalité, ce n'est pas moi qui ait écrit le Cobol qui génére la page HTML, et si je dis qu'il faut mettre des onclick partout sur les six boutons, la demoiselle concernée va me taper dessus. Ca c'est une super bonne raison :)

Ce message a été modifié par BorakLeRouge - 15 juin 2011 - 17:09 .

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...

#5 AliGator

AliGator

    (Trop) Grand Bavard

  • Membres d'honneur
  • PipPipPipPipPipPipPipPipPip
  • 12 338 Messages :
  • Configuration:• MacBook Pro 15" 2,2GHz, 10.6
    • MacMini G4 1,42GHz, 10.5
  • Sexe:Masculin
  • Localisation:Rennes (Bretagne, France)
  • Passions:Piano, Cuisine, Danse (Rock, ...), faire des réponses de 3km

Posté 15 juin 2011 - 17:38

Ah bah dans ce cas, ajoute le onclick... par javascript !

<html>
<head>
        <script language="javascript" type="text/javascript">
		function registerOnClickEvents()
		{
			var inputs = document.getElementsByTagName('input'); // Get every <input> tags
			for (var i=0; i<inputs.length; i++)
			{
				var item = inputs[i];
				// add onclick event, only if it is an <input type="submit">
				if (item.getAttribute("type") == 'submit')
					item.onclick = function(e) { submitButtonClicked(e.target); };
			}
		}
		
		function submitButtonClicked(submitButton)
		{
			// ici tu mets ton code
			alert("Click sur bouton Submit d'ID "+submitButton.id);
		}
        </script>
</head>
<body onload="registerOnClickEvents()">
        <form id="form1" action="#">
                <input type="submit" id="s1" />
                <input type="submit" id="s2" />
        </form>
</body>
</html>
Comme ça une fois la page HTML complètement chargée par le navigateur, il appelle registerOnClickEvents qui va boucler sur tous les boutons <input> de la page, et pour les <input> dont le type="submit" il va affecter une fonction à l'event onclick. Du coup tu n'as plus à rajouter cette fonction à la main pour chaque bouton submit, c'est fait par javascript au chargement de la page !

Le posteur fou de macfr
Mon blog: Crunchy Development
______________
Devise Shadok : S'il n'y a pas de solution, c'est qu'il n'y a pas de problème...

#6 FJA

FJA

    Maniaque du clavier

  • Membres
  • PipPipPipPip
  • 565 Messages :
  • Configuration:iMac [iMac5,1 (Intel Core 2 Duo)]
    MBA [MacBookAir4,2 (i5, 13,3")]
  • Sexe:Masculin
  • Localisation:Lille

Posté 15 juin 2011 - 17:39

Salut,

<script>
function doAction(event) {
	alert(event.target.id);
}

function doAction2(obj) {
	alert(obj.id);
}
</script>
<form action="">
	<input type="submit" onclick="doAction(event);" id="submit_1" value="Test 1" />
	<input type="submit" onclick="doAction(event);" id="submit_2" value="Test 2" />
	<button onclick="doAction(event);" id="button_1">Test 3</button>
	<button onclick="doAction(event);" id="button_2">Test 4</button>
	<div onclick="doAction(event);" id="div_1">Test 5</div>
	<div onclick="doAction(event);" id="div_2">Test 6</div>
	<hr />
	<input type="submit" onclick="doAction(event);" id="submit_3" value="Test 7" />
	<button onclick="doAction(event);" id="button_3">Test 8</button>
	<div onclick="doAction(event);" id="div_3">Test 9</div>
	<script>
		document.getElementById('submit_3').onclick = doAction;
		document.getElementById('button_3').onclick = doAction;
		document.getElementById('div_3').onclick = doAction;
	</script>
	<hr />
	<input type="submit" onclick="doAction2(this)" id="submit_4" value="Test 10" />
	<button onclick="doAction2(this);" id="button_4">Test 11</button>
	<div onclick="doAction2(this);" id="div_4">Test 12</div>
</form>

Edit : Trop rapide ce croco Image IPB

Ce message a été modifié par FJA - 15 juin 2011 - 17:41 .


#7 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 949 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 15 juin 2011 - 18:05

Ben, oui, mais ça je savais faire, mais j'avais pas envie :)

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...

#8 AliGator

AliGator

    (Trop) Grand Bavard

  • Membres d'honneur
  • PipPipPipPipPipPipPipPipPip
  • 12 338 Messages :
  • Configuration:• MacBook Pro 15" 2,2GHz, 10.6
    • MacMini G4 1,42GHz, 10.5
  • Sexe:Masculin
  • Localisation:Rennes (Bretagne, France)
  • Passions:Piano, Cuisine, Danse (Rock, ...), faire des réponses de 3km

Posté 15 juin 2011 - 18:42

De quoi, l'ajout automatique du onclick par javascript comme je propose ?

Le posteur fou de macfr
Mon blog: Crunchy Development
______________
Devise Shadok : S'il n'y a pas de solution, c'est qu'il n'y a pas de problème...

#9 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 949 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 15 juin 2011 - 20:19

Ouaip, mais ma solution sera un chouïa différente :

Ajouter une fonction sur les onclick des boutons qui ajouteront (ou retireront) la classe "oblig" des champs concernés.
La classe "oblig" étant celle qui entraine automatiquement une obligation de présence.

(J'ai un contrôle automatique qui marche selon ce qu'il y a dans les classes : oblig entier decimal2 majus mot ... ... ...)

Bon, j'aurai aimé une autre solution. Mais si javascript est hyper-puissant, il y a toujours des trucs incompréhensibles qui coincent :)

Merci de confirmer mon doute...

Ce message a été modifié par BorakLeRouge - 15 juin 2011 - 20:20 .

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...

#10 zekiller28

zekiller28

    Admin qui mord

  • Administrateurs
  • PipPipPipPipPipPipPipPipPip
  • 10 634 Messages :
  • Configuration:Toutes sortes de Mac du PPC à l'Intel et toute sorte de MacOS X De Panther Client à Maverick.
  • Sexe:Masculin
  • Localisation:Saint-Hilarion (78)

Posté 16 juin 2011 - 09:12

la demoiselle concernée va me taper dessus. Ca c'est une super bonne raison :)

"Raison", c'est son prénom à la demoiselle ? :whistling:
Le site de ToolsX
Le site de ToolsXOptimizer

Apple Certified Mac Management Basics 10.12
Apple Certified Mac Management Basics 10.9 English
Apple Certified Mac Integration Basics 10.9 English
Apple Certified Associate Mac Integration 10.8
Apple Certified Mac Management Basics 10.8

#11 sigma6

sigma6

    Macfr addict

  • Membres
  • PipPipPipPipPip
  • 960 Messages :
  • Sexe:Masculin
  • Localisation:GVA
  • Passions:Bof...

Posté 16 juin 2011 - 11:39

il me semble qu'avec jquery c'est très très simple à faire ce que tu veux. Tu dois même pouvoir faire un truc un peu dynamique ou tu indique dans ton bouton quelle class afficher.

<button name="oblig,entier">Afficher Oblig et Entier</button>

puis en jquery:

	$("button").click(function() {
		var classes = $(this).attr("name");
		classes = classes.split(",");
		$("input").hide();
		for (class in classes) {
			$("."+class).show();
		}
	});


après, tu peux vraiment travailler avec le dom, si tu as ton bouton dans un fieldset et que tu veux afficher que les éléments du fieldset tu peux aussi retrouver le parent de ton bouton et appliquer afficher tous les éléments enfant ou tous les éléments input etc. Bref, jquery ça vaut le détour typiquement dans ton cas.



p.s.: le bout de code c'est vite fait dans la fenêtre du forum, ya ptêtre pleins de fautes…
a+

Ce message a été modifié par sigma6 - 16 juin 2011 - 11:40 .

http://www.sigma6.ch
http://www.malpo.li


#12 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 949 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 16 juin 2011 - 16:07

Oui, j'aime bien utiliser jquery mais pas envie de l'installer dans ce cas (pas envie de leur expliquer, et besoin trop rare dans cette application).

Mon besoin, n'était que de savoir si on pouvait récupérer le nom du bouton cliqué simplement avec une minuscule ligne de code :)

Ce message a été modifié par BorakLeRouge - 16 juin 2011 - 16:13 .

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...

#13 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 949 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 21 juin 2011 - 09:46

Au fait, voici ma technique utilisée. J'ai mis un peu de temps à cause d'Explorer 7 qui m'a coincé à cause d'un petit pb d'écriture html qui bloquait mon JavaScript.

Pour alimenter les boutons, j'ai utilisé le script suivant :
//
// Fonction pour ajouter une classe "oblig" qui permet d'effectuer 
// le contrôle de présence obligatoire
//
function ajoutOblig(id)
{ var cl = 'oblig' ;
 var ob = document.getElementById(id) ;
 var avant = ob.className ; 
 if (avant.indexOf(cl) < 0)
 { ob.className = cl + ' ' + avant ;}
}
//
// Fonction pour retirer la classe "oblig"
//
function retraitOblig(id)
{ var cl = 'oblig' ;
 var ob = document.getElementById(id) ;
 var avant = ob.className ; 
 ob.className = avant.replace(cl + ' ','').replace(cl,'') ;
}

//
// Fonctions appelés pour mettre ou retirer le controle de présence
//
function actionNoOblig()
{ retraitOblig('NAFP01') ; 
}
function actionOblig()
{ ajoutOblig('NAFP01') ; 
}

//
// Et voici la petite boucle qui va traiter tous les "boutons" de type "submit"
// Celui de validation n'ayant pas de contrôle de présence alors que les
// autre si.
// Ceci se faisant en ajoutant la bonne fonction sur onclick=""
//
var listobj = document.getElementsByTagName('input') ;
var indice = 0 ;
for (indice in listobj)
{ zeobj = listobj[indice] ; 
 // test : alert(zeobj.value + ' / ' +zeobj.name + ' / ' + zeobj.type + ' / ' + zeobj.className + ' / ' + zeobj.id ) ;
 if (zeobj.type == "submit")
 { if (zeobj.value == "Visualisation")
 	{ zeobj.onclick = function(){ actionNoOblig(); } ;
 	}
 	else
 	{ zeobj.onclick = function(){ actionOblig(); } ;
 	}
} }

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...

Back to Programmation Web


0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)

  1. Forum de macfr.com
  2. → Programmation
  3. → Programmation Web
  4. Privacy Policy
  5. Charte Macfr ·