JQuery Selector, чтобы установить значение для конкретного поля ввода текста с тем же именем - PullRequest
0 голосов
/ 02 марта 2019

У меня есть три поля ввода текста с тем же именем и три текстовых поля, которые получают имя файла.Я пытаюсь получить три имени файла

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[]" />

Приведенный выше код устанавливает все поля в имя файла.Я хочу установить только поле, соответствующее полю ввода файла.

Существует ли селектор jQuery для этого?

Ответы [ 3 ]

0 голосов
/ 02 марта 2019

    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> 
0 голосов
/ 02 марта 2019

На вводе по нажатию найдите следующий элемент ввода, используя следующую функцию jquery, и заполните текстовый ввод

<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>
0 голосов
/ 02 марта 2019

В качестве HTML-кода вы можете использовать .next(), например:

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

Обратите внимание: Атрибут id должен быть уникальным в документе.Если вы хотите сослаться на несколько элементов с одним и тем же атрибутом, используйте class.

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[]" />
...