form avec 3 boutons

Une Bévue a écrit :

j'ai une form avec un champ de texte (input) et trois boutons:

submit - Evaluate
submit - Remove - onclickÞlExpr()
reset - Clear - onclick=clearInput()

pour Evaluate c'est form qui a comme action=evalExpr()
method=POST

"ça marche" mais ça me laisse perplexe...

quand il y a eu un submit (donc ici de deux sources possibles) comment
sait-on côté js qui a émis le submit ???

on sait pô ... voilà.
à quoi servirait-ce ?

<input type=submit name=yvon onclick="Stock(this)" value="Stockage" />
<input type=submit name=yvon onclick="Evaluer(this)" value="Evaluer" />

Normalement, au Post ou au Get du form, la variable 'yvon' est envoyée
avec le value correspondant (on sait donc qui a activé le form)

Pour le JS, du moment qu'on a un onclick dans le bouton, on a donc tout
ce qu'on veut.

<script type="text/javascript">
var vu = false;
function vu(quoi){
vu = quoi.value;
alert('bouton : '+vu);
}
function envoi() {
if(!vu) return true;
var f = document.forms[0];
var v = 'actif='+vu;
for(var i=0; i<f.length; i++)
if(f[i].type=='text')
v += '&'+f[i].name+'='+f[i].value;
AjaxReq('formulr.php?'+v);
vu = false;
return false;
}
</script>
<form action="test.php" onsubmit="return envoi();>
<input type=submit name=yvon onclick="vu(this)" value="Stockage" />
<input type=submit name=yvon onclick="vu(this)" value="Evaluer" />
<input type=submit name=yvon value="Envoi normal" />


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Une Bévue <unbewusst.sein@google.com.invalid> wrote:

quand il y a eu un submit (donc ici de deux sources possibles) comment
sait-on côté js qui a émis le submit ???

je n'ai pas trouvé le moyen quand on a un event onsubmit, rien n'est lié
à la source ???

bon de toutes façons j'ai trouvé une solution.
--
Artaban de Médée

ASM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

on sait pô ... voilà.
à quoi servirait-ce ?

à savoir sur quel bouton on a cliqué et donc agir en conséquence.
dans les autres langages que je connais (cocoa et java) on a la source
de l'event...

<input type=submit name=yvon onclick="Stock(this)" value="Stockage" />
<input type=submit name=yvon onclick="Evaluer(this)" value="Evaluer" />

oui mais du coup (c'est ce que j'ai fait) on a plus besoin du this car
le onclick de chaque bouton est envoyé sur deux handlers différents :

<input type="submit" id="evalexpr" onclick="evalExpr()" value="Evaluer"
/>
<input type="submit" id="delelts" onclick="delElts()" value="Remove" />
<input type="reset" id="clear" value="Clear" />

ce dernier marche "tout seul" pas besoin d'appeller une méthode js pour
faire une raz de mon input.

ensuite dans form j'ai mis :

<form id="xpath" action="javascript:evalExpr()" method="POST">

je me demande si "method="POST" est utile vu que c'est un script qui
agit ???

j'ai mis ça dans <form... pour que lorsque l'user entre un return dans
l'input :

<input type="text" id="expression" value="" size="42" maxlengt="42" />

sans envoie sur evalExpr(), je souhaite que l'utilisateur évalue dabord
l'expression xpath avant de faire un remove des éléments répondants à
l'expression xpath.

Normalement, au Post ou au Get du form, la variable 'yvon' est envoyée
avec le value correspondant (on sait donc qui a activé le form)

Pour le JS, du moment qu'on a un onclick dans le bouton, on a donc tout
ce qu'on veut.

<script type="text/javascript">
var vu = false;
function vu(quoi){
vu = quoi.value;
alert('bouton : '+vu);
}
function envoi() {
if(!vu) return true;
var f = document.forms[0];
var v = 'actif='+vu;
for(var i=0; i<f.length; i++)
if(f[i].type=='text')
v += '&'+f[i].name+'='+f[i].value;
AjaxReq('formulr.php?'+v);
vu = false;
return false;
}
</script>
<form action="test.php" onsubmit="return envoi();>
<input type=submit name=yvon onclick="vu(this)" value="Stockage" />
<input type=submit name=yvon onclick="vu(this)" value="Evaluer" />
<input type=submit name=yvon value="Envoi normal" />

OK, je vois le binz, mon k est nettement + simple...

à part l'id="expression", les autres je peux les supprimer et mettre un
class à la place.
--
Artaban de Médée

Une Bévue a écrit :

ASM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

à quoi servirait-ce ?

à savoir sur quel bouton on a cliqué et donc agir en conséquence.
dans les autres langages que je connais (cocoa et java) on a la source
de l'event...

à ma connaissance : ce n'est (n'était ?) pas prévu en JS

<input type=submit name=yvon onclick="Stock(this)" value="Stockage" />
<input type=submit name=yvon onclick="Evaluer(this)" value="Evaluer" />

oui mais du coup (c'est ce que j'ai fait) on a plus besoin du this car
le onclick de chaque bouton est envoyé sur deux handlers différents :

c a d que je me place toujours (ou le + souvent)
en mode sans JS ça *doit* aussi *fonctionner*,
le 'this' est pour le cas où,
le nom identique pour les différents submits en html "normal",
+ option par onclick et/ou onsubmit pour le JS

ensuite dans form j'ai mis :

<form id="xpath" action="javascript:evalExpr()" method="POST">

je me demande si "method="POST" est utile vu que c'est un script qui
agit ???

ni get ni post n'ont de l'importance si c'est du JS qui intervient
puisque *rien* n'est envoyé !
ce n'est à préciser que pour plaire à la console d'erreurs et autres
bidules d'analyse du code html,
et lors d'envoi pour de vrai (sans précision c'est 'get' par défaut).

j'ai mis ça dans <form... pour que lorsque l'user entre un return dans
l'input :

OK

OK, je vois le binz, mon k est nettement + simple...

à part l'id="expression", les autres je peux les supprimer et mettre un
class à la place.

le name est necessaire au submittage "normal"
des ids (différents cette fois) peuvent être ajoutés
Le class ... normalement c'est pour les css

tu peux toujours prévoir une fonction d'init pour ajouter l'évent

onload = function() {
function alarm() { alert(this.name);}
var f = document.forms[0].elements['send'];
for(var i in f) {
if(f[i].addEventListener)
f[i].addEventListener('click', alarm, false);
}
}

voir aussi pour complément :
<http://forum.alsacreations.com/posting.php?action=newp&tid 759&fid=5&p=1&q7031>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

ASM a écrit :

Une Bévue a écrit :

j'ai une form avec un champ de texte (input) et trois boutons:
quand il y a eu un submit (donc ici de deux sources possibles) comment
sait-on côté js qui a émis le submit ???

on sait pô ... voilà.
à quoi servirait-ce ?

Dans le cas de "Une Bévue" puisque c'est des boutons submit, le mieux
imo ce serait d'avoir un listener sur le onsubmit du <form> tout simplement.

Cependant ca sert à ne gérer que 1 seul listener générique qui dispatche
les comportements suivant la source.
google "event delegation"
http://icant.co.uk/sandbox/eventdelegation/

<script type="text/javascript">
function getTarget(e)
{
return e.target.nodeType == document.TEXT_NODE ?
e.target.parentNode : e.target;
}

// version IE
/*@cc_on
getTarget = function(e)
{
return e && e.srcElement ? e.srcElement : null;
};
@*/

var myManager = function()
{
function add() { alert('click sur ADD'); }
function remove() { alert('click sur REMOVE'); }
function stock() { alert('click sur STOCK'); }
return { "add":add, "remove":remove, "stock":stock };
}();

function myEvaluate() { alert('evaluate now'); }

function check(evt)
{
var target = getTarget(evt);
if ( target )
{
switch (target.value)
{
case 'Add': myManager.add(); break;
case 'Remove': myManager.remove(); break;
case 'Stock': myManager.stock(); break;
case 'Evaluate': myEvaluate(); break;
}
}
return true;
}
</script>

<form onclick="check(event)" onsubmit="return false">
<input type="submit" name="yvon" value="Add">
<input type="submit" name="yvon" value="Remove">
<input type="submit" name="yvon" value="Stock">
<input type="submit" name="yvon" value="Evaluate">
</form>

--
laurent

ASM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

c a d que je me place toujours (ou le + souvent)
en mode sans JS ça *doit* aussi *fonctionner*,
le 'this' est pour le cas où,
le nom identique pour les différents submits en html "normal",
+ option par onclick et/ou onsubmit pour le JS

ah OK, dans mon cas (XPath) je n'ai pas à m'en préoccuper.

> ensuite dans form j'ai mis :
>
> <form id="xpath" action="javascript:evalExpr()" method="POST">
>
> je me demande si "method="POST" est utile vu que c'est un script qui
> agit ???

ni get ni post n'ont de l'importance si c'est du JS qui intervient
puisque *rien* n'est envoyé !

je m'en doutait un peu, mais pas sûr ))

>
> à part l'id="expression", les autres je peux les supprimer et mettre un
> class à la place.

le name est necessaire au submittage "normal"

euh pour chaque bouton/champ d'une form ?

des ids (différents cette fois) peuvent être ajoutés
Le class ... normalement c'est pour les css

tu peux toujours prévoir une fonction d'init pour ajouter l'évent

onload = function() {
function alarm() { alert(this.name);}
var f = document.forms[0].elements['send'];
for(var i in f) {
if(f[i].addEventListener)
f[i].addEventListener('click', alarm, false);
}
}

ah là, c'est + proche de ce qu'on fait en java...

voir aussi pour complément :
<http://forum.alsacreations.com/posting.php?

action=newp&tid 759&fid=5&p=1&q7031>

euh là, par contre je vois pas trop le rapport...
--
Artaban de Médée

Laurent vilday <mokhet@mokhet.com> wrote:

Dans le cas de "Une Bévue" puisque c'est des boutons submit, le mieux
imo ce serait d'avoir un listener sur le onsubmit du <form> tout simplement.

<snip />

<form onclick="check(event)" onsubmit="return false">
<input type="submit" name="yvon" value="Add">
<input type="submit" name="yvon" value="Remove">
<input type="submit" name="yvon" value="Stock">
<input type="submit" name="yvon" value="Evaluate">
</form>

ah oui, merci beaucoup, c'est nettement + élégant )))
--
Artaban de Médée

Une Bévue a écrit :

ASM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

le name est necessaire au submittage "normal"

euh pour chaque bouton/champ d'une form ?

De ce que j'y connais : oui
Ce sont ces names qui, lors d'un submit, sont *automatiquement* envoyés
comme variables (visibles en 'get', invisibles en 'post') attachées à
l'url afin d'en communiquer les valeurs correspondantes.
A charge au js, php, asp, etc, ou du courrielleur d'en tirer parti.

for(var i in f) {
if(f[i].addEventListener)
f[i].addEventListener('click', alarm, false);
}

voir aussi pour complément :
<http://forum.alsacreations.com/posting.php?action=newp&tid 759&fid=5&p=1&q7031>

euh là, par contre je vois pas trop le rapport...

Les "écouteurs" ci-dessus ne sont que pour les softs respecteux du W3C,
à l'url ci-dessus on a le complément pour la bouse.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Une Bévue a écrit :

Laurent vilday <mokhet@mokhet.com> wrote:

Dans le cas de "Une Bévue" puisque c'est des boutons submit, le mieux
imo ce serait d'avoir un listener sur le onsubmit du <form> tout simplement.

ah oui, merci beaucoup, c'est nettement + élégant )))

Ha! oui! il est fort ce Laurent !

J'ai un blème avec la mini-lib à 3 niveaux :
le submit lancé depuis un champ de texte par la touche Entree
qui valide le 1er bouton

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

ASM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

De ce que j'y connais : oui
Ce sont ces names qui, lors d'un submit, sont *automatiquement* envoyés
comme variables (visibles en 'get', invisibles en 'post') attachées à
l'url afin d'en communiquer les valeurs correspondantes.

AH, OK, je vois.

A charge au js, php, asp, etc, ou du courrielleur d'en tirer parti.

>> for(var i in f) {
>> if(f[i].addEventListener)
>> f[i].addEventListener('click', alarm, false);
>> }

>> voir aussi pour complément :
>> <http://forum.alsacreations.com/posting.php?

action=newp&tid 759&fid=5&p=1&q7031>

>
> euh là, par contre je vois pas trop le rapport...

Les "écouteurs" ci-dessus ne sont que pour les softs respecteux du W3C,
à l'url ci-dessus on a le complément pour la bouse.

d'accord, merci !
--
Artaban de Médée