Soumettre formulaire depuis Input type="text"

[boteha]

Bonjour,

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

Code :

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]

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

[boteha]

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]

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]

Re-bonjour,

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

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

[ekremyilmaz]

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]

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]

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 :

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 :

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

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

[boteha]

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]

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 :

1
2
 
document.formSaisie.submit();

[boteha]

Merci de ta réponse,

Code :

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]

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]

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]

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]

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]

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 :

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]

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]

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]

Merci beaucoup de tes commentaires.

Je continue à réfléchir...

[NoSmoking]

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