CODEWITHSUNDEEP
javascriptjqueryhtmlfile-upload
Caro_deb
Caro_deb

Reputation: 279

Multiple upload buttons on page: only the first one works

I need to have several upload buttons on one page. Each upload button would be next to an item, and the user will be able to upload an image for that specific item.

Right now, only the first upload button at the top of the page works and allows to select a file. The other ones do not work: nothing happens when clicked. 

<div class="upload_icon" >
   <form  action="upload_extra.php" method="POST" enctype="multipart/form-data">
     <input  id="upload"  type="file" name="image"  style="display:none" />   
     <input name="postid" type="hidden" />
     <img id="upload_img" src="/images/uploadicon.png">
   </form>
 </div>

<script type="text/javascript">
   $('#upload_img').click(function(){
   $('#upload').click();
   });
</script>

What should I do to fix this behavior ?

Upvotes: 0

Views: 2311

Answers (1)

colestrode
colestrode

Reputation: 10658

ID's must be unique; when you have multiple items with the same ID, jQuery will only the select the first one, so your click handler is only being applied to one image. Try using classes instead of ID's.

<div class="upload_icon" >
   <form  action="upload_extra.php" method="POST" enctype="multipart/form-data">
     <input  class="upload"  type="file" name="image"  style="display:none" />   
     <input name="postid" type="hidden" />
     <img class="upload_img" src="/images/uploadicon.png">
   </form>
 </div>

<script type="text/javascript">
   $(function() {
       $('.upload_img').click(function(){
           $(this).parent().find('.upload').click();
       });
   });
</script>

Working Demo

Upvotes: 3

Related Questions