CODEWITHSUNDEEP
javascriptjqueryselector
Spy
Spy

Reputation: 163

Jquery selector for multiple input fields with the same name

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

Upvotes: 0

Views: 2313

Answers (3)

Aya Salama
Aya Salama

Reputation: 1518

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");

Upvotes: 0

Shreyas Kumar
Shreyas Kumar

Reputation: 174

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

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 371233

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);

Upvotes: 1

Related Questions