Rajout champ input automatique

Version imprimable

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.

17/02/2012, 14h13
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)
17/02/2012, 14h20
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. :aie:
17/02/2012, 14h29
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 ?

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>

17/02/2012, 15h17
flashnet

Exact, merci beaucoup ! :ccool:
17/02/2012, 15h59
SpaceFrog

A noter qu'un clone est plus rapide qu'un create ... mais bon là vu que c'est à l'unité ...
17/02/2012, 16h04
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)
17/02/2012, 16h06
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
17/02/2012, 16h10
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 .....