Un formulaire à l'intérieur d'un autre formulaire ...

Bonsoir à vous,
apparemment, il n'est pas possible d'incorporer un formulaire dans un autre formulaire.
Dans mon cas, je ne vois pas comment faire autrement que d'incorporer un formulaire dans un autre.
En fait, j'ai mon formulaire principal dans lequel se trouvent tous les champs et, à l'intérieur de ce formulaire, j'ai un autre formulaire qui me permet de faire un upload d'un fichier. Malheureusement, je ne pense pas que ce soit possible de faire un upload que via un formulaire.
Voici mon code HTML :

        <div id="container" class="container">
            <form action="form.php" method="post" role="form">
                <div id="upload-picture" class="upload-picture">
                    <div class="upload-frame">
                       <form method="post" id="myForm" autocomplete="off" enctype="multipart/form-data">
                          <div class="info-file">
                             <!-- actual upload which is hidden -->
                             <input type="file" name="file-upload" id="actual-btn" hidden/>
                             <!-- our custom upload button -->
                             <label for="actual-btn" class="label-upload-btn">Choisissez une image</label>
                             <!-- name of file chosen -->
                             <span id="file-chosen">Aucun fichier choisi</span>
                          </div>
                          <div class="info-upload">
                              <button type="button" id="uploadBtn" class="btn-upload">Télécharger</button>
                          </div>
                       </form>
                    </div>
                </div>
            </form>
        </div>

Merci d'avance.

Bonne soirée,
Thierry

Bonsoir Thierry,

pourquoi vouloir mettre un <form> dans un autre <form> ? Je n'ai pas bien compris le but recherché...

On peut cependant mêler dans un formulaire des <input type="text"> et des <input type="file">, à condition de bien spécifier l'attribut enctype du <form> à "multipart/form-data". Vous pourrez ensuite vérifier et accéder à leurs valeurs respectives avec $_POST et $_FILES.

Edit : j'ajoute également qu'on peut aussi utiliser un <button type="submit" form="IDdeMonFormulaire">, qu'on peut placer n'importe où, sans qu'il soit forcément descendant du <form> en question, si ça peut aider.

<button> MDN
Modifié par Loraga (31 Aug 2020 - 21:06)

Bonsoir Loraga,

tout d'abord, je tenais à vous remercier pour votre réponse à ma question.

En fait, c'est parce que j'ai un formulaire principal qui doit utiliser également les champs du formulaire de type upload qui se trouve à l'intérieur.

J'ai un formulaire qui me permet de changer l'image de ma <div> avec l'upload. Par la suite, le formulaire principal permet de récupérer toutes les données de la page ainsi que les données mises à jour par le formulaire upload afin de venir mettre à jour la base de données.

Est-ce que j'aurai accès à tous les champs si j'utilise un bouton de type submit à la place d'un formulaire dont l'attribut enctype est "multipart/form-data" ?

Merci d'avance.

Bonne soirée,
Thierry

Avec plaisir

THIRT05 a écrit :
Est-ce que j'aurai accès à tous les champs si j'utilise un bouton de type submit à la place d'un formulaire dont l'attribut enctype est "multipart/form-data" ?

Le <button type="submit"> ne peut pas remplacer un <form> entier ! Il remplacera plutôt un <input type="submit" /> (qui lui doit forcément être descendant d'un <form>. Je n'avais pas bien compris votre problématique, je partageais cette info dans le cas où vous souhaitiez avoir deux form distinct (et pas l'un dans l'autre) tout en plaçant leur submit respectifs à l'endroit souhaité dans votre HTML.

Le form avec son enctype spécifié à multipart/form-data est toujours obligatoire si vous avez un <input type="file" /> pour transférer un fichier vers votre serveur web :

<form method="post" action="#" enctype="multipart/form-data">
  <label for="firstname">Votre prénom :</label>
  <input type="text" id="firstname" name="firstname" />

  <label for="lastname">Votre nom :</label>
  <input type="text" id="lastname" name="lastname" />

  <label for="picture">Sélectionnez une image à télécharger :</label>
  <input type="file" id="picture" name="picture" />

  <input type="submit" value="Envoyer" />
</form>

Dans le traitement, on pourra ensuite sans problème accéder aux variables $_POST['firstname'], $_POST['lastname'], mais aussi aux $_FILES['picture']['name'], $_FILES['picture']['type'], $_FILES['picture']['error'], etc.

Sinon, vu votre problématique, vous pouvez par exemple utiliser les sessions de PHP pour stocker l'URL de l'image afin de l'afficher dans votre <div>, avant de la sauvegarder en BDD plus tard.

Bon développement

Bonjour Loraga,

encore une fois, je tenais à vous remercier pour votre réponse à mon message.

En fait, je crains que je vais avoir des soucis car ça va être trop compliqué à gérer. En fait, afin de ne pas recharger la page par rapport à l'image que je souhaite changer, j'utilisais de l'ajax avec une page PHP afin de mettre la base de données à jour.

L'autre formulaire soumettait toute la page et permettait de mettre les autres données à jour dans la base de données.

Dans je vais peut-être devoir créer un formulaire pour le fichier que je dois uploadé et pour l'autre formulaire, je vais devoir le supprimer et utiliser de l'ajax pour mettre à jour la base de données. Le problème, c'est que je risque de devoir faire passer énormément de champs via ajax à ma page PHP pour mettre à jour la base de données.

Qu'en pensez-vous ?

Merci d'avance.

Bonne journée,
Thierry

Salut,

Perso, je n'arrive pas à comprendre ce que tu veux faire . Du coup :
Tu veux faire quoi exactement ? (en terme de fonctionnement, sans trop parler du code)


Vu que cela parle à un moment de changer l'image de ta div :
Si l'objectif c'est juste d'afficher l'image (momentanément le temps que le formulaire soit validé par exemple), cela peut se faire en simple javascript (donc sans ajax ni php ni changement en bdd).

Exemple simple pour juste afficher l'image que l'on voudra déposer : https://jsfiddle.net/3nrpm72b/
Et pour info : ce n'est pas parce que l'on indique une extension que cela limite réellement l'envoie du fichier à cette extension la... cela implique donc d'autres vérifications à faire (aussi bien coté client que serveur)

Bon courage,
Mathieu

Bonjour Mathieu,

merci pour votre réponse à ma question.

En effet, c'est un peu plus compliqué que juste afficher l'image sélectionnée.

En fait, j'ai un premier formulaire dans lequel se trouve cette fameuse image en plus d'autres champs. Pour cette fameuse image, j'ai un formulaire dont l'attribut enctype est "multipart/form-data". Pour changer l'image, j'utilise de l'ajax pour appeler une page PHP pour contrôler le fichier sélectionné ainsi que sauver les différentes informations du fichier dans la base de données. Le fichier est également copié sur le serveur.

Après, quand on clique sur le bouton sauver, la partie PHP de la page est exécutée pour sauver le restant des données dans la base de données.

Donc, si je comprends bien, il serait possible que je récupère toutes les infos qui se trouvent dans le champ input de type FILE afin de copier le fichier sur le serveur et de mettre à jour la base de données ?

Merci d'avance.

Bonne journée,
Thierry

Salut,

tu vois certainement de quoi tu parles et ce que tu veux faire, mais personnellement je ne comprends toujours pas ce que tu veux faire

Si un visiteur vient sur cette page, il doit faire quoi ? (A priori il vient, il rempli des champs il dépose une image et il valide le formulaire)
Si un visiteur envoie quelques choses, tu attends quoi comme résultat du coté du serveur ? (A priori un premier lot d'information en ajax quand il dépose l'image puis un 2e lot d'informations à la validation du formulaire)
Si un visiteur envoie quelques choses, il s'attend à quoi comme résultat de son coté ?


Enfin bref, a priori ton traitement ajax n'a pas besoin d’être un formulaire complet à part entière : c'est une fonction javascript qui est appelé sur un évènement qui n'est pas nécessairement la validation d'un formulaire, ça peut être juste sur le dépôt de l'image dans ton cas par exemple.

Et sinon au pire du pire (je sais pas si c'est très propre) : il doit y avoir moyen de faire 2 formulaires distincts puis de faire des champs cachés pour récupérer les valeurs du 1er formulaire dans le 2e.

Bonjour Mathieu,

je tenais encore à vous remercier d'avoir répondu à mon problème.

Je vais essayer de vous expliquer plus simplement la problématique. En fait, j'ai une table avec différents éléments qui peuvent apparaître plusieurs fois (entête du message, corps du message, bas de page du message). Pour l'entête du message, l'utilisateur peut changer l'image quand il le souhaite. Donc, l'image existante est remplacée par la nouvelle image. Pour le traitement, je viens lire une table, je parcours les différents éléments que j'affiche sur la page. Comme vous vous en doutez, il peut y avoir plusieurs entêtes, corps de message et bas de page du message. Dans mon cas, j'ai un 1er formulaire qui va contenir tous ces éléments de la table et à l'intérieur de ce formulaire, j'ai donc un 2ème formulaire pour me permettre de changer l'image de l'entête. Le problème, dans ce cas-ci, est qu'on ne peut pas avoir de formulaires imbriqués. Donc, dans ce cas-ci, je suis face à un dilemme car j'ai le formulaire qui me permet d'uploader une image qui est imbriqué dans le formulaire contenant tous les éléments de ma table.

En ce qui concerne le formulaire pour l'upload, j'ai une requête ajax qui va appeler une page php pour copier l'image sur le serveur, mettre à jour la base de données et finalement, au retour de l'exécution de la page php, venir écraser l'ancienne image par la nouvelle.

Le formulaire principal, quand à lui, va me permettre de sauver tous les éléments qui ont été remplis par l'utilisateur dans la base de données.

Le problème, d'après ce que j'ai pu comprendre, c'est qu'on doit automatiquement avoir un formulaire pour l'upload. On ne sait apparemment pas faire autrement.

J'espère que vous comprenez mieux ce que je souhaite faire ?

Merci d'avance.

Bonne journée,
Thierry

Bon c'est déjà un petit peu mieux pour le contexte.
Du coup première question qui me vient : pourquoi ce n'est pas le premier formulaire qui met tout à jour d'un seul coup (les éléments de la table et l'image) ?

En 1ere solution , cela pourrait être simplement de ne pas imbriquer le formulaire d'upload mais de le mettre avant ou après l'autre.

En 2e piste, pour moi le principe d'un formulaire : appeler une nouvelle page et lui transmettre les informations qu'il contient (généralement on renvoie vers une nouvelle page qui fait le traitement coté serveur qui renverra ensuite vers une autre page de confirmation que le traitement du formulaire était bon ou non)

Si ton formulaire d'upload est bien en ajax c'est qu'il ne redirige pas vers une nouvelle page mais qu'il dialogue directement avec le serveur sans recharger la page et donc cela ne colle pas avec ma definition d'un formulaire, je ne vois donc pas vraiment de raison que cela soit un formulaire entier.

Bonjour Mathieu,

encore merci pour votre aide et vos conseils.

En fait, je n'ai pas d'autres choix que d'imbriquer le formlaire d'upload dans l'autre formulaire car il peut y avoir plusieurs entêtes (qui utilisent l'upload) dans le formulaire principal. Donc, comme je parcours ma table, je ne sais pas mettre l'upload en-dehors de ce formulaire-là vu que je génère le code dans ma boucle qui se trouve dans le 1er formulaire afin de pouvoir mettre tous les champs à jour.

En effet, j'utilise l'ajax pour l'upload, donc, le but est que le traitement (copier l'image, mettre à jour la base de données pour l'image et écraser l'ancienne image par la nouvelle) se fasse sans que la page ne soit rechargée. Le problème, c'est que pour utiliser l'upload, on ne sait pas faire autrement que d'utiliser un formulaire dont l'attribut enctype est "multipart/form-data".

Pour la 2ème piste, est-ce également via une requête ajax ou dois-je appeler une autre page PHP ? Si je dois appeler une autre page PHP, je pense que je n'ai pas d'autres choix que d'utiliser un formulaire afin de faire passer les différentes valeurs des différents champs ? Ou dois-je utiliser des variables sessions, ce qui, je pense, ne serait pas une bonne solution ?

Avez-vous un exemple de comment je peux implémenter votre 2ème solution ?

J'espère que vous comprenez mieux mon souci et le fait que je me pose la question de comment faire sans formulaires imbriqués car l'upload nécessite un formulaire dans tous les cas de figure ?

Êtes-vous d'accord avec moi que, dans ce cas-ci, je ne sais pas faire autrement que d'avoir des formulaires imbriqués ?

Merci d'avance.

Bonne journée,
Thierry

Donc il y a plusieurs formulaire upload dans les entêtes c'est ça ?
Il ressemble à quoi le formulaire complet ? Un truc dans le genre ? :

<form>
<entete_message><form upload></form upload></entete_message>
<corps_message></corps_message>
<fin_message></fin_message>
<entete_message><form upload></form upload></entete_message>
<corps_message></corps_message>
<fin_message></fin_message>
<entete_message><form upload></form upload></entete_message>
<corps_message></corps_message>
<fin_message></fin_message>
</form>

A quoi cela sert de préupload les images ? Pourquoi ce n'est pas un seul formulaire qui met tout à jour d'un seul coup ?



En cherchant rapidement sur google pour ne pas utiliser de form :
https://stackoverflow.com/questions/19617996/file-upload-without-form
ou
https://gist.github.com/w3villa/7561604
ou
https://www.codexworld.com/ajax-file-upload-with-form-data-jquery-php-mysql/

Plus ou moins complet.

Bonjour Mathieu,

merci pour votre réponse ainsi que les recherches que vous avez faites.

En effet, il y a plusieurs entêtes (formulaire upload) dans le formulaire principal.

Je souhaite faire un preload de l'image pour que l'utilisateur remarque directement ce que donne l'image qu'il a choisie. Donc, c'est pour cette raison que j'utilise l'ajax pour que l'utilisateur voit ce que ça donne sans que la page ne se recharge.

Apparemment, il s'agirait d'utiliser des plugins (librairies) afin de pouvoir faire en sorte de faire un upload sans utiliser les formulaires.

Par contre, dans le 3ème lien, c'est ce que je fais actuellement. J'ai un formulaire pour l'upload et j'utilise une requête ajax pour le traitement. Malheureusement, comme j'ai un formulaire upload dans un autre formulaire, l'événement pour l'upload ne fonctionne pas.

Merci à vous pour votre aide.

Bonne journée,
Thierry

Bonjour Mathieu,

ce n'est pas une requête ajax, c'est seulement du javascript, mais ça permet de faire un upload sans utiliser un formulaire. Je suppose que je peux faire en sorte que ce soit une requête ajax afin de réutiliser mon traitement ...

Voici le lien de cette source :

https://codepen.io/aaronvanston/pen/yNYOXR

Merci encore pour votre aide.

Bonne journée,
Thierry

THIRT05 a écrit :

Je souhaite faire un preload de l'image pour que l'utilisateur remarque directement ce que donne l'image qu'il a choisie. Donc, c'est pour cette raison que j'utilise l'ajax pour que l'utilisateur voit ce que ça donne sans que la page ne se recharge.

Est ce que tu peux préciser la partie "l'utilisateur voit ce que ça donne" ?
Parce que pareil il suffit juste de le faire en javascript coté client sans rien changer coté serveur (c'est un peu la toute 1ere solution que je proposais)

THIRT05 a écrit :

Par contre, dans le 3ème lien, c'est ce que je fais actuellement. J'ai un formulaire pour l'upload et j'utilise une requête ajax pour le traitement. Malheureusement, comme j'ai un formulaire upload dans un autre formulaire, l'événement pour l'upload ne fonctionne pas.

Cela doit être parce que pour ton ajax tu fais une capture de l'événement submit, mais tu dois pouvoir le faire sur d'autres événements