Un seul submit pour règner sur tous les formulaires
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:
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:
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:
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:
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!
