Peut-on "cloner" une partie d'un formulaire ?

Version imprimable

Bonjour.
J'ai un formulaire et j'aimerai qu'une partie de ce formulaire puisse être dupliquée autant de fois que l'on veux lors de l'appuie sur un bouton.
Pour l'instant j'ai procédé en faisant un clone de la partie originale en remplaçant les id des div et inputs en les incrementant. Mais je me demande si c'est la meilleure façon de procéder.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--==== FORM ASSEMBLAGE ORIGINALE ====-->
	<div id="assemblage0" class="newAssemblage">
		<!--Affichage des erreurs-->
		<div class="error" id="error_Assemblage0">
			<span id="error_Assemblage0_num">  </span>
			<span id="error_Assemblage0_number">  </span>
		</div> 
		<p>
			<label>N° de lassemblage :</label> 
			<input type="text" class="Assemblage0_num" name="numAssemblage[]" value="" onblur="verifNum(this)"/>
			<input type="text" class="Assemblage0_number" name="enrInitial[]" value="" onblur="verifNumbers(this)"/>
		</p>
		<p>
 
	</div>
<!--==== FORM CLONES ASSEMBLAGES ====-->
//Lors du clic sur le bonton pour ajouter, les clones apparaissent ici.

Je clone comme ceci :

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
<script type="text/javascript" >
var idAss=1;
 
//fonction que j'appelle lors de l'appuie sur le bouton
function addAss() {
        var $clone = $('#assemblage0').clone(true);
	$clone.attr("id","assemblage"+idAss);
 
        $clone.find('#error_Assemblage0').attr("id","error_Assemblage"+idAss);
        $clone.find('#error_Assemblage0_num').attr("id","error_Assemblage"+idAss+"_num");
        $clone.find('#error_Assemblage0_number').attr("id","error_Assemblage"+idAss+"_number");
 
         $clone.find('.Assemblage0_num').attr("class","Assemblage"+idAss+"_num");
         $clone.find('.Assemblage0_number').attr("class","Assemblage"+idAss+"_number");
 
        // On vide les erreurs et l'input cloné dans le cas où il y a une une erreur.
	$clone.find("span").text(""); // on vide les spans d'erreur
	$clone.find("input[type='text']").val(""); // on vide l'input
        $clone.find("input[type='text']").css( "backgroundColor", "" ); //on remet sa couleur de base à l'input
 
	$clone.appendTo($("#assemblages"));
	$clone.prepend('<button type="button" class="btnRemoveField"> - </button>');
        idAss++;
        }
</script>

Pour ne pas que ce soit trop long j'ai raccourcie le code. Normalement il y a plus de span pour les erreurs et plus d'inputs.
Je trouve ça assez fastidieux de devoir changer tous les id et class casiment un à un mais je pense que c'est plus court que de tout refaire à partir de 0.
Mais est-ce que je peux continuer à procéder comme cela ou faut-il mieux créer mes input et mon affichage des erreur à partir de rien?

Merci.

26/10/2015, 17h32
ABCIWEB

Salut,

T'as pas pris le problème par le bon bout. Quand on veut cloner / dupliquer du html le plus efficace est de faire en sorte que celui-ci ne contienne pas d'id. C'est plutôt sur le travail de construire un html fonctionnel sans id qu'il faut d'abord se concentrer, ensuite tout le reste se fera "tout seul".

Il faut toujours construire un formulaire en fonction du traitement qui lui sera appliqué, côté client ou côté serveur. C'est le même principe que le vieux proverbe "comme on fait son lit on se couche" ;)
26/10/2015, 19h20
flavors

Merci de votre réponse.
Donc si j'ai bien compris, je pars d'un formulaire vierge de tout id (et de classe ?) que je clone et au quel j'attribue les id que sur les clones au lieu de les changer?
26/10/2015, 21h38
ABCIWEB

Nan, c'est pas ce que j'ai voulu dire. Tu n'utilises pas d'id du tout. A moins qu'ils ne soient absolument indispensables mais c'est très rarement le cas, et dans ton cas en quoi le seraient-ils ?

En plus tu utilises jquery qui permet d'avoir au minimum trois milliards de possibilités (ou à peine moins) pour cibler facilement des éléments html autrement qu'en utilisant des id, alors profite. Fais un code et un formulaire qui fonctionne sans id, ou tout au moins sans id dans la partie que tu dois cloner ;)
26/10/2015, 21h52
danielhagnoul

Réaliser un clone complet et le mettre en place : plugin dvjhClone.

Merci pour vos réponses.
En fait j'utilisais les ids car j'ai un JS qui fait un 1er traitement du formulaire. Il est composé de plusieurs fonctions qui traitent chacune un type de donnée (un nombre, un pourcentage, un nom, ...).
La fonction en cas d'erreur met une couleur de fond rouge sur l'input concerné et met le message d'erreur correspondant dans le champ prévue pour cela ( dans le case d'un nombre par ex).
C'est pour cela que j'avais mis des id et des classes, pour facilement retrouver le span associé à l'input concerné. Je faisais :
Code:

1 2 3 4 5 6 7 8 9 10 //en cas d'erreur dans une des fonction je fais document.getElementById(idResult).innerHTML = 'Le champs doit uniquement comporter des lettres et des chiffres. '; //champ correspond a l'input qui vient d'être remplie function getIdErreur(champ) { var classe = $(champ).attr('class'); var result = "error_"+classe; return result; }

@danielhagnoul
Je viens de regarder votre plugin.
Si j'ai bien compris, dans mon cas je devrai faire :

Code:

1
2
3
4
5
 
 $("#assemblage0").dvjhClone({ // Je clone mon div ayant pour id assemblage0
       cloneMethod: 0, // je place le clone à la suite de l'original
       clonePivot: "assemblage1" // Je change l'id du clone par assemblage1
       });

C'est bien cela?

Presque :

Code:

1
2
3
$( '#assemblage0' ).dvjhClone({
  "cloneMethod" : 0
});

Exemple, après clonage :

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
<form>
  <div id="assemblage0" class="newAssemblage" data-dvjh-clone-id="dvjhClone1445943384779">
    <div class="error" id="error_Assemblage0">
      <span id="error_Assemblage0_num">  </span>
      <span id="error_Assemblage0_number">  </span>
    </div> 
    <p>
      <label>N° de lassemblage :</label> 
      <input type="text" class="Assemblage0_num" name="numAssemblage[]" value="" onblur="verifNum(this)">
      <input type="text" class="Assemblage0_number" name="enrInitial[]" value="" onblur="verifNumbers(this)">
    </p>
  </div>
  <div id="dvjhClone1445943384779" class="newAssemblage">
    <div class="error" id="dvjhClone14459433847790">
      <span id="dvjhClone14459433847791">  </span>
      <span id="dvjhClone14459433847792">  </span>
    </div> 
    <p>
      <label>N° de lassemblage :</label> 
      <input type="text" class="Assemblage0_num" name="numAssemblage[]" value="" onblur="verifNum(this)">
      <input type="text" class="Assemblage0_number" name="enrInitial[]" value="" onblur="verifNumbers(this)">
    </p>
  </div>
</form>

27/10/2015, 12h34
flavors

Ok dans ce cas, il ne me reste plus qu'à modifier certains attributs et au moins je suis sûr de ne pas avoir de doublon.
Merci.
27/10/2015, 17h40
ABCIWEB

Citation:

Envoyé par flavors

Merci pour vos réponses.
En fait j'utilisais les ids car j'ai un JS qui fait un 1er traitement du formulaire. Il est composé de plusieurs fonctions qui traitent chacune un type de donnée (un nombre, un pourcentage, un nom, ...).
La fonction en cas d'erreur met une couleur de fond rouge sur l'input concerné et met le message d'erreur correspondant dans le champ prévue pour cela ( dans le case d'un nombre par ex).
C'est pour cela que j'avais mis des id et des classes, pour facilement retrouver le span associé à l'input concerné. Je faisais :

Oui mais tu aurais tout aussi bien pu cibler ces span autrement qu'un utilisant des id.

Il faut éviter au maximum d'utiliser des id dans du code qui sera ajouté dynamiquement à la page en cours. D'une part tu constate que cela va poser des problèmes si on veut faire du clonage, et puis cela peut générer des conflits avec d'autres codes actuels ou futurs. En plus le code sera finalement plus compliqué.

Donc faut éviter de se laisser emporter par la facilité d'utilisation des sélecteurs utilisant des identifiants uniques. Dès que l'on doit monter un peu en puissance on va souvent payer très cher le petit gain initial qui finalement n'était pas très important ;)
27/10/2015, 18h40
danielhagnoul

Citation:

Envoyé par ABCIWEB

Il faut éviter au maximum d'utiliser des id dans du code qui sera ajouté dynamiquement à la page en cours. D'une part tu constate que cela va poser des problèmes si on veut faire du clonage, et puis cela peut générer des conflits avec d'autres codes actuels ou futurs. En plus le code sera finalement plus compliqué.

Je suis entièrement de ton avis, l'abus d'ID nuit gravement à la simplicité du code.
09/11/2015, 09h10
flavors

J'en prends note.
Merci pour le conseil.