Soumettre formulaire depuis Input type="text"

**boteha** · 09/01/2011, 14h45

Bonjour,

Pour un panier, j'ai un formulaire avec des input text afin de saisir les quantités.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<form method="post" action="s.php">
<p><input type="text" name="référence_article sélectionné" value="1" />NOM du machin</p>

Un fois la quantité saisie, il faut cliquer sur un bouton "Recalculer" pour faire la mise à jour.
Certains utilisateurs voudraient que la mise à jour soit automatique quand ils ont saisi la quantité.

Je ne suis pas sûr que ce soit une bonne idée, mais étant nul en javascript je ne sais pas comment faire.

Quel événement détecter ?
Petite phrase magique ?

Merci d'avance.

**NoSmoking** · 09/01/2011, 15h01

Bonjour,
sur l'événement onchange de l'input tu appelles la fonction de mise à jour.

**boteha** · 09/01/2011, 15h26

Bonjour,

Merci de ta réponse.

Je suis nul en javascript mais j'ai l'impression que ton truc ne vas pas.

Par défaut, la valeur est 1.
Si l'utilisateur veut taper 100, onchange ne va-t-il pas s'appliquer dès 10 ?

Je n'ai pas de script à appeler.
Il faut juste faire comme si le bouton "Recalculer" avait été cliqué, sachant qu'il existe un autre bouton "Valider" sur le même formulaire.

**NoSmoking** · 09/01/2011, 16h09

Par défaut, la valeur est 1.
Si l'utilisateur veut taper 100, onchange ne va-t-il pas s'appliquer dès 10 ?

il suffit de faire des essais pour ce rendre compte.

Ton bouton Recalcul à bien une action sur son événement onclick du style onclick="Recalcul();", c'est cela qu'il faut mettre sur l'événement onchange de ton input.

**boteha** · 09/01/2011, 16h21

Re-bonjour,

Il n'y a aucun code javascript dans le bouton "Recalculer".

C'est un formulaire html qui envoie à un script PHP.

**ekremyilmaz** · 09/01/2011, 20h36

En utilisant l'ajax....
Par ex, sur l'évènement onblur de ton champ input text.. Tu appel une méthode javascript qui lui fait un traitement ajax...

Actuellement je suis sur un projet où j'ai développé une IHM avec une gestion de colis contenant des articles. Donc j'avais des boutons "ajouter" et "retirer" qui chacun faisait appel à des méthodes ajax.

Donc là pour ton cas, tu peux à mon avis, utiliser l'évènement onblur, c'est à dire qu'à chaque fois que l'utilisateur sort du champ, donc forcement quand il va cliquer...tu fais appel à une méthode ajax qui met à jour ton panier...

**boteha** · 09/01/2011, 21h20

Merci de ta réponse :

En utilisant l'ajax....
Par ex, sur l'évènement onblur de ton champ input text.. Tu appel une méthode javascript qui lui fait un traitement ajax...

Ok pour onblur, mais je ne sais pas ce qu'est un traitement ajax...

Dans mon esprit, une petite phrase magique javascript devrait suffire.

Si onblur, on fait comme si le bouton "Recalculer" avait été cliqué.

**ekremyilmaz** · 10/01/2011, 08h34

ok.
Si j'ai bien compris, ton bouton recalculer, envoi le formulaire html et fais les traitements en php.

Si c'est bien ça.

Il te suffit d'écrire ça en javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
function methodeAppelerDansOnBlur() {
document.form.submit();
}

Bien évidemment la syntaxe de document.form est à revoir selon ton code.
Mais le principe est là, dans ta fonction javascript qui sera appelé dans l'evenemetn onblur, tu met ce bout de code qui va envoyer le formulaire.

Car j'imagine que ton bouton recalculer c'est un simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="submit" value="recalculer"/>

Si c'est ça le bouton de code ci-dessus te suffira..

**boteha** · 10/01/2011, 11h16

Bonjour,

Merci de ta réponse

Effectivement, le bouton submit est bien comme tu dis.

Par contre, il y a plusieurs form dans la page et la soumission par onblur doit s'appliquer uniquement aux input type="text" d'un seul formulaire.

**ekremyilmaz** · 10/01/2011, 11h25

ok.
donc tu dois récupérer le nom de ton formulaire et faire dans la méthode javascript : Il faut bien mettre le nom de ton formulaire si tu en a plusieurs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.formSaisie.submit();

**boteha** · 10/01/2011, 11h41

Merci de ta réponse,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.formSaisie.submit();

formSaisie est le nom du formulaire ?

Il me suffit d'ajouter dans le code html des input type="text" concernés

onblur="document.formSaisie.submit()"

C'est aussi simple que de déclarer une fonction, non ?

**ekremyilmaz** · 10/01/2011, 12h38

oui c le nom du formulaire.
tu met tes input à l'intérieur de ton formulaire.

puis pour chaque input, tu appel ta méthode javascript sur la méthode onblur.
et ça devrait faire l'affaire.

**NoSmoking** · 10/01/2011, 13h16

Il faut juste faire comme si le bouton "Recalculer" avait été cliqué, sachant qu'il existe un autre bouton "Valider" sur le même formulaire.

faut il en conclure qu'il y a 2 boutons qui soumettent dans ta form?

**Bovino** · 10/01/2011, 14h01

Une autre question à se poser est : as-tu vraiment besoin d'un aller-retour vers le serveur pour effectuer un simple calcul ? JavaScript peut le faire facilement...

**boteha** · 10/01/2011, 14h47

Merci de vos réponses.

faut il en conclure qu'il y a 2 boutons qui soumettent dans ta form?

OUI
Il y a le bouton "Recalculer" qui met à jour les valeurs en restant sur la même page et le bouton "Valider" qui met aussi à jour les valeurs mais en passant à l'étape suivante.

onblur doit activer le boutons "Recalculer" et donc la petite phrse à laquelle j'avais pensé n'est pas suffisante.

onblur="document.formSaisie.submit()"

Il faut préciser que le submit s'opère avec le bouton "Recalculer".

as-tu vraiment besoin d'un aller-retour vers le serveur pour effectuer un simple calcul ? JavaScript peut le faire facilement...

Il est possible de sortir de cette page pour envoyer un mail ou consulter les Conditions de vente ou ajouter des produits.
Il faut donc que toute modification du formulaire soit enregistrée au niveau serveur, c'est d'ailleurs très rapide.

**NoSmoking** · 10/01/2011, 18h48

onblur="document.formSaisie.submit()"

si tu dois faire des aller/retour autant utiliser l'événement onchange
petit fichier de test pour te rendre compte

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test &eacute;v&eacute;nement</title>
</head>
<body>
<div>
<input type="text" value="onchange" onchange="alert(this.value);"><br>
<input type="text" value="onblur"   onblur  ="alert(this.value);"><br>
<input type="text" value="onclick"  onclick ="alert(this.value);"><br>
</div>
</body>
</html>

tu te rendra compte que même si c'est rapide tu n'en feras que quand cela est utile

quoi qu'il arrive, si la fonction attachée aux 2 boutons est la même, elle est traitée différemment côté serveur, oui mais comment dans ce cas. Mais la pas sûr d'avoir bien saisi...

**boteha** · 10/01/2011, 19h22

Bonsoir,

Merci de ton test.

En fait, je ne vois pas la différence entre onchange et onblur.

Dans les deux cas, tu es obligé de sortir de l'input et de cliquer sur la page pour provoquer l'événement, ce qui n'est pas un comportement naturel, autant obliger à cliquer sur recalculer.

Autrement, pour te rendre compte, il s'agit du site touslescables.com.

http://www.touslescables.com/

Ajoute un ou mieux plusieurs produits au panier pour voir la page "Touslescables.com : Validation quantités".

Autrement, ce sont quelques utilisateurs qui suggèrent la mise à jour automatique car ils ont vu ça ailleurs, mais dans des sites où l'ergonomie d'achat est différente.

Je ne suis pas sûr que ce soit une bonne idée pour l'ergonomie de touslescables.com mais je réfléchis au problème (avec votre aide).

L'avantage d'une mise à jour non-automatique et que tu peiux d'abord constituer ton panier, pusi préciser les qiuantités, puis valider en une seule fois.

**NoSmoking** · 10/01/2011, 21h03

En fait, je ne vois pas la différence entre onchange et onblur.

- onchange n'est déclenché que si le contenu change entre la prise de focus et la perte de focus
- onblur est déclenché à chaque fois que l'élément perd le focus
donc si l'on se déplace par tabulation il peut y avoir des échanges inutiles, ce n'est pas le cas, dans ton cas puisque le déplacement par tabulation n'est pas prévu.

Concernant le lien fourni, effectivement il y a soumission dans les deux cas avec coté serveur récupération de la value du name="choix", donc sauf à mettre une simulation de click, pas sûr que cela soit encore autorisé, un document.form.submit() est insuffisant.

Le faire en javascript embarqué n'est pas non plus réalisable rapidement il te manque une donnée à savoir le prix unitaire. cela nécessite un peu plus qu'un correctif.

Autrement, ce sont quelques utilisateurs qui suggèrent la mise à jour automatique car ils ont vu ça ailleurs, mais dans des sites où l'ergonomie d'achat est différente.

ils ont forcément raison...bien que sur ce genre de site c'est le besoin qui est important et non pas le coût, en premier lieu s'entend.

Ils ne savaient pas que c'était impossible, alors ils l'ont fait.
Mark Twain.
Merci les papillotes...

**boteha** · 10/01/2011, 21h12

Merci beaucoup de tes commentaires.

Je continue à réfléchir...

**NoSmoking** · 11/01/2011, 16h00

as tu essayé ceci, donc sauf à mettre une simulation de click?

Soumettre formulaire depuis Input type="text"

JavaScript

Discussions similaires

Partager

Partager