Ограничьте файловые входы, клонированные в форме с помощью Jquery - PullRequest
Новая
       34

Ограничьте файловые входы, клонированные в форме с помощью Jquery

2 голосов
/ 28 декабря 2010

я использую эту функцию Jquery для клонирования полей ввода файла в моей форме, 

$(function() {
    var scntDiv = $('#clone');
    var i = $('#clone p').size() + 1;

    $('#addImg').live('click', function() {
            $('<p><label for="attach"><input type="file" name="attachment_'+ i +'"  /> <a href="#" id="remImg">Remove</a></label></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remImg').live('click', function() {
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

возможно ли ограничить поля, которые можно клонировать?скажем, число из 4 полей?

спасибо большое,
Филипп

Ответы [ 3 ]

2 голосов
/ 28 декабря 2010

Используйте, например, это первое внутри функции, которая добавляет ввод: 

if($('input[name^="attachment_"]').length>=4){return false;}

Подсчитывает входные данные с атрибутом имени, который начинается с attachment_ и выходит из функции, если найдено 4.

Более того: вы не должны использовать идентификаторы для элементов, которые вы клонируете, потому что идентификаторы должны быть уникальными, какими они не являются в этом случае. Используйте другие атрибуты, такие как class или name.

1 голос
/ 28 декабря 2010

Помимо ответа от Dr.Molle ... проверьте / ограничьте количество полей ввода на стороне сервера. Потому что JS можно манипулировать на стороне клиента ..

0 голосов
/ 28 декабря 2010

Чтобы правильно с этим справиться, вам нужно что-то еще, например: 

$(function() {
    $('#addImg').live('click', function(e) {
       for(var i=1; i<5; i++) { 
         if ($('#clone input[name="attachment_'+i+'"]').length == 0) break;
         if(i == 4) return false;
       }
       $('<p><label><input type="file" name="attachment_'+ i +'"  /> <a href="#" class="remImg">Remove</a></label></p>').appendTo('#clone');
       e.preventDefault();
    });

    $('#clone').delegate('.remImg', 'click', function(e) {
       if($('#clone input[name^="attachment_"]').length > 1) {
          $(this).closest('p').remove();
       }
       e.preventDefault();
    });
});

Вы можете проверить это (увидев сгенерированный HTML / узлы) здесь .

Что это делает по циклу и находит первое доступное i для использования. В исходном коде предполагается, что последний - всегда удаленный, это может быть не так, и вам все равно придется повторять число. Вместо этого это цикл, тем не менее, получает первый доступный индекс и использует его ... если мы доберемся до 4, и все они были использованы, прервать (вы можете добавить alert() или что-то в этом if, если ты хотел).

Также обратите внимание на использование класса для remImg, поскольку он повторяется, и использование .delegate(), чтобы быть немного более эффективным ... вы также можете, вероятно, использовать просто обычный .click() обработчик на #addImg, но я не уверен на 100%, где он находится.

...