die Dateieingänge in einer Form mit JQuery geklonten Begrenzen

Question

i verwende diese JQuery-Funktion die Dateieingabefelder in meiner Form zu klonen,

$(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; 
    }); 
}); 

ist es möglich, die Felder zu begrenzen, die geklont werden können? Sagen wir eine Anzahl von 4 Feldern?

dank viel,
Philip

Answer 1

Verwendung zum Beispiel in der Funktion dieses erste, der eine Eingabe ergänzt:

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

Er zählt die Eingabe des mit einem Namen-Attribute, das mit attachment_ und Blättern beginnt die Funktion wenn 4 gefunden werden.

Außerdem: Sie sollten keine IDs für die Elemente verwenden, die Sie klonen, da IDs eindeutig sein müssen, was sie in diesem Fall nicht sind. Verwenden Sie andere Attribute wie class oder name.

Answer 2

Zusätzlich zu der Antwort von Dr.Molle ... überprüfen/begrenzen Sie die Anzahl der Eingabefelder auf der Serverseite. Da JS kann auf der Client-Seite manipuliert werden ..

Answer 3

Um es wirklich richtig handhaben, müssen Sie etwas anderes, wie folgt aus:

$(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(); 
    }); 
}); 

You can test it out (seeing the generated HTML/nodes) here.

Was dies tut Schleife durch und findet die erste verfügbare i zu verwenden. Ihr ursprünglicher Code geht davon aus der letzte ist immer der eine entfernt, das kann nicht der Fall sein, und Sie hätten immer noch eine Nummer wiederholt. Stattdessen wird diese Schleife durchlaufen, bekommt den ersten verfügbaren Index und verwendet das ... Wenn wir 4 bekommen und sie alle in Gebrauch waren, Abbruch (Sie könnten auch eine alert() oder etwas in dieser if hinzufügen, wenn Sie wollten).

Auch die Verwendung einer Klasse beachten Sie für remImg da es wiederholt ist, und die Verwendung von .delegate() etwas effizienter zu sein ... Sie können sich wahrscheinlich auch nur einen normalen .click() Handler auf #addImg verwenden, aber ich bin nicht 100 % sicher, dass es hier ist.