Форум

laimas · #11 (**permalink**) 02.10.2017, 12:27

Сообщение от рони

чтоб не удалить последний, надо полагать

А что значит последний?
Во-первых это name="ustav-docs1", name="ustav-docs2" уже плохо для сервера, ибо такие имена обрабатывать, это костыль. А удалять удобнее "любой из", а не только последний добавленный.

рони · #12 (**permalink**) 02.10.2017, 12:40

laimas,
согласен.

the_little · #13 (**permalink**) 02.10.2017, 13:40

Сообщение от laimas

А что значит последний?
Во-первых это name="ustav-docs1", name="ustav-docs2" уже плохо для сервера, ибо такие имена обрабатывать, это костыль. А удалять удобнее "любой из", а не только последний добавленный.

Есть дизайн. В дизайне предусмотрен определенный функционал.
ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки//
[добавить поле][удалить поле]

Если поля добавлены, то выглядит это так
ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки//
ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки//
ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки//
ИНПУТ ФАЙЛ //при добавлении файла появляется корзина для очистки//
[добавить поле][удалить поле]

Соответсвенно здесь предусмотрено именно удаление последнего поля.

the_little · #14 (**permalink**) 02.10.2017, 13:41

Сообщение от рони

чтоб не удалить последний, надо полагать

Кстати защита какая-то от удаления последнего есть. КОгда инпут 1, кнопка удалить не работает

laimas · #15 (**permalink**) 02.10.2017, 13:50

Сообщение от the_little

Есть дизайн. В дизайне предусмотрен определенный функционал.

А какое отношение к дизайну имеет именование полей формы?
У вас список файлов и для них вам так нужна строгая последовательность от 1 до N?

Какая разница как они будут загружены в последовательности если это всего лишь список документов. А значит ваша нумерация всего лишь усложнение кода на клиенте и на сервере, более она ничего не дает.

Список, это name="file[]", и на клиенте не требуется счетчика, а просто клонирование элемента, с очисткой его значения. И север получить под ключом file массив файлов.

А пользователю же в случае одной кнопки удаления, удаляющей последнее, выбранный ошибочно файл, который он заметит только после последующего выбора, удалить не получится. Это по вашему удобно? Собственно дизайн не есть Закон, с адекватным заказчиком можно всегда договориться если он понимает, что заложенное страдает неудобством.

the_little · #16 (**permalink**) 02.10.2017, 13:50

Сообщение от рони

the_little,
id лучше убрать, достаточно классов

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".step2-blocks").each(function(indx, el) {
        var add = $(".add", el),
            num = add.length,
            item = add.eq(0).clone(),
            del = $(".delbutton", el),
            n = 1;

        function show() {
            del.toggle(num > n)
        }
       show(); 
        $(".addbutton", el).on("click", function() {
            var block = item.clone().insertAfter($(".add:last", el));
            $(".inputfile", block).attr({
                "name": "ustav-docs" + ++num
            });
            show()
        });
        del.on("click", function() {
            $(".add:last", el).remove();
            num--;
            show()
        })
    })
});
  </script>
</head>

<body>
<div class="step2-blocks">
    <div class="input-file-name">Уставные документы</div>
    <div id="add_field_area">

            <div id="add1" class="add">
                <div class="input_file_hold">
                    <label class="input_file_label btn btn_upload_file">
                        <input type="file" name="ustav-docs1" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
                        <div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
                    </label>
                </div>
            </div>

            <div id="add2" class="add">
                <div class="input_file_hold">
                    <label class="input_file_label btn btn_upload_file">
                        <input type="file" name="ustav-docs2" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/>
                        <div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div>
                    </label>
                </div>
            </div>
<!-- пробовал сюда вставить <span class="count"></span>, посчитал, вывел 1, но если нажать на кнопку добавить поле, то значение не меняется. Так и остается 1-->
    </div>
    <div class="addfield">
        <div onclick="addField();" class="addbutton"><img src="./images/plus_ico.png" alt="">Добавить еще</div>
        <input type="hidden" name="values" id="values"  value="<?=$array?>"/>
        <div onclick="deleteLastField();" class="delbutton"><img src="./images/minus_ico.png" alt="">Убрать</div>

        <span class="count"></span>
    </div>
</div>

</body>
</html>

Работает. Но при нажатии кнопки ДОБАВИТЬ ПОЛЕ - создается 2 поля сразу.

the_little · #17 (**permalink**) 02.10.2017, 13:51

Можно из этого скрипта убрать функционал кнопки ДОБАВИТЬ ПОЛЕ.
Он прописан в другом скрипте, поэтому скорее всего 2 и добавляются

the_little · #18 (**permalink**) 02.10.2017, 13:54

Там такой скрипт используется

<script>
$('.input_file_hold').each(function () {
    var hold = $(this);
    var file = hold.find('.inputfile');
    var text = hold.find('.input_file_add');

    file.on("change", function (inpfil) {
        var files = file[0].files;

        $(this).parent().parent().addClass('file_selected');

        if (files.length > 1) {
            text.text("Файлов добавлено: " + files.length);
            text.prepend('<img src="./images/screpka_green.png" alt="">');
            text.parent().parent().append('<div class="button_close"><img src="./images/del_ico.png" alt=""></div>');
        
            var close = text.parent().parent().find('.button_close');

            close.on("click", function (inpfilclose) {
                    file.val('');
                    text.text('Выбрать файл');
                    text.prepend('<img src="./images/screpka_red.png" alt="">');
                    $(this).parent().removeClass('file_selected');
                    $(this).remove('.button_close');
            });

        }
        else {
            var filename = inpfil.target.value.split("\\").pop();
            text.text(filename);
            text.prepend('<img src="./images/screpka_green.png" alt="">');

            text.parent().parent().append('<div class="button_close"><img src="./images/del_ico.png" alt=""></div>');
        
            var close = text.parent().parent().find('.button_close');

            close.on("click", function (inpfilclose) {
                file.val('');
                text.text('Выбрать файл');
                text.prepend('<img src="./images/screpka_red.png" alt="">');
                $(this).parent().removeClass('file_selected');
                $(this).remove('.button_close');
            });

        }
    });

});

</script>

И еще такой

<script type="text/javascript">

function addField () {
    var telnum = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3))+1;
    $('div#add_field_area').append('<div id="add'+telnum+'" class="add"><div class="input_file_hold"><label class="input_file_label btn btn_upload_file"><input type="file" name="ustav-docs'+telnum+'" id="ustav-docs" class="inputfile outtaHere" onblur="writeFieldsVlues();" multiple="multiple"/><div class="input_file_add"><img src="./images/screpka_red.png" alt="">Выбрать файл</div></label></div></div>');

    var file = $('#add'+telnum).find('.inputfile');
        var text = $('#add'+telnum).find('.input_file_add');

        file.on("change", function (inpfil) {
            var files = file[0].files;

            $(this).parent().parent().addClass('file_selected');

            if (files.length > 1) {
                text.text("Файлов добавлено: " + files.length);

                text.prepend('<img src="./images/screpka_green.png" alt="">');
                text.parent().parent().append('<div class="button_close"><img src="./images/del_ico.png" alt=""></div>');
        
                var close = text.parent().parent().find('.button_close');

                close.on("click", function (inpfilclose) {
                    file.val('');
                    text.text('Выбрать файл');
                    text.prepend('<img src="./images/screpka_red.png" alt="">');
                    $(this).parent().removeClass('file_selected');
                    $(this).remove('.button_close');
                });



            } else {
                var filename = inpfil.target.value.split("\\").pop();
                text.text(filename);
                text.prepend('<img src="./images/screpka_green.png" alt="">');
                text.parent().parent().append('<div class="button_close"><img src="./images/del_ico.png" alt=""></div>');
        
                var close = text.parent().parent().find('.button_close');

                close.on("click", function (inpfilclose) {
                    file.val('');
                    text.text('Выбрать файл');
                    text.prepend('<img src="./images/screpka_red.png" alt="">');
                    $(this).parent().removeClass('file_selected');
                    $(this).remove('.button_close');
                });

            }
        });

}

function deleteField (id) {
    $('div#add'+id).remove();
    writeFieldsVlues();
}

function deleteLastField () {
        var id = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3));
        if(id > 1){
        $('div#add'+id).remove();
    }
    writeFieldsVlues();
}

function writeFieldsVlues () {
    var str = [];
    var tel = '';
    for(var i = 0; i<$("input#ustav-docs").length; i++) {
        tel = $($("input#ustav-docs")[i]).val();
        if (tel !== '') {
            str.push($($("input#ustav-docs")[i]).val());
        }
    }
    $("input#values").val(str.join("|"));
}
</script>

the_little · #19 (**permalink**) 02.10.2017, 13:57

Вообще конечно жесть получается. У меня 4 инпута разных.
ustav-docs
buh-docs
nalog-docs
garant-docs
Получается все эти скрипты нужно 4 раза повторить))

the_little · #20 (**permalink**) 02.10.2017, 15:09

Сообщение от laimas

А какое отношение к дизайну имеет именование полей формы?
У вас список файлов и для них вам так нужна строгая последовательность от 1 до N?

Так было написано в скрипте, который брался за основу. Моих знаний не достаточно, чтобы такой сложный скрипт править.

Цитата:

Какая разница как они будут загружены в последовательности если это всего лишь список документов. А значит ваша нумерация всего лишь усложнение кода на клиенте и на сервере, более она ничего не дает.

Возможно нумерацию можно убрать, не навредив работе скрипта. Попробую.

Цитата:

А пользователю же в случае одной кнопки удаления, удаляющей последнее, выбранный ошибочно файл, который он заметит только после последующего выбора, удалить не получится. Это по вашему удобно? Собственно дизайн не есть Закон, с адекватным заказчиком можно всегда договориться если он понимает, что заложенное страдает неудобством.

Если он увидит что где-то не тот файл загружен - то там появляется корзинка, для очистки содержимого конкретного ИНПУТА.

Форум

Справочник

Discord чат

Курсы javascript