Bouton de formulaire par défaut

Le 09/08/2011 14:23, Stéphane Santon a écrit :

Bonjour,

Bonjour,

J'ai un formulaire avec *plusieurs* boutons <input type='submit' ...>,

Avec des attributs "value", voire "name", différents, je suppose...

et un <select name='localiserSelect' id='localiserSelect'
onChange="this.form.submit();">

Marrant cette habitude de mettre à la fois "id" et "name" avec la même
valeur ! Mais bon, c'est pas le sujet, apparemment.

Comment définir le bouton qui sera "activé" lorsque je changerai la
sélection, et savoir que c'est CE bouton qui a été pseudo-cliqué ?

Ok, mais quelle est la relation entre les "input" et le "select" ?
On peut avoir le code entier du formulaire pour une vue globale ?


--
Cordialement,
Pascal

Bonsoir,

Pascal Poncet a écrit :

J'ai un formulaire avec *plusieurs* boutons <input type='submit' ...>,

Avec des attributs "value", voire "name", différents, je suppose...

C'est ce que je fais, mais aucun attribut n'est renvoyé.

et un <select name='localiserSelect' id='localiserSelect'
onChange="this.form.submit();">

Marrant cette habitude de mettre à la fois "id" et "name" avec la même valeur
! Mais bon, c'est pas le sujet, apparemment.

"name" c'est pour transmettre les données de formulaire, "id" c'est
pour getElementById afin d'activer les options.

Comment définir le bouton qui sera "activé" lorsque je changerai la
sélection, et savoir que c'est CE bouton qui a été pseudo-cliqué ?

Ok, mais quelle est la relation entre les "input" et le "select" ?
On peut avoir le code entier du formulaire pour une vue globale ?

Le Select liste les options, un seul input doit faire prendre en compte
l'option choisie, les autres input pour autres choses.

<input type='submit' id='localiserSelectBtn' class='submit'
name='localiserSelectBtn' value='Afficher'>

<select name='localiserSelect' id='localiserSelect'
onChange="this.form.submit();">
<option value='optAdresse'>Par une adresse</option>
<option value='optGps' disabled='disabled' id='localiserOptGps'>Par
mon GPS </option>
<option value='optFix'>N'afficher que le point fixé</option>
</select>

<input type='submit' class='submit' id='localiserBtn'
name='localiserBtn' value='Localiser' />
<input type='submit' class='submit' id='fixGeocodBtn'
name='fixGeocodBtn' value="Me fixer ici" />


--
Stéphane

Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées... accélérateurs de talents !

BTS Electrotechnique *** http://enselec.santonum.eu

Le 09/08/2011 21:04, Stéphane Santon a écrit :

Le Select liste les options, un seul input doit faire prendre en compte
l'option choisie, les autres input pour autres choses.

<input type='submit' id='localiserSelectBtn' class='submit'
name='localiserSelectBtn' value='Afficher'>

<select name='localiserSelect' id='localiserSelect'
onChange="this.form.submit();">
<option value='optAdresse'>Par une adresse</option>
<option value='optGps' disabled='disabled' id='localiserOptGps'>Par mon
GPS </option>
<option value='optFix'>N'afficher que le point fixé</option>
</select>

<input type='submit' class='submit' id='localiserBtn'
name='localiserBtn' value='Localiser' />
<input type='submit' class='submit' id='fixGeocodBtn'
name='fixGeocodBtn' value="Me fixer ici" />

Comprends pas, s'il y a un "onchange" sur le "select", ça ne suffit pas
pour récupérer l'option ? Et, dans ce cas, à quoi sert le bouton précédent ?

Bon, il est tard, je regarderai encore demain pour voir si j'ai loupé un
truc. A moins que tu ais d'autres précisions d'ici là.

--
Cordialement,
Pascal

Merci de ton temps de réflexion avant le sommeil :-)

Pascal Poncet a écrit :

Comprends pas, s'il y a un "onchange" sur le "select", ça ne suffit pas pour
récupérer l'option ? Et, dans ce cas, à quoi sert le bouton précédent ?

Il y a un "onChange" sur le select qui fait this.form.submit(), le
formulaire est donc envoyé, mais comme je n'ai cliqué sur aucun bouton
(parmi les 3-4 présents), je ne sais pas *explicitement* qui a envoyé
le formulaire (à moins d'en déduire que sans info, c'est le select).

J'aimerais donc avoir qqchose dans Select qui ferait

<select name='localiserSelect' id='localiserSelect'
onChange="document.getElementById("localiserSelectBtn").click();">

mais plus proche de this.form :

onChange="document.getElementById("localiserSelectBtn").submit();"

ou

onChange="this.form.submit( "localiserSelectBtn");">

ou ...

--
Stéphane

Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées... accélérateurs de talents !

BTS Electrotechnique *** http://enselec.santonum.eu

À (at) Tue, 09 Aug 2011 23:47:35 +0200,
Stéphane Santon <news901@team-santonum.com> écrivait (wrote):

Merci de ton temps de réflexion avant le sommeil :-)

Pascal Poncet a écrit :

Comprends pas, s'il y a un "onchange" sur le "select", ça ne suffit
pas pour récupérer l'option ? Et, dans ce cas, à quoi sert le bouton
précédent ?

Il y a un "onChange" sur le select qui fait this.form.submit(), le
formulaire est donc envoyé, mais comme je n'ai cliqué sur aucun bouton
(parmi les 3-4 présents), je ne sais pas *explicitement* qui a envoyé
le formulaire [...]

C'est le select et donc aucun des boutons...

[...] (à moins d'en déduire que sans info, c'est le select).

C'est exactement cela : si c'est l'un des boutons submit qui déclenche
l'envoi, son nom (name ou id) est envoyé comme paramètre.

--
Paul Gaborit - <http://perso.mines-albi.fr/~gaborit/>

Le 09/08/2011 23:47, Stéphane Santon a écrit :

Merci de ton temps de réflexion avant le sommeil :-)

...réparateur, en effet !

Il y a un "onChange" sur le select qui fait this.form.submit(), le
formulaire est donc envoyé, mais comme je n'ai cliqué sur aucun bouton
(parmi les 3-4 présents), je ne sais pas *explicitement* qui a envoyé le
formulaire (à moins d'en déduire que sans info, c'est le select).

Normalement, JS n'a rien à voir avec ce genre d'interactivité.
Ce serait donc la solution explicite qui serait la plus naturelle.

Néanmoins, si tu insistes sur cette voie (pour une raison que je n'ai
pas encore très bien comprise, pardonne-moi), tu as la solution du champ
caché.
Il te suffirait alors de le nommer "action", par exemple, et de modifier
sa valeur avant envoi, selon le bouton cliqué ou toute autre action,
précisément.

onChange="document.getElementById("localiserSelectBtn").submit();"

ou

onChange="this.form.submit( "localiserSelectBtn");">

Je sais que les bancs d'essais montrent un gain de performance
(surprenant a priori) à utiliser le DOM du W3C plutôt que celui d'origine.
Mais, toute proportion gardée, à moins d'avoir un formulaire de milliers
de champs, le gain devrait être insignifiant en production.
De ce fait, je recommande plutôt le DOM-0 dans les formulaires, beaucoup
plus simple et naturel à mettre en oeuvre.

Tu gagnerais aussi à sortir le JS du HTML.
Voici un exemple d'illustration :

<form name="test">
<select name="bgColor">
<option value="1">Blanc</option>
<option value="2">Crème</option>
<option value="3">Ivoire</option>
</select>
<input type="button" name="setBgColor" value="Changer la couleur de
fond"><br>
<select name="fgColor">
<option value="1">Noir</option>
<option value="2">Bleu nuit</option>
<option value="3">Gris foncé</option>
</select>
<input type="button" name="setFgColor" value="Changer la couleur de
police"><br>
<input type="button" name="resetColor" value="Remettre les couleurs
d'origine">
<input type="hidden" name="action" value="none">
</form>

<script>
var myForm = document.forms["test"];
for (var i=0, len=myForm.length; i < len; i++) {
if (myForm.elements[i].type == "button") {
myForm.elements[i].onclick = setAction;
}
}
function setAction() {
this.form.elements["action"].value = this.name;
this.form.submit();
}
</script>


--
Cordialement,
Pascal

Bonjour,

J'ai tout compris la solution et appris plein de choses !
Merci :-)

Je m'y mets sous peu.

Bonne soirée !

Stef

Pascal Poncet a écrit :

Le 09/08/2011 23:47, Stéphane Santon a écrit :

Merci de ton temps de réflexion avant le sommeil :-)

...réparateur, en effet !

Il y a un "onChange" sur le select qui fait this.form.submit(), le
formulaire est donc envoyé, mais comme je n'ai cliqué sur aucun bouton
(parmi les 3-4 présents), je ne sais pas *explicitement* qui a envoyé le
formulaire (à moins d'en déduire que sans info, c'est le select).

Normalement, JS n'a rien à voir avec ce genre d'interactivité.
Ce serait donc la solution explicite qui serait la plus naturelle.

Néanmoins, si tu insistes sur cette voie (pour une raison que je n'ai pas
encore très bien comprise, pardonne-moi), tu as la solution du champ caché.
Il te suffirait alors de le nommer "action", par exemple, et de modifier sa
valeur avant envoi, selon le bouton cliqué ou toute autre action,
précisément.

onChange="document.getElementById("localiserSelectBtn").submit();"

ou

onChange="this.form.submit( "localiserSelectBtn");">

Je sais que les bancs d'essais montrent un gain de performance (surprenant a
priori) à utiliser le DOM du W3C plutôt que celui d'origine.
Mais, toute proportion gardée, à moins d'avoir un formulaire de milliers de
champs, le gain devrait être insignifiant en production.
De ce fait, je recommande plutôt le DOM-0 dans les formulaires, beaucoup plus
simple et naturel à mettre en oeuvre.

Tu gagnerais aussi à sortir le JS du HTML.
Voici un exemple d'illustration :

<form name="test">
<select name="bgColor">
<option value="1">Blanc</option>
<option value="2">Crème</option>
<option value="3">Ivoire</option>
</select>
<input type="button" name="setBgColor" value="Changer la couleur de
fond"><br>
<select name="fgColor">
<option value="1">Noir</option>
<option value="2">Bleu nuit</option>
<option value="3">Gris foncé</option>
</select>
<input type="button" name="setFgColor" value="Changer la couleur de
police"><br>
<input type="button" name="resetColor" value="Remettre les couleurs
d'origine">
<input type="hidden" name="action" value="none">
</form>

<script>
var myForm = document.forms["test"];
for (var i=0, len=myForm.length; i < len; i++) {
if (myForm.elements[i].type == "button") {
myForm.elements[i].onclick = setAction;
}
}
function setAction() {
this.form.elements["action"].value = this.name;
this.form.submit();
}
</script>

--
Stéphane

Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées... accélérateurs de talents !

BTS Electrotechnique *** http://enselec.santonum.eu

Le 09/08/11 23:47, Stéphane Santon a écrit :

Merci de ton temps de réflexion avant le sommeil :-)

Pascal Poncet a écrit :

Comprends pas, s'il y a un "onchange" sur le "select", ça ne suffit
pas pour récupérer l'option ? Et, dans ce cas, à quoi sert le bouton
précédent ?

Il y a un "onChange" sur le select qui fait this.form.submit(), le
formulaire est donc envoyé, mais comme je n'ai cliqué sur aucun bouton
(parmi les 3-4 présents), je ne sais pas *explicitement* qui a envoyé le
formulaire (à moins d'en déduire que sans info, c'est le select).

ça semble le plus mieux ;-)

à la limite, si le select n'a plus sa valeur par défaut c'est donc que
c'est parti de là

<form onsubmit="if(this.sl.value != this.sl.defaultValue) faireCeci()">

sl = name du select

J'aimerais donc avoir qqchose dans Select qui ferait

en mode cracra c'est assez simple :

<select onchange="monBouton.click()"> blabla </select>

<input type=submit name="monBouton" value="le bon !">
<input type=submit name="beurk" value="le mauvais !">

mais plus proche de this.form :

onChange="document.getElementById("localiserSelectBtn").submit();"

submit() c'est exclusivement réservé au form ! (et pas à ses éléments)

le bouton de submit a un name :
onchange="this.form['monBouton'].click()"

ou :
onchange="document.getElementById('monBouton').click()"
si le submit a un ID


Ceci étant, en général, tous les submits on le même nom et seules leurs
values changent.
à réception on évalue la valeur reçue pour ce nom-là


--
Stéphane Moriaux avec/with iMac-intel

Bonjour,

SAM a écrit :

J'aimerais donc avoir qqchose dans Select qui ferait

en mode cracra c'est assez simple :

<select onchange="monBouton.click()"> blabla </select>

<input type=submit name="monBouton" value="le bon !">
<input type=submit name="beurk" value="le mauvais !">

C'est pas mal, ça, pourquoi cracra ??

--
Stéphane

Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées... accélérateurs de talents !

BTS Electrotechnique *** http://enselec.santonum.eu

Le 11/08/11 23:33, Stéphane Santon a écrit :

Bonjour,

en mode cracra c'est assez simple :

<select onchange="monBouton.click()"> blabla </select>

<input type=submit name="monBouton" value="le bon !">
<input type=submit name="beurk" value="le mauvais !">

C'est pas mal, ça, pourquoi cracra ??

parce que normalement en plus propre on devrait faire

<select onchange="this.form.elements['monBouton'].click();">

Seuls les éléments de formulaires
et de type bouton (submit, reset, image)
peuvent réagir à la fonction click()

On ne peut rien cliquer d'autre via JavaScript.

--
Stéphane Moriaux avec/with iMac-intel