Affichage input "Pas a pas"

Par deep_, il y a 14 ans

Javascript

Hello,

J'ai beau chercher les sélecteurs sur la doc de jQuery je ne trouve pas de solution donc je vous explique :

J'ai un formulaire qui ajoute des info dans une base, et dans ce formulaire je veux implémenter l'upload d'images.
Donc j'autorise 10 images, mais je ne veux afficher que 1 INPUT au début .. Puis avec un bouton, afficher 1 input en plus, puis encore 1 input en plus si je re-appuie..

Je ne sais pas si c'est clair =/

Donc en gros j'ai mes inputs comme cela dans une boucle qui affiche 10 inputs:

<div class="addimage">
                           Image n°<?php echo $i;?>: <input type="file" name="fichier<?php echo $i;?>" />
</div>

Puis je les caches avec : 

$('.addimage').hide();

Je voudrais quand j’appuie sur un input submit ou un lien : J'ai un input "addimage" qui s'affiche, puis le suivant etc..
J'ai regarder le sélecteur Next.. Mais cela ne "s’incrémente" pas

Je ne sais pas comment faire du tout..

3 réponses

MrGuillou, il y a 14 ans

Codé rapidement, à voir si ça te convient

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
        <meta name="geo.region" content="FR" >
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
    <body>
<script type="text/javascript">
    $(document).ready(function(){
        var n = 1;
        $(".zone .add").click(function(){
            if (n < 10)
            {
                n++;
                $('.zone ul').append('<li>Image n\''+n+'<input type="file" name="image'+n+'"></li>')
            }
            else
            {
                alert('10 images max');
            }
        });
        return false;
    });
</script>
</head>
<body>
<div class="zone">
    <ul>
        <li>Image n'1<input type="file" name="image1"></li>
    </ul>
    <a href="#" class="add">Ajouter Une image</a>
</div>
</body>
</html>
deep_, il y a 14 ans

C'est exactement ca.. Je vais tester le code avec le traitement etc..Sinon pour mettre un effet du type show(1500) sur l'evennement comment puis-je faire ? En tout cas merci.

MrGuillou, il y a 14 ans 
$('.zone ul').append('<li style="display:none;">Image n\''+n+'<input type="file" name="image'+n+'"></li>',function(){
    $('.zone ul li').last().show(1500);
});