CODEWITHSUNDEEP
javascriptjqueryselector
Spy
Spy

Reputation: 163

jQuery Selector to set value to specific text input field of the same name

I have three text input fields with the same name and three text fields that get the file name. I am trying to get the three file names

function getFileData(myFile){
  var file = myFile.files[0];
  var filename  =  [file.name];

  $("input:text").val(filename);
}
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

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

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

The code above sets all the fields to the file name. I want to set only the field that matches the file input field.

Is there a jQuery selector to do that?

Upvotes: 3

Views: 161

Answers (3)

Mamun
Mamun

Reputation: 68933

As your HTML stands, you can use .next() like:

$(myFile).next('input[type=text]').val(filename);

Please Note: The attribute id must be unique in a document. If you want to refer multiple elements with same attribute, use class instead.

function getFileData(myFile){
  var file = myFile.files[0];
  var filename = [file.name];

  $(myFile).next('input[type=text]').val(filename);
}
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>
<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="file" class="file_name" name="file_name[]" onchange="getFileData(this);" />
<input type="text" class="file_name_helper" name="file_name_helper[]" />

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

Upvotes: 2

ellipsis
ellipsis

Reputation: 12162

On the clicked input find the next input element using next function of jquery and fill the text input

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>
<meta charset=utf-8 />
</head>
<body>
  <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
  <input type="text" id="file_name_helper" name="file_name_helper[]"/>

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

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


<script>
   function getFileData(myFile){
   var file = myFile.files[0];
   var filename  =  [file.name];

   $(myFile).next('input').val(filename);
   }
</script>

</body>
</html>

Upvotes: 1

Nikola Kirincic
Nikola Kirincic

Reputation: 3757

    function getFileData(myFile){
           var file = myFile.files[0];
           var filename  =  [file.name];

           $(myFile).next().val(filename);
         }
    <!DOCTYPE html>
    <html>
    <head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
    </script>
    <meta charset=utf-8 />
    </head>
    <body>
      <input type="file" id="file_name" name="file_name[]" onchange="getFileData(this);" />
      <input type="text" id="file_name_helper" name="file_name_helper[]"/>

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

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




    </body>
    </html>

Upvotes: 1

Related Questions