Rajout champ input automatique [Résolu]

[flashnet]

Bonjour,

J'aimerais q'un nouveau champ se créé de manière automatique lorsqu'un autre champ est remplis et ainsi de suite. J'ai le début du code mais je peine sur la fin... Voici ce que j'ai fais :

Code :

1
2
3
4
5
6
7
 
<input type="text" id="option1" class="add-option" />
<div id="options"></div>
 
$('.add-option').live('click', function(){
	$('#options').append('<input type="text" id="option2" class="add-option"');
});

J'aimerais qu'un nouveau champ se créé dès lors que le 1er est saisi, ensuite le 2eme etc... De plus comment puis-je incrémenter l'id de mon champ ? Merci par avance pour votre aide.

[Golgotha]

Bonjour,

J'aimerais comprendre l'utilité ?

ça veux dire qu'il peux y avoir une infinité de champs ?

C'est faisable mais je voie pas bien à quoi ça sert, je verrais plutôt des champs caché et il s'affiche les uns à la suite des autres. (si c'est un formulaire)

[LhIaScZkTer]

Salut,

Moi je verrais assez bien l'utilité qu'on peut en faire. Par exemple dans un CV en ligne ou l'on souhaite rajouter une nouvelle expérience ou autre... Le problème est que là, tu génères un nouveau champ avec toujours le même ID, donc c'est pas top.

[flashnet]

L'iphone fait la même chose lorsqu'on créé un nouveau contact, une telle fonction a pour but de rendre ma page dynamique.

En l’occurrence dans mon formulaire j'enregistre un véhicule avec des options (abs, esp etc...). Je pense pouvoir dire qu'il y aura 8 options supplémentaires au maximum.

Même en mettant des champs cachés, est-il possible de le rendre visible sans faire un contrôle javascript pour chaque champ ?

[ticroch]

Un truc comme ca ? Ici les nouvelles inputs sont créés quand une input perd le focus et que sa valuer n'est pas nulle.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div id="options"></div>
 
<script type="text/javascript">
var id_option  = 0;
 
$(document).ready(function() {
    addElement();
});
 
function addElement() {
    id_option++;
    var input = $('<input type="text" id="option_' + id_option + '" class="add-option" />').appendTo($("#options"));
    input.blur(function() {
        if ($(this).val() != "") {
            addElement();
        }
    });
    input.focus();
}
</script>

[flashnet]

Exact, merci beaucoup !

[SpaceFrog]

A noter qu'un clone est plus rapide qu'un create ... mais bon là vu que c'est à l'unité ...

[ticroch]

Intéressant à savoir quand même, est-ce-que tu connaitrais par hasard un bonne référence sur les temps d'éxécutions des fonctions jQuery ? (enfin un article qui comparent 2 méthodes et qui explique pkoi l'un est plus rapide que l'autre par exemple)

[SpaceFrog]

heu non, je n'ai pas ça sous la main, c'est juste une constatation issue de l'expérience de manipulations du DOM
Mais il doit bien exister un outil benchmark quelque part

[ticroch]

Ok parceque en entreprise quand on se retrouve avec des ordinateurs particulièrement lent et des boucles contenant des miliers d'éléments, il faut très souvent faire attention à ca sinon ca devient interminable .....