jQuery: извлечение значения из элемента и вставка его в поле в поле формы списка с повторяемостью

Question

У меня есть форма и в форме у меня есть повторяемый список. У меня не может быть других полей, кроме ввода текста в этом повторяемом списке. Поэтому, чтобы разрешить пользователям отправлять изображения, я сохраняю вход для загрузки файла отдельно от повторяемого поля списка, как показано ниже.

Мне было интересно, могу ли я использовать jQueryчтобы получить имена файлов в поле загрузки файла и вставить их в поле повторяемого списка в соответствующих столбцах.

Глядя на разметку, которую создает форма, я чувствую, что возможно только то, что мои знания jQueryне позволяет мне думать о решении.

Вот разметка, которая составляет повторяемый список

<div class="ginput_container ginput_container_list ginput_list">
    <table class="gfield_list gfield_list_container">
        <colgroup>
            <col id="gfield_list_2_col_1" class="gfield_list_col_odd">
                <col id="gfield_list_2_col_2" class="gfield_list_col_even">
                    <col id="gfield_list_2_col_3" class="gfield_list_col_odd">
                        <col id="gfield_list_2_col_4" class="gfield_list_col_even">
        </colgroup>
        <thead>
            <tr>
                <th scope="col">Side</th>
                <th scope="col">Reference</th>
                <th scope="col">Notes</th>
                <td>&nbsp;</td>
            </tr>
        </thead>
        <tbody>
            <tr class="gfield_list_group gfield_list_row_odd">
                <td class="gfield_list_cell gfield_list_2_cell1" data-label="Side">
                    <input aria-label="Side" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_cell gfield_list_2_cell2" data-label="Reference">
                    <input aria-label="Reference" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_cell gfield_list_2_cell3" data-label="Notes">
                    <input aria-label="Notes" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_icons">
                    <a href="javascript:void(0);" class="add_list_item " aria-label="Add another row" onclick="gformAddListItem(this, 0)" onkeypress="gformAddListItem(this, 0)"><img src="localhost/images/list-add.svg" alt="" title="Add a new row"></a>
                    <a href="javascript:void(0);" class="delete_list_item" aria-label="Remove this row" onclick="gformDeleteListItem(this, 0)" onkeypress="gformDeleteListItem(this, 0)" style="visibility: visible;"><img src="localhost/images/list-remove.svg" alt="" title="Remove this row"></a>
                </td>
            </tr>
            <tr class="gfield_list_group gfield_list_row_even">
                <td class="gfield_list_cell gfield_list_2_cell1" data-label="Side">
                    <input aria-label="Side" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_cell gfield_list_2_cell2" data-label="Reference">
                    <input aria-label="Reference" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_cell gfield_list_2_cell3" data-label="Notes">
                    <input aria-label="Notes" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_icons">
                    <a href="javascript:void(0);" class="add_list_item " aria-label="Add another row" onclick="gformAddListItem(this, 0)" onkeypress="gformAddListItem(this, 0)"><img src="localhost/images/list-add.svg" alt="" title="Add a new row"></a>
                    <a href="javascript:void(0);" class="delete_list_item" aria-label="Remove this row" onclick="gformDeleteListItem(this, 0)" onkeypress="gformDeleteListItem(this, 0)" style="visibility: visible;"><img src="localhost/images/list-remove.svg" alt="" title="Remove this row"></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

А вот разметка, которая производит предварительный просмотр файлов при загрузке файлов

<div id="gform_preview_5_3">
    <div id="o_1dn37jigsu7cu20drk138i17k0f" class="ginput_preview"><img class="gform_delete" src="localhost/images/delete.png" onclick="gformDeleteUploadedFile(5,3, this);" onkeypress="gformDeleteUploadedFile(5,3, this);" alt="Delete this file" title="Delete this file"> <strong>Doa Ditimpa Musibah.jpg</strong></div>
    <div id="o_1dn37jd93vp41aic1030166912o8a" class="ginput_preview"><img class="gform_delete" src="localhost/images/delete.png" onclick="gformDeleteUploadedFile(5,3, this);" onkeypress="gformDeleteUploadedFile(5,3, this);" alt="Delete this file" title="Delete this file"> <strong>surah-al-layl.jpg</strong></div>
</div>

Заранее спасибо за помощь! А пока я продолжу что-то пробовать!

Answer 1

Я закрываю этот вопрос, и ниже мое решение для этой задачи. Это не динамично и автоматизировано, но это будет делать. Я сделаю 10 переменных и 10 условий, надеясь, что пользователи не загрузят более 10 файлов. Если кто-нибудь может показать мне, как написать динамический автоматизированный скрипт jQuery, это будет здорово!

var str = $( "#gform_preview_5_3 div:nth-child(1) strong" ).text();
var str2 = $( "#gform_preview_5_3 div:nth-child(2) strong" ).text();

$( ".gfield_list_group:nth-child(1) td:nth-child(2) input " ).val( str );
$( ".gfield_list_group:nth-child(2) td:nth-child(2) input " ).val( str2 );

jsfiddle

Answer 2

теперь вы можете включить загрузку вашего файла в повторяющийся список, используя

<input aria-label="Reference" type="file" id="file_upload" name="input_2[]" value="">

$('#file_upload').change(function(){

  var img_file = $('#file_upload').prop('files')[0];
  console.log(img_file);//this will show all properties of the uploaded file

  //you can get the file name through 
  var file_name = img_file.name;

});