insérer un champ formulaire entre balises en conservant les valeurs [Résolu]

[Chello]

Bonjour,

Je génère une page dynamique où peuvent s'enchasser plusieurs formulaires.

Comme c'est pas bien, et afin d'éviter les impairs, je me contente de positionner des balises span au moment du chargement de la page, là où un formulaire pourrait prendre place.

L'utilisateur rentre ses données. Le bouton d'envoi appelle alors une fonction js submit(id, target, method) censée générer le formulaire et le soumettre.

Problème : comment faire ?

J'ai commencé par innerHTML, mais il m'efface les données entrées par l'utilisateur.

Code :

1
2
3
4
5
submit(id, target, method) {
newspan = document.getElementById(id);
newspan.innerHTML = "<form id='"+id+"' action='"+target+"'
method='"+method+"'>"+newspan.innerHTML+"</form>";
}

Il paraît que les fonctions DOM marchent mieux. Mais je ne vois pas comment je pourrais m'en tirer.

Pour clarifier les idées, voici ce que j'ai initialement dans ma page :

Code :

1
2
3
4
5
6
7
<span id="idelement">
<div id='section1'>...
<div id='soussection'>
<input type='text' name='nom' >
<input type='button' action="submit('idelement', 'record.php', 'POST')">
</div></div>
</span>

Et ce que je veux, c'est ça (que le form soit avant ou après le span m'est évidemment égal) :

Code :

1
2
3
4
5
6
7
8
<span id="idelement">
<form id='idelement_form'>
<div id='section1'>...
<div id='soussection'>
<input type='text' name='nom' >
<input type='button' action="submit('idelement', 'record.php', 'POST')">
</div></div>
</form></span>

J'ai beau essayer avec appendChild, replaceChild, ça veut pas.
Et j'imagine que c'est pas si compliqué. Seulement, j'écris rarement du javascript.

Auriez-vous une idée ?

Merci d'avance et bonne journée,

[SpaceFrog]

les formulaires imbriqués sont à proscrire ...

[Loceka]

Essaye ça :

Code :

1
2
3
4
5
6
7
8
var div = document.getElementById("section1");
var span = div.parentNode;
var formulaire = document.createElement("FORM");
formulaire.setAttribute("target", target);
formulaire.setAttribute("method", post);
// Surtout NE PAS mettre un id déjà existant.
forumlaire.appendChild(div);
span.replaceChild(formulaire, div);

[Chello]

Envoyé par SpaceFrog

les formulaires imbriqués sont à proscrire ...

... et c'est précisément pour ça qu'il me faut une fonction qui générera UN formulaire dans la page, un seul en lieu et place des multiples formulaires possibles...

[SpaceFrog]

http://www.developpez.net/forums/d53...mique+form+pas

[Chello]

@Loceka

Merci pour la réponse. C'est peu ou prou ce que j'ai essayé de faire, à un détail près : j'ignore quel div viendra après le span. Par conséquent, je vise l'id et récupère ensuite le parent.

Voici le code de mon essai avec ta suggestion.

Code :

1
2
3
4
5
6
7
8
9
var oldspan = document.getElementById(id);
    oldspan.id = id+"_old"; // C'est bien cet id là qu'il fallait modifier ?
    var parent = oldspan.parentNode;
    var formulaire = document.createElement("FORM");
    formulaire.setAttribute("id", id+"_form");
    formulaire.setAttribute("target", target);
    formulaire.setAttribute("method", "POST");
    formulaire.appendChild(oldspan);
    parent.replaceChild(formulaire, oldspan);

Si je ne mets pas formulaire.appendChild(olspan), ça fonctionne sauf qu'évidemment, le formulaire est entièrement vide.

Avec appendChild(oldspan), la section entière disparaît, et aucun formulaire dans la page.

Edit : J'oubliais -> si je remplace par formulaire.appendChild(parent), ça ne va pas mieux...

[Chello]

Envoyé par SpaceFrog

http://www.developpez.net/forums/d53...mique+form+pas

Mmh... ça a l'air expert, un peu trop pour moi. Je crois que je me jetterai dedans si aucune solution plus simple ne se fait jour.

De mon côté, les champs existent déjà : il me faut juste insérer la balise form quelque part tout en conservant les valeurs entrées par l'utilisateur. C'est tout...

J'ai une solution "simplette" qui consisterait à mettre un <span> "début "et un <span> "fin" mais pour le coup, ça manque un peu d'élégance...

[SpaceFrog]

ben sinon suffit de créer une balise form ...

puis de recupérer tous les champs et de les appender dans le form ...

[Chello]

Envoyé par SpaceFrog

ben sinon suffit de créer une balise form ...

puis de recupérer tous les champs et de les appender dans le form ...

C'est effectivement l'idée du code fourni par Loceka, mais testé sans succès. Peut-être la manière n'est-elle pas la bonne... mais d'accord avec toi : ça devrait être simple !

[SpaceFrog]

puis de recupérer tous les champs et de les appender dans le form ..

=> boucler sur

Code :

 form.elements[]

et les appender tous sauf le type submit dans le nouveau form

[nadox]

Envoyé par Chello

@Loceka

Merci pour la réponse. C'est peu ou prou ce que j'ai essayé de faire, à un détail près : j'ignore quel div viendra après le span. Par conséquent, je vise l'id et récupère ensuite le parent.

Voici le code de mon essai avec ta suggestion.

Code :

Si je ne mets pas formulaire.appendChild(olspan), ça fonctionne sauf qu'évidemment, le formulaire est entièrement vide.

Avec appendChild(oldspan), la section entière disparaît, et aucun formulaire dans la page.

Edit : J'oubliais -> si je remplace par formulaire.appendChild(parent), ça ne va pas mieux...

formulaire.appendChild attribue le span comme enfant du formulaire(et l'enlève donc de son parent original). La ligne suivante essaie de remplacer le span par le formulaire alors que le parent ne contient plus le span.
Donc un

Code javascript :

parent.appendChild(formulaire);

devrait suffire à la place du replaceChild

[Chello]

Ok, je crois que je vois l'erreur que j'ai commise, ainsi que la solution.
Merci à tous !

[Chello]

Je sens que je vais passer pour un gros lourdeau...

La création du formulaire, ça marche.
Le repositionnement au bon endroit dans la page, ça marche (j'ai dû générer un child spécial "id_content" pour résoudre la question).

Par contre, la fonction devrait immédiatement soumettre le formulaire. Or la fonction submit() n'a aucun effet, alors qu'elle fonctionnait auparavant.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
function submitform(id, target, method) {
   var idform = id+"_form";
    var child = document.getElementById(id+"_content"); // récupère le span contenu
    var parent = document.getElementById(id);
    var newform = document.createElement("FORM"); // Génère le formulaire
    newform.setAttribute("id", idform);
    newform.setAttribute("target", target);
    newform.setAttribute("method", method);
    newform.appendChild(child); // Ajoute le contenu au formulaire.
    parent.appendChild(newform); // Ajoute le formulaire au parent.
    document.forms[idform].submit(); // Soumet le formulaire
    //newform.submit(); // Autre fonction testée, sans succès.
}

Update : il semble le soumettre, mais pas à la bonne page et revient automatiquement sur la page de départ... Je creuse.

[Chello]

Ce coup-ci, c'est bon.

Pour les curieux :

Code :

newform.setAttribute("target", target);

->

Code :

newform.setAttribute("action", target);