Jquery selector for multiple input fields with the same name

Question

I have a form where I upload three different files. Also I have two input fields for all file uploads where I store some information on file upload.

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>

<div>
  <input type="file"  class="file_name" name="file_name[]"onchange="getFileData(this);" />
  <input type="text" class="file_name_helper" name="file_name_helper[]"/>
  <input type="text" class="duration" name="duration[]"/>
</div>

<div>
  <input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);" />
  <input type="text" class="file_name_helper" name="file_name_helper[]" />
  <input type="text" class="duration" name="duration[]"/>
</div>

<div>
  <input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);"/>
  <input type="text" class="file_name_helper" name="file_name_helper" />
  <input type="text" class="duration" name="duration[]"/>
</div>

<script type="text/javascript">
function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];
  $(myFile).next("input[name='file_name_helper[]']").val(filename);
  $("input[name='duration[]']").val("duration");
}
</script>

The problem is that when I upload the form, the first field "file_name_helper" gets populated correctly with the selector that I have but when I do the same for the "duration" field it doesn't work. How can I choose the specific duration field? Any help would be appreciated

Answer 1

From your onchange="getFileData(this);" , you have a reference to the first input in a div as the myFile parameter, and you want to select a sibling which matches a selector, so you can use the .siblings method called on $(myFile) :

function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];
  $(myFile).next("input[name='file_name_helper[]']").val(filename);
  $(myFile).siblings("input[name='duration[]']").val("duration");
}

Note that if your HTML is as described, you don't need to pass a selector to .next , since .next will select the immediate next element by default:

$(myFile).next().val(filename);

Answer 2

you can use .nextAll() to select your duration element

$(myFile).nextAll("input[name='duration[]']").val("duration");

 function getFileData(myFile){ var file = myFile.files[0]; var filename = [file.name]; $(myFile).next("input[name='file_name_helper[]']").val(filename); $(myFile).nextAll("input[name='duration[]']").val('duration'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . </script> <div> <input type="file" class="file_name" name="file_name[]"onchange="getFileData(this);" /> <input type="text" class="file_name_helper" name="file_name_helper[]"/> <input type="text" class="duration" name="duration[]"/> </div> <div> <input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);" /> <input type="text" class="file_name_helper" name="file_name_helper[]" /> <input type="text" class="duration" name="duration[]"/> </div> <div> <input type="file" class="file_name" name="file_name[]" onchange="getFileData(this);"/> <input type="text" class="file_name_helper" name="file_name_helper" /> <input type="text" class="duration" name="duration[]"/> </div> 

or if you are sure that your markup will be the same as now, you can use .next().next() to get the duration element.

$(myFile).next().next().val("duration");

Answer 3

since you have a common parent container for all the group of fields, you can target the element relative to its parent as given below,

function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];
  $(myFile).parent().find("input[name='file_name_helper[]']").val(filename);
  $(myFile).parent().find("input[name='duration[]']").val("duration");
}

Fiddle for the above