Jquery input type file as trigger doesnt work

Question

I have multiple input type files. On default they are hidden and only first one is shown. When user selects file with the first input file the funcion below shows the next input type file by id. The problem is that it works only for first 2 change events and than it stops without errors.. How can I make it work for every next input file. Here is the function:

//first we hide all inputs
$('.imagediv').hide();
$('.imagediv:first').show();
var nextupload=$('.imagediv:first').attr('data');
nextupload=(parseInt(nextupload) + 1);

//this is the event
$(function() {
 $("input:file").change(function (){
   var nextf = $(this).attr('data');
   $('#input'+(nextupload)+'').show();
   alert('#input'+(nextupload)+'');
 });    
});

here is how html looks like:

<div class="imagediv" id="input2" data="2">
<input type="file" name="gallery_upload_2" data="gallery_upload_3" id="gallery_upload_2" />
</div>

and so on with the next input.. How to make it work for every next input change? Thanks

I made jsfiddle here: http://jsfiddle.net/Lbu3ksjh/1/

what will this change? I am not missing the event, it triggers well with $("input:file") , but only 2 times :) — Europeuser
– Europeuser, Commented Dec 13, 2014 at 13:06

empiric · Accepted Answer · 2014-12-13 13:23:44Z

2

You were missing the +1 part in the change-function:

$('input:file').change(function (){
   var nextupload = $(this).parent('.imagediv').attr('data');
    nextupload = (parseInt(nextupload) + 1);
   $('#input'+(nextupload)+'').show();
   alert('#input'+(nextupload)+'');
 });

I updated your fiddle:

Demo

answered Dec 13, 2014 at 13:23

empiric

7,8767 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Europeuser Over a year ago

empiric, thanks, I succeeded my self with this: $(function() { $('.imagediv').hide(); $('.imagediv:first').show(); $("input:file").change(function (){ var nextf = $(this).attr('data'); $('#input'+(nextf)+'').next().show(); }); }); but stil I will vote and accept your answer, thanks !

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Here's another solution. It works on a variable number of file inputs and doesn't require a lot of code nor markup.

DEMO

js

$(function() {
    var $fileInputs = $(':file[name*="gallery_"]'), // could be whatever
        next = 0;
  
    $fileInputs.not(':first').hide();

    $fileInputs.change(function (){
        $fileInputs.eq(++next).show();
    }); 
});

html

<input type="file" name="gallery_upload_1" />
<input type="file" name="gallery_upload_2" />
<input type="file" name="gallery_upload_3" />
<input type="text" name="random_text_input" />  
<!-- notice it only reveals file inputs -->
<input type="file" name="gallery_upload_4" />

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 13, 2014 at 13:48

Todd

5,4843 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

Jquery input type file as trigger doesnt work

2 Answers 2

1 Comment

DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related