Dynamische Bearbeitung von Formularfeldern
Lernen Sie, Formularfelder abhängig von Benutzereingaben dynamisch hinzuzufügen, zu entfernen und zu ändern und mit jQuery anpassungsfähige, interaktive Formulare zu erstellen.
Dynamische Bearbeitung von Formularfeldern ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Dynamische Formulare: Warum und wie
Formulare sind häufig statisch, doch moderne Webanwendungen leben von Interaktivität. Mit der dynamischen Manipulation von Formularfeldern können Sie die Struktur eines Formulars in Echtzeit ändern.
Das bedeutet, dass Sie Eingabefelder hinzufügen, entfernen oder ändern können, während der Benutzer mit Ihrer Seite interagiert. Das sorgt für eine deutlich bessere Benutzererfahrung und anpassungsfähigere Formulare!
Felder hinzufügen: Die Grundlagen
Die Grundidee beim Hinzufügen von Feldern besteht darin, neue HTML-Elemente zu erstellen und sie in das Document Object Model (DOM) einzufügen.
- Verwenden Sie jQuery, um Elemente zu erstellen (z. B.
$('')). - Verwenden Sie Methoden wie
.append(),.prepend(),.after()oder.before(), um sie genau an der gewünschten Stelle in Ihrem Formular zu platzieren. - Denken Sie daran, neuen Feldern geeignete
name-Attribute zu geben, insbesondere für die Verarbeitung im Backend.
Neue E-Mail-Eingabe hinzufügen
Fügen wir eine Schaltfläche hinzu, die beim Klicken ein neues E-Mail-Eingabefeld erzeugt. Beachten Sie, wie wir die HTML-Zeichenfolge erstellen und anschließend anhängen.
<div id="email-fields">
<input type="email" name="email[]" placeholder="Email 1">
</div>
<button id="add-email">Add Another Email</button>
<script>
$(document).ready(function() {
let emailCount = 1;
$('#add-email').on('click', function() {
emailCount++;
const newEmailField = `
<input type="email" name="email[]"
placeholder="Email ${emailCount}">
`;
$('#email-fields').append(newEmailField);
});
});
</script>Felder entfernen: Aufräumen
So wie Benutzer Felder hinzufügen müssen, möchten sie häufig auch Felder entfernen. Dadurch bleibt das Formular übersichtlich und auf ihre Bedürfnisse zugeschnitten.
Die jQuery-Methode .remove() eignet sich perfekt dafür. Sie entfernt die ausgewählten Elemente vollständig aus dem DOM, einschließlich aller zugehörigen Daten und Event-Handler.
Bestimmte Eingabe entfernen
Erweitern wir nun unser vorheriges Beispiel. Wir fügen neben jedem E-Mail-Feld eine Schaltfläche „Entfernen“ hinzu. Durch einen Klick wird das jeweilige Feld gelöscht.
Wichtig: Achten Sie darauf, wie wir Ereignisse für dynamisch hinzugefügte Schaltflächen „Entfernen“ behandeln!
<div id="email-fields">
<div class="email-group">
<input type="email" name="email[]" placeholder="Email 1">
<button class="remove-email">Remove</button>
</div>
</div>
<button id="add-email">Add Another Email</button>
<script>
$(document).ready(function() {
let emailCount = 1;
$('#add-email').on('click', function() {
emailCount++;
const newEmailGroup = `
<div class="email-group">
<input type="email" name="email[]"
placeholder="Email ${emailCount}">
<button class="remove-email">Remove</button>
</div>
`;
$('#email-fields').append(newEmailGroup);
});
// Event delegation for remove buttons
$('#email-fields').on('click', '.remove-email', function() {
$(this).parent('.email-group').remove();
});
});
</script>Felder ändern: Attribute anpassen
Manchmal müssen Sie ein Feld weder hinzufügen noch entfernen, sondern lediglich seine Eigenschaften ändern. Das kann sein value, placeholder, der Status disabled oder sogar sein name oder seine id.
jQuery stellt .attr() für HTML-Attribute und .prop() für DOM-Eigenschaften bereit. Für boolesche Attribute wie checked, disabled oder selected wird häufig .prop() bevorzugt.
Feldstatus umschalten
Hier sehen Sie ein Beispiel, bei dem eine Checkbox steuert, ob ein Texteingabefeld aktiviert oder deaktiviert ist. Wir verwenden .prop(), um die Eigenschaft disabled zu ändern.
<label>
<input type="checkbox" id="enable-input"> Enable Input
</label>
<input type="text" id="my-input" value="Hello" disabled>
<script>
$(document).ready(function() {
$('#enable-input').on('change', function() {
const isChecked = $(this).is(':checked');
$('#my-input').prop('disabled', !isChecked); // Set disabled based on checkbox state
});
});
</script>Ereignisse für dynamische Elemente
Eine häufige Fehlerquelle: Direkte Event-Handler (wie $('#myButton').on('click', ...)) werden nur an Elemente gebunden, die beim Laden der Seite vorhanden sind.
Für dynamisch hinzugefügte Elemente benötigen Sie Ereignisdelegation. Dabei wird der Event-Listener an ein statisches übergeordnetes Element gebunden und anschließend ein Selektor für die dynamischen untergeordneten Elemente angegeben. jQuerys Methode .on() übernimmt dies besonders elegant.
Praktisches Beispiel „Mehr hinzufügen“
Hier kombinieren wir das bisher Gelernte in einem häufig verwendeten Muster: Eine Schaltfläche „Fähigkeit hinzufügen“ ermöglicht es Benutzern, mehrere Fähigkeiten aufzulisten, wobei jede Fähigkeit über eine eigene Schaltfläche „Entfernen“ verfügt.
Beachten Sie die Verwendung von data-id zur eindeutigen Identifizierung und von .closest(), um das zu entfernende übergeordnete Element zu finden.
<div id="skill-list">
<div class="skill-item" data-id="1">
<input type="text" name="skill[]" placeholder="Skill 1">
<button class="remove-skill">Remove</button>
</div>
</div>
<button id="add-skill">Add Skill</button>
<script>
$(document).ready(function() {
let skillId = 1; // Unique ID for each skill item
$('#add-skill').on('click', function() {
skillId++;
const newSkillItem = `
<div class="skill-item" data-id="${skillId}">
<input type="text" name="skill[]"
placeholder="Skill ${skillId}">
<button class="remove-skill">Remove</button>
</div>
`;
$('#skill-list').append(newSkillItem);
});
// Event delegation for remove buttons
$('#skill-list').on('click', '.remove-skill', function() {
// Prevent removing the very first skill if desired
if ($('.skill-item').length > 1) {
$(this).closest('.skill-item').remove();
} else {
alert("You need at least one skill!");
}
});
});
</script>Test zu dynamischen Formularen
Testen Sie Ihr Verständnis der dynamischen Formularmanipulation.
Rückblick: Dynamische Formulare
In dieser Lektion haben Sie gelernt, Formulare durch das dynamische Hinzufügen, Entfernen und Ändern von Feldern mit jQuery interaktiver und benutzerfreundlicher zu gestalten.
- Verwenden Sie
.append(),.prepend(),.after()und.before(), um Elemente hinzuzufügen. - Verwenden Sie
.remove(), um Elemente zu löschen. - Verwenden Sie
.attr()und.prop(), um Elementattribute und -eigenschaften zu ändern. - Verwenden Sie für Ereignisse auf Elementen, die nach dem anfänglichen Laden der Seite zum DOM hinzugefügt werden, unbedingt Ereignisdelegation mit
.on().
Als Nächstes beschäftigen wir uns mit der clientseitigen Formularvalidierung!
Häufig gestellte Fragen
Ist die Lektion „Dynamische Bearbeitung von Formularfeldern“ kostenlos?
Ja — der vollständige Text von „Dynamische Bearbeitung von Formularfeldern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Dynamische Bearbeitung von Formularfeldern“?
Lernen Sie, Formularfelder abhängig von Benutzereingaben dynamisch hinzuzufügen, zu entfernen und zu ändern und mit jQuery anpassungsfähige, interaktive Formulare zu erstellen. Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.
Wie lange dauert die Lektion „Dynamische Bearbeitung von Formularfeldern“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Dynamische Bearbeitung von Formularfeldern
- Logik der clientseitigen Formularvalidierung
- AJAX-Formularübermittlung und Feedback