How to loop through similar element id's to change / update info?

Question

I have 6 image upload's on my page and a script that will update the image preview when a new image is chosen. I don't want to have 6 scripts with just a changed id per script, so I was wondering how I would accomplish this as a javascript noob.

Each image upload has the id of logo-id-#.

Bootstrap Image Upload:

<div class="col-md-2">
     <div class="form-group">
          <div class="main-img-preview center">
               <img class="thumbnail img-preview" src="http://farm4.static.flickr.com/3316/3546531954_eef60a3d37.jpg" title="Preview Logo">
          </div>
          <div class="input-group">
               <input id="fakeUploadLogo" class="form-control fake-shadow" placeholder="Choose File" disabled="disabled">
                      <div class="input-group-btn">
                           <div class="fileUpload btn btn-primary fake-shadow"><span><i class="glyphicon glyphicon-upload"></i> Browse</span>
                                <input id="logo-id-1" name="logo" type="file" class="attachment_upload">
                           </div>
                      </div>
           </div>
    </div>

Javascript:

<script>
$(document).ready(function() {
    var brand = document.getElementById('logo-id-1');
    brand.className = 'attachment_upload';
    brand.onchange = function() {
        document.getElementById('fakeUploadLogo').value = this.value.substring(12);
    };

    // Source: http://stackoverflow.com/a/4459419/6396981
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('.img-preview').attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#logo-id-1").change(function() {
        readURL(this);
    });
});

Try using `$("[id^='logo-id-']")`. See: ---------- https://stackoverflow.com/questions/13541898/how-can-i-select-an-element-by-id-with-jquery-using-regex — iavery, Aug 08 '17 at 16:32

score 0 · Answer 1 · answered Aug 08 '17 at 16:30

Wrap the whole thing in a loop, with each iteration targeting a different (and incrementing ID).

$(document).ready(function() { //note - can be shortened to $(function() {
    for (var i=1; i<=6; i++) {
        //...your code. From now on, refer not to 'logo-id-1' but to 'logo-id-'+i
    }
});

How to loop through similar element id's to change / update info?

1 Answers1