Discussion :

[lexgotham]

Bonjour,

Je développe un site en php mais ce que je cherche à faire y trouve ses limites...

En effet, j'ai un énorme formulaire sur un backoffice qui doit permettre de rentrer des informations sur des produits ainsi que l'image associée à chaque produit.
Mon problème réside dans le fait d'avoir un aperçu des images en temps réel avant ou après upload.

Avant l'upload: pas possible semblerait-il (du moins sous Firefox, dommage)
Après upload, oui mais cela nécessite un submit pour cause de sécurité (re-dommage).

J'ai donc un énorme formulaire de données ainsi que de plus petits pointant vers leur iframe respective de manière à pouvoir faire un submit sur chaque image à importer et pouvoir les voir directement sans pour autant devoir rafraichir la page générale, ce qui me permet de garder les données déjà entrées dans le grand formulaire de données.

Tout va bien sauf une chose: pas moyen d'éviter que les formulaires d'images ne se trouvent à l'intérieur du grand formulaire or des formulaires imbriqués ne fonctionnent pas (c'est ce que j'ai vérifié et qui semble confirmé par une recherche google étendue)...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<form 1>
   INPUT données
   <form a>
        INPUT image1
        INPUT submit
   </form a>
   INPUT données
   <form b>
        INPUT image2
        INPUT submit
   </form b>
   INPUT données
 
   INPUT submit des données uniquement
</form 1>

Ma dernière idée a donc été de "partitionner" le grand formulaire en plus petits, de la sorte:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form 1>INPUT données</form 1>
<form a>
     INPUT image1
     INPUT submit
</form a>
<form 2>INPUT données</form 2>
<form b>
     INPUT image2
     INPUT submit
</form b>
<form 3>INPUT données</form 3>
 
<form>INPUT  submit (form1,form2, form3)</form>

Cette solution est élégante mais php ne la permet pas et ne connaissant pas le javascript, j'ai trouvé un code qui permet de faire un submit pour envoyer différents formulaires spécifiques:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<SCRIPT LANGUAGE="JavaScript">
/* Collect all forms passed by array and post it */
function submitFormsById(arFormsSubmit)
{
var formCollector = document.createElement("form");
with(formCollector)
{
method = "post";
action = "http://www.monsite.com/traitement_des_donnees.php";
name = "formCollector";
id = "formCollector";
style.display = "none";
}
 
for(var ix = 0; ix<arFormsSubmit.length;ix++)
appendFormVals2Form(document.getElementById(arFormsSubmit[ix]), formCollector);
 
document.body.appendChild(formCollector);
formCollector.submit();
}
 
/* Function: add all elements from ``frmCollectFrom´´ and append them to ``frmCollector´´ before returning ``frmCollector´´*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
for(var ix = 0 ; ix < frm.length ; ix++)
frmCollector.appendChild(frm[ix]);
return frmCollector;
}
 
</SCRIPT>

Et pour finir:

Code :

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

1
2
 
<INPUT TYPE="submit" value="submit" name="nom" onClick="submitFormsById(Array('form1','form2','form3'))">

C'est parfait mais pour une raison que j'ignore, ce script ne renvoie en post qu'une valeur sur deux. En effet, quand je récupère par exemple 10 champs input, toutes forms confondues, je n'ai que 5 valeurs exploitables et les autres restent désespérément vides.
Ce n'est pas une erreur de ma part puisque si j'ai par exemple deux champs qui ses suivent "poids" et "prix", j'aurai le résultat du poids mais pas du prix MAIS si j'intervertis pour "prix" et "poids", j'aurai le résultat du prix mais pas du poids cette fois-ci...
Pourtant tous les formulaires de données sont bien traités car j'ai bien le résultat des tous...juste que c'est incomplet.

Avez-vous une idée de la résolution de mon cas?
Ou peut-être une autre piste plus simple (mais qui fonctionne)?

Merci!

[Matthieu2000]

-> ajax si tu veux envoyer plusieurs submit
ou un seul gros formulaire

PS : si les champs d'un furmulaire ont le même nom, les navigateurs l'interprete comme un select multiple

[lexgotham]

Merci beaucoup pour ta réponse mais elle ne m'avance pas beaucoup...

Qu'est-ce que tu penses envoyer de manière asynchrone qui règlerait mon problème?
Asynchrone ou pas, un formulaire reste un formulaire (et donc exit les formulaires imbriqués) et en ajax, pas de preview sans upload préalable non plus.

"Un seul gros formulaire" ne fonctionne pas puisqu'il ne me permettrait pas le preview des images dont je parle.

Quant au PS, aucun des champs de mes formulaires ne partagent le même nom.

Merci de bien vouloir préciser ta pensée, s'il te plait.

Pour le reste, es-tu bon en javascript? Assez pour comprendre pourquoi ce script zappe un champ sur deux dans mes formulaires ?

A+!

[Matthieu2000]

C'est pour faire des boucles côté serveur...

[lexgotham]

Encore une fois merci Mathieu2000 de te pencher sur mon cas mais comprends-moi quand je te dis que ton message ne m'aide pas.
Si je ne suis pas assez bon pour débugguer ce script, il y a des chances que je ne le sois pas plus pour trouver la solution à partir d'une phrase aux allures de charade.
En quoi faire des boucles côté serveur peut-il régler mon cas?
Php fait des boucles côté serveur et pourtant il ne peut résoudre mon problème.

Je sais qu'il ne faut pas que j'attende qu'on m'offre la réponse sur un plateau d'argent et je n'ai rien contre le fait de chercher mais là...
D'autant plus que j'y ai mis du mien pour que la question soit claire et détaillée.

Un exemple concret peut-être ou une explication qui corresponde à mon cas précis?

Autre chose: tu sembles ne pas tenir compte du script que j'utilise. Est-il problématique, inefficace, inutile?

Ce genre de choses...

Merci pour ton aide et à tous ceux qui voudront bien m'aider.

[SpaceFrog]

des forms imbriqués ... heu c'est a peu près la pire des chose qu'il m'ait été donné de voir ...

pourquoi ne pas faire qu'un seul form .. ?

tu peux ne soumettre que certains elements du form :
au lieu d'un sous form mets des fieldsets et supprime du flux au moyen d'un display none sur le onsubmit ceux que tu ne souhaites pas envoyer ...

mes les champs en disabled ...

mais par pitié un seul form sur la page

[RomainVALERI]

Asynchrone ou pas, un formulaire reste un formulaire (et donc exit les formulaires imbriqués) et en ajax, pas de preview sans upload préalable non plus.

Es-tu obligé de t'en tenir au mécanisme classique de soumission des formulaires, qui ici te pose des problèmes assez tordus ? L'apport d'Ajax ici serait surtout de traiter "à la main" avec une fonction écrite spécialement pour ça, l'envoi des données au serveur. C'est effectivement plus long que de s'appuyer sur le submit d'un ou plusieurs form, mais au moins tu controlerais à 100% ce que tu envoies, et quand... ^^

Je ne sais pas si ma réponse est claire et/ou pertinente, mais tiens-nous au courant et on continuera à chercher...

PS : Ok mathieu est bavard comme ma chaise mais il essaie de t'aider et a de bonnes connaissances alors ne le mords pas

[lexgotham]

SpaceFrog:

Je vois +/- ce que tu proposes (mes connaissances en dehors du php étant limitées) mais il reste une inconnue:
Comment faire pour que dans le cas d'un upload d'image, seule celle-ci soit traitée (et affichée automatiquement sur ma page) tout en gardant les autres données entrées par l'utilisateur intactes et non validées et que dans le cas d'un upload de données seules celles-ci soient traitées, sans uploader à nouveau les images?
Une chose est sûre, la page ne doit être rafraichie que pour un submit de données et non lors de l'upload/affichage d'images.

Dans ce que tu proposes, je comprends que le submit n'agira que sur les champ en display (perte des données des champs masqués alors?) mais comment distinguer le fait que l'utilisateur veuille soit uploader une image, soit valider les données?
C'est le côté "contextuel" que je ne saisi pas.
Merci en tout cas, c'est une piste intéressante !

RomainVALERI:

J'aurais en effet voulu traiter les images sans submit mais même avec Ajax, je ne vois pas comment car il faut un méchanisme d'upload. Après ça se complique car, AJAX ou pas, pour voir l'image il faut au moins l'envoyer sur le serveur mais sans bouton submit c'est exclu (on crie à l'hérésie quand je le propose car cela serait considéré comme une faille de sécurité d'envoyer un fichier sans click de l'utilisateur).
C'est vrai que je ne suis pas attaché au bouton submit pour les images, mais comment l'éviter.
Saurais-tu m'en dire plus sur ton idée?

Merci en tous cas pour vos réponses.
Si vous pouviez détailler vos propositions, ce serait cool .

Je redemande au cas où: Vous semblez tous éviter le script qui, pourtant, est à un cheveu de me dépanner. Qu'est-ce qui y pose problème?
Car il me semble que je garde le contrôle de ce qui est envoyé et que cela réponde à mon cas: si j'upload et soumets les images, elles apparaissent sans rafraichir la page et si je valide les données, seules celles-ci partent vers un script de traitement sans se soucier des images qui sont déjà uploadées.
Je n'insiste pas dans cette voie, juste que l'ignorer m'intrigue...

Merci à tous ceux qui ont participé à ce thread!

En ce qui concerne la clarté et la pertinence de vos réponses, je serais mal avisé de faire des remarques mais avouez que, érudit ou non, une phrase dans le vague n'a jamais eu pour vocation d'aider à résoudre un problème.
Cela dit, je pense être resté courtois et suis venu avec des arguments. On peut exprimer un différend sans se prendre le chou. Je n'ai ni mordu ni craché dans la soupe, cela dit, mes excuses à Mathieu2000 si je l'ai offensé, ce n'était pas mon but.

[SpaceFrog]

pourquoi perte des données ???
si le champs n'est pas transmis, un simple test isset coté sevreur et pas de traitement... donc les données de la table ne sont pas modifiées ...

qu'est ce qui détermine si les données doivent être modifiées ou pas ? le fait que le champs soit renseigné ou qu'il ai été modifié ?

Le principe reste le même sur le onsubmit tu testes si le champs est renseigné ou lors de sa modifiaction tu modifies un flag qui te permettra de le basculer ensuite en display none lors du submit ...