How to use multiple inputs with script

Question

I am working on a site with bootstrap, where the input file does not show the selected file name. So I have a script that does the same.

But here it does not work with two inputs, so how to use the same with two inputs (two files upload).

Basically, I want to use the same script for two inputs. I hope you got what I want.

I don't know how to use IDs or other ways to make both inputs separate.

$(document).ready(function() {
  $('input[type="file"]').change(function(e) {
    var display = e.target.files[0].name;
    $("h5").text(display + ' is the selected file.');

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="profile_image" class="custom-file-label">Profile image</label>
<input files="true" class="custom-file-input" id="img1" name="profile_image" type="file">
<h5 style="color: rgb(4, 158, 4);"></h5>

<label for="profile_image" class="custom-file-label">Profile image</label>
<input files="true" class="custom-file-input" id="img1" name="profile_image" type="file">
<h5 style="color: rgb(4, 158, 4);"></h5>

Well, one way would be to use e.target.nextSibling.innerText instead of $("h5") in the text assignment. By using the $("h5") selector, you've targeted ALL h5 elements. — Brian Hannay
– Brian Hannay, Commented Jan 10, 2021 at 6:16

Barmar · Accepted Answer · 2021-01-10 06:14:50Z

4

Select the h5 after the input, not all h5 elements.

$(document).ready(function() {
  $('input[type="file"]').change(function(e) {
    var display = this.files[0].name;
    $(this).next("h5").text(display + ' is the selected file.');

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="profile_image" class="custom-file-label">Profile image</label>
<input files="true" class="custom-file-input" id="img1" name="profile_image" type="file">
<h5 style="color: rgb(4, 158, 4);"></h5>

<label for="profile_image" class="custom-file-label">Profile image</label>
<input files="true" class="custom-file-input" id="img1" name="profile_image" type="file">
<h5 style="color: rgb(4, 158, 4);"></h5>

answered Jan 10, 2021 at 6:14

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Collectives™ on Stack Overflow

How to use multiple inputs with script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related