How to select a div id using a variable in jquery

Question

var input = document.getElementById('newlist');
for (var i = 0; i < input.files.length; ++i) {
  var $form = $(document.getElementById("input.files.item(i).name-edit-form"));
  }

to be clear, input.files.item(i).name is the var and I'm trying to append "edit-form" to the value. I think because that wasn't made clear, my question was never answered.

I think the question I'm trying to ask is how do I properly use a jquery var inside a jquery selector in my example?

I think you mean to do ``$(`#${input.files.item(i).name-edit-form}`)``. — Heretic Monkey, Apr 14 '21 at 18:21
@Masood Please do not edit code in questions. You could be removing the very reason the question is asked! — Heretic Monkey, Apr 14 '21 at 18:24
@HereticMonkey I've seen `$(document.getElementById(id))` a few times today on SO - I wonder if there's some new dodgy source/tutorial that's suggesting this for use with jquery. — freedomn-m, Apr 14 '21 at 18:54
`input.files.item(i).name-edit-form` doesn't look like an `id` to me - only use getElementBy*Id* for IDs. — freedomn-m, Apr 14 '21 at 18:55
@freedomn-m I've seen everything done with/to/on top of jQuery. Nothing surprises me any more :). — Heretic Monkey, Apr 14 '21 at 18:58

score 1 · Answer 1 · answered Apr 14 '21 at 18:47

I noticed you are mixing vanilla JS with jQuery. You should pick one. I created an example that depends on as much jQuery as necessary below.

Please review the docs for <input type="file"> over at MDN. You were using input.files.item(i) when it should just be input.files[i].

If you are requesting to loop over all forms that match the selector:

form[id^="-edit-form"]

You could try the following:

$('#newlist').on('change', function(e) {
  $.each(this.files, function(index, file) {
    var $form = $(`#${file.name}-edit-form`);
    console.log(`Selecting form: #${file.name}-edit-form`);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="newlist" multiple />

Caveat: If the file that you selected has a file extension or spaces, you may need to clean up the name to point it to the correct form ID.

How to select a div id using a variable in jquery

1 Answers1