Attribuer dynamiquement un <input> à l'un ou l'autre formulaire.

Version imprimable

Bonjour-bonsoir à tous.

Je précise que j'ai cherché une réponse à mon problème, mais je n'ai rien trouvé. Est-il trop spécifique, ou est-ce que je ne sais pas interroger Google...?

J'ai déjà parlé il y a une quinzaine de mon programme de gestion d'une base de données de comptabilité : Il y a du PHP-MySQL, du HTML/CSS et du javascript, c'est compliqué et il y a beaucoup de code.

Le principe est le suivant : on lit la base de données, et on affiche ses enregistrements dans une table. L'utilisateur peut cliquer dans une ligne de cette table, et l'enregistrement est alors présenté dans un formulaire. Il peut modifier les champs, et cliquer sur un bouton pour sauvegarder les nouvelles données, ou sur un autre bouton pour créer un nouvel enregistrement.

Les données sont transmises en POST, et l'action est vide, c'est à dire que le programme invoqué est le programme actuel.

Maintenant, voici le problème : suivant telle ou telle particularité de l'enregistrement choisi, il y a deux formulaires, mais beaucoup de données sont communes aux deux. Une donnée typique se présente comme ceci :

Code:

<input type="text" name="donnee1">

Bien entendu, le contenu de la donnée est rempli à partir de la base de données, en javascript, puis vérifié avant envoi, toujours en javascript.

Mais s'il y a deux formulaires avec 'donnee1' en commun, je vais me retrouver avec getElementsByName("donnee1")[0] et getElementsByName("donnee1")[1] !

L'idée pour contourner ce problème serait de situer cet "<input>" en dehors de tout formulaire, et de fixer son attribut "form" dans le programme javascript qui va le soumettre.

J'ai essayé, et ça n'a pas marché.

Voici le code pour soumettre le formulaire "Saisie" :
Code:

1 2 3 4 5 6 7 8 function executer(bouton) { document.getElementsByName('Fonct')[0].value='ligne'; document.getElementsByName('Act')[0].value=bouton; document.getElementsByName('Fonct')[0].form="Saisie";; document.getElementsByName('Act')[0].form="Saisie";; document.Saisie.submit(); }
Si quelqu'un peut m'aider, qu'il soit remercié.

AMIcalement.

30/11/2019, 00h19
mathieu

pour pouvoir sélectionner précisément un des champs, le plus simple est de rajouter un attribut "id" à chaque champ. vous aurez ainsi un identifiant unique qui permet d'indiquer avec quel champ vous voulez travailler.
30/11/2019, 07h41
L'AMI Yves

Merci de la réponse, Mathieu.

Cependant, il me semble que cela ne répond pas à mon problème : bien sûr, avec un "id=", je peux sélectionner sûrement l'objet désigné, mais je peux également le faire en utilisant le "name=" et son index : getElementsByName('toto')[i] d'un côté, getElementsById('toto') de l'autre. Et je veux justement ne pas avoir à gérer ce "[i]" dans la programme cible.

Ce que je comprends du fonctionnement du passage des paramètres avec les formulaires, c'est qu'ils sont identifiés par leur "name". S'il y a plusieurs variables "input" ayant le même "name", il s'agira d'un tableau, et, que je sache, le tableau sera passé comme tel, et c'est un tableau que je retrouverai dans le "$_POST" dans le programme php cible du formulaire (je n'ai pas encore testé cette hypothèse ; c'est la prochaine étape, dès que celle-ci sera résolue).

Encore merci.

Amicalement.
30/11/2019, 08h42
mathieu

Citation:

Envoyé par L'AMI Yves

Et je veux justement ne pas avoir à gérer ce "[i]" dans la programme cible.

c'est pour ça que je vous proposais de les sélectionner par leur identifiant.
il faudrait que vous nous donniez plus de détails sur la façon dont vous utilisez les formulaires parce que je ne comprends pas où est le soucis.
30/11/2019, 09h35
L'AMI Yves

Je ne sais pas si la communauté de ce forum est prête à approuver la structure (compliquée) de programmes que j'ai choisie : il y a un programme php "racine" qui recueille les données des formulaires, et, en fonction de celles-ci, effectue un "include" qui va faire différents traitements dépendant des actions de l'utilisateur. L'ensemble de la racine et de l'include constitue donc un "module" qui s'appelle lui-même (la "cible" des formulaires") et se reconfigure à la demande.

C'est une structure que j'ai déjà utilisée de nombreuses fois dans des programmes d'interface avec des bases de données, je trouve que cela évite beaucoup de redites, au prix, c'est vrai, d'une certaine difficulté à appréhender le fonctionnement global de l'application.

Mais c'est la première fois que j'ai à traiter deux formulaires, c'est à dire que le programme "racine" va devoir traiter deux jeux de variables, provenant soit de l'un, soit de l'autre formulaire de l'étape précédente. C'est pour éviter de le compliquer que je souhaiterais pouvoir attribuer les variables communes, soit à l'un, soit à l'autre formulaire, à l'aide de l'attribut "form" des "input" de ces variables.

Le problème du "[i]" ne se pause pas au niveau des formulaires ou des javascripts associés, mais du traitement de ce que je retrouverai ensuite dans "$_POST" de la racine.

Suis-je assez clair ?
30/11/2019, 10h08
mathieu

ne vous inquiétez pas d'une approbation ou non, le plus important est que cela reste clair pour vous. et puisque vous faites l'effort de réfléchir à la façon d'organiser vous finirez par trouver une organisation du code qui vous convient. et donc quand vous aurez besoin de rajouter une fonctionnalité dans 1 an, vous serez content d'avoir pris ce temps pour produire un code clair.

en ce qui concerne l'organisation de vos formulaires, on va prendre l'exemple un formulaire "voiture" avec les champs "marque" et "nombre de porte" et d'un autre côté un formulaire "pneu" avec les champs "marque" et "matière".
dans ce cas vous pouvez utiliser name="donnees[voiture][marque]" et vous récupérez sa valeur dans $_POST["donnees"]["voiture"]["marque"]. et comme ça vous n'aurez pas de conflit entre les 2 champs.

Bonjour,

Je vais essayer de comprendre....

Citation:

Envoyé par L'AMI Yves

...cliquer sur un bouton pour sauvegarder les nouvelles données, ou sur un autre bouton pour créer un nouvel enregistrement.

Donc :

bouton "Modifier"
et bouton "Ajouter"

Citation:

...Les données sont transmises en POST...

Donc, le traitement se fera en PHP.

A priori, il n'y a pas besoin :

NI de traitement JavaScript avant envoi,
NI utilisation de 2 formulaires

UN SEUL formulaire suffit, pour peu que les 2 boutons soient dedans :
Code:

1 2 3 4 5 <form method="post" action=""> ... <input type="submit" name="btnModifier" value="Modifier l'enregistrement" /> <input type="submit" name="btnAjouter" value="Ajouter un nouvel enregistrement" /> </form>
Selon qu'on clique sur l'un ou l'autre bouton, on récupérera UN SEUL des 2 :

soit $_POST['btnModifier']
soit $_POST['btnAjouter']

Avec de simples if(isset(...)), on peut donc facilement différencier l'action.
Code:

1 2 3 4 5 6 7 if(isset($_POST['btnModifier'])) { ... } elseif(isset($_POST['btnAjouter'])) { ... }

30/11/2019, 11h58
javatwister

Citation:

Envoyé par jreaux62

Selon qu'on clique sur l'un ou l'autre bouton, on récupérera UN SEUL des 2 :
soit $_POST['btnModifier']
soit $_POST['btnAjouter']

Tu es sûr? Je n'ai jamais pensé à ça. D'instinct, j'aurais dit que les 2 étaient transmis! (faut que j'essaie)

Ecoutez, vous êtes très gentils d'essayer de m'aider, mais je pense que je me suis fourvoyé en essayant de vous expliquer pourquoi je voulais faire ce que je voulais faire.

Si cela vous est possible, essayez de faire abstraction du "pourquoi", et ne vous embarquez pas dans le "pourquoi ne pas faire autrement".

Le problème que je rencontre me surprend, car il me semble qu'il ne devrait pas se poser. Je vous le reproduit ci-dessous :
Code:

1 2 3 4 5 6 7 8 function executer(bouton) { document.getElementsByName('Fonct')[0].value='ligne'; document.getElementsByName('Act')[0].value=bouton; document.getElementsByName('Fonct')[0].form="Saisie";; document.getElementsByName('Act')[0].form="Saisie";; document.Saisie.submit(); }
Cela ne fonctionne pas ! Je voudrais savoir pourquoi, en quoi ce n'est pas conforme à la syntaxe ou aux principes généraux du DOM ou dieu sait quoi.

Par exemple, si "Act" et "Fonct" sont uniques dans le document, est-il incorrect d'utiliser "[0]", ou bien est-ce que ça marcherait avec "getElementById" ?

De toutes façons, je vais essayer tout ça cet après-midi, et je ne manquerai pas de venir le dire ici si je trouve quelque chose qui marche.

AMIcalement.

30/11/2019, 12h13
javatwister

Ah mais oui dis donc! ça marche et ça ouvre des perspectives de simplification!

@javatwister

Citation:

Envoyé par javatwister

Ah mais oui dis donc! ça marche et ça ouvre des perspectives de simplification!

Oui (j'avais bien sûr testé avant ;) )
Il faut évidemment que ce soient des <input type="submit">.

On peut même aller plus loin, avec l'attribut formaction, pour définir des fichiers de traitement différents * :
Code:

1 2 3 4 5 <form method="post" action=""> ... <input type="submit" name="btnModifier" value="Modifier l'enregistrement" formaction="form-traiter-modifier.php" /> <input type="submit" name="btnAjouter" value="Ajouter un nouvel enregistrement" formaction="form-traiter-ajouter.php" /> </form>
* (Là, en l'occurrence, ça n'a pas forcément d'intérêt, mais ça peut le devenir dans d'autres circonstances).

@L'AMI Yves

Citation:

Envoyé par L'AMI Yves

...et ne vous embarquez pas dans le "pourquoi ne pas faire autrement"...

Tu es "bien gentil" aussi, mais j'ai vu tes codes : ce sont des usines à gaz.

De plus, tu nous demandes des solutions, sans jamais montrer ton code (nécessaire et suffisant).
Tu peux copier 1000 fois les mêmes 8 lignes de code que ça n'apporte rien de plus : tu ne montres pas le code HTML associé !! (ou, au moins, un extrait simplifié)
Donc...

30/11/2019, 16h20
L'AMI Yves

Oui, je suis réticent à montrer mon code. Ça n'est pas très agréable de se faire dire "ce sont des usines à gaz". Je n'ai pas peur de coder des usines à gaz, si j'estime avoir besoin d'une usine à gaz. Par contre, ceux qui lisent mon code et ne savent pas ce que je veux faire (et, souvent, me semble-t-il, ne lisent pas - ou ne comprennent pas - mes explications) répondent en disant que je devrais faire autre chose : pas top non plus.

Pourquoi dis-tu

Citation:

Il faut évidemment que ce soient des <input type="submit">.

Ce sont en fait des <input type='hidden'>. Est-ce que ce serait pour ça que ça ne fait pas ce que j'espère ?
30/11/2019, 16h32
Invité

Usine à gaz ou pas, si tu ne montres pas le code nécessaire et suffisant, on ne peut pas répondre.
Point.

Eh bien on va voir si le code est plus clair.

Définition du formulaire, dans une partie HTML du source php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <input type='hidden' name='Fonct'> <input type='hidden' name='Act'>  <form id='Saisie' action='' method='post'> <div class='sous-titre'>Formulaire de saisie des écritures, à partir de la ligne N° <input type='text' name='var0' readonly>. [couic toute une série d'<input>...] <table id='boutons' class='table2'> <caption>Après avoir modifié cette écriture, vous pouvez :</caption> <tr><td id='bouton1'><td><input type='button' value='1' onclick='executer(1)'> [couic toute une série de boutons...] </tr> </table> </form>
Je suppose qu'il n'est pas nécessaire de montrer encore une fois la fonction "executer" située dans un module ".js".

Je précise qu'au début de ce dialogue, mon formulaire était défini par "<form name='Saisie'...>. D'après Google, l'attribut "form", que l'on peut spécifier sur n'importe quel "input", doit faire référence à l'"id" du formulaire cible. J'ai donc fait la modif dans mon code, mais ça ne marche toujours pas. En mettant l'"alert" qui va bien dans "executer()", la valeur des variables est bonne, mais le "form" affiche "null". Je suis sous firefox 70.0.1

30/11/2019, 17h19
Invité
1- Tu as parlé de "deux formulaires"... Or ton code n'en montre qu'un seul...:roll:

2-

Citation:

Envoyé par L'AMI Yves

... l'attribut "form", que l'on peut spécifier sur n'importe quel "input"...
- Vu : <input> attribut form
- Tu ne sais pas appliquer un attribut : Element.setAttribute()
Code:

1 2 document.getElementsByName('Fonct')[0].setAttribute('form', 'Saisie'); document.getElementsByName('Act')[0].setAttribute('form', 'Saisie');
(je me demandais justement à quoi servaient ces lignes...)

3- Quant à la soumission du formulaire :

Code:

document.getElementById('Saisie').submit();

4- Tout ce blabla pour ça !...
Encore une fois, tu as bien noyé le poisson !!
Même tes "explications" sont des usines à gaz !!! :scarymov:

4a- Ta question se résume à :

Citation:

Comment attribuer en JavaScript un attribut "form" à un <input> ?

4b- Le code HTML nécessaire et suffisant était :
Code:

1 2 3 4 5 6 <input type='text' name='Fonct'> <input type='text' name='Act'> <form id="Saisie" method="post" action=""> ... </form>
4c- Réponse : voir les liens donnés ci-dessus.
30/11/2019, 17h51
L'AMI Yves

Première remarque : le code que j'avais montré pour "executer(bouton)" était devenu obsolète quand je me suis aperçu que "form=" devait faire référence à un "id", et non un "name=", mais j'avais fait la correction.

Deuxième remarque : ta solution "setAttribute('form','Saisie')" fonctionne, merci.

Dans l'intervalle, je m'étais aperçu que la mienne fonctionnait si les boutons étaient inclus dans n'importe lequel des formulaires. Cela signifie qu'on peut modifier l'attribut 'form' (et sans doute bien d'autres) s'il existe déjà, mais qu'il faut le définir explicitement s'il n'est pas déjà défini. Pourtant, la doc dit que si l'élément est défini en dehors d'un formulaire, il sera "attribué" au plus proche...

Troisième remarque : il me semble que tu n'avais pas besoin de voir le code de définition d'un formulaire (encore moins des deux) pour proposer ta solution.

Mais quoi qu'il en soit, le problème est résolu : MERCI.

AMIcalement.
30/11/2019, 17h54
Invité

Citation:

Envoyé par jreaux62

...Le code HTML nécessaire et suffisant....

Je t'invite à chercher la définition de "nécessaire et suffisant".
Bonne soirée.