js форм при входном событии - PullRequest
Новая
       19

js форм при входном событии

0 голосов
/ 02 августа 2020

У меня есть форма с несколькими полями файлов, и всякий раз, когда файлы загружаются в нее, я добавляю их в массив с именем filesinput (используя событие oninput) и добавляю их в таблицу для отображения всех загруженных файлов вместе с помощью кнопки для удаления файла. Я перехватываю событие отправки и вместо этого отправляю массив filesinput. Однако всякий раз, когда я нажимаю кнопку «Удалить», по какой-то причине форма отправляется сама.

Вот мой код - 

window.onload =  function() {
                //var fileinput = document.querySelector('#inputfiles');
                var fileform = document.querySelector('form');
                var filetable = document.querySelector('#submitted');

                fileform.oninput = function(e) {
                    if(!e.target.files)
                        return;
                    var temp = Array.prototype.slice.call(e.target.files);
                    temp.forEach(function(file) {
                        filesinput.push(file);
                        filetable.innerHTML += '<tr> <td>' + file.name + '</td> <td> <button id="' + file.name + '" onclick="removeFile(this.id)">Remove</button></td></tr>';
                    });  
                }

                fileform.addEventListener('submit', function(e) {
                    e.preventDefault();
                    send(filesinput);
                });
            }

EDIT - функция removeFile - 

function removeFile(filename) {
                var ind;
                filesinput.forEach(function(file, index) {
                    if(file.name == filename) {
                        ind = index;
                    }
                });
                filesinput.splice(ind, 1);
            }

Это за пределами функции window.onload, если это важно.

1 Ответ

0 голосов
/ 02 августа 2020

Попробуйте изменить <button id="' + file.name + '" onclick="removeFile(this.id)">Remove</button> на <button type="button" id="' + file.name + '" onclick="removeFile(this.id)">Remove</button>

Тип кнопки не должен быть отправлен, тогда только форма не будет отправлена ​​при нажатии кнопки «Удалить».

...