Dynamisk manipulation af formularfelter
Lær dynamisk at tilføje, fjerne og ændre formularfelter ud fra brugerinput, så du kan skabe fleksible og interaktive formulargrænseflader med jQuery.
Dynamisk manipulation af formularfelter er en gratis jQuery Academy-lektion på CoddyKit. Dette er lektion 1 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i jQuery Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. jQuery Academy-kurset indeholder 3 lektioner i alt.
Dynamiske formularer: Hvorfor og hvordan
Formularer er ofte statiske, men moderne webapplikationer lever af interaktivitet. Dynamisk manipulation af formularfelter giver dig mulighed for at ændre en formulars struktur i realtid.
Det betyder, at du kan tilføje, fjerne eller ændre inputfelter, efterhånden som brugeren interagerer med din side. Det giver en meget bedre brugeroplevelse og mere fleksible formularer!
Tilføjelse af felter: Det grundlæggende
Grundidéen bag tilføjelse af felter er at oprette nye HTML-elementer og indsætte dem i Document Object Model (DOM).
- Brug jQuery til at oprette elementer, f.eks.
$(''). - Brug metoder som
.append(),.prepend(),.after()eller.before()til at placere dem præcist i formularen. - Husk at give nye felter passende
name-attributter, især til behandling på backend.
Tilføj nyt inputfelt til e-mail
Lad os tilføje en knap, der genererer et nyt inputfelt til e-mail, når der klikkes på den. Bemærk, hvordan vi opretter HTML-strengen og derefter føjer den til.
<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>Fjernelse af felter: Oprydning
Ligesom brugere kan have brug for at tilføje felter, har de ofte også brug for at fjerne dem. Det holder formularen enkel og relevant for deres behov.
jQuerys .remove()-metode er perfekt til dette. Den fjerner de valgte elementer helt fra DOM'en sammen med alle tilknyttede data og hændelseshandlere.
Fjern et bestemt inputfelt
Lad os nu udvide vores forrige eksempel. Vi tilføjer en knap med teksten 'Fjern' ved siden af hvert e-mailfelt. Når der klikkes på den, slettes det pågældende felt.
Vigtigt: Vær opmærksom på, hvordan vi håndterer hændelser for dynamisk tilføjede knapper med teksten 'Fjern'!
<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>Ændring af felter: Justering af attributter
Nogle gange har du ikke brug for at tilføje eller fjerne et felt, men kun ændre dets egenskaber. Det kan være dets value, placeholder, tilstand for disabled eller endda dets name eller id.
jQuery har .attr() til HTML-attributter og .prop() til DOM-egenskaber. Ofte foretrækkes .prop() til booleske attributter som checked, disabled eller selected.
Skift feltets tilstand
Her er et eksempel, hvor et afkrydsningsfelt styrer, om et tekstinput er aktiveret eller deaktiveret. Vi bruger .prop() til at ændre egenskaben disabled.
<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>Hændelser på dynamiske elementer
En almindelig faldgrube er, at direkte hændelseshandlere som $('#myButton').on('click', ...) kun tilknyttes elementer, der er til stede, når siden indlæses.
For dynamisk tilføjede elementer skal du bruge hændelsesdelegering. Det betyder, at du knytter hændelseslytteren til et statisk overordnet element og derefter angiver en vælger for de dynamiske underordnede elementer. jQuerys .on()-metode håndterer dette på elegant vis.
Praktisk eksempel: "Tilføj flere"
Her kombinerer vi det, du har lært, i et almindeligt mønster: en knap med teksten 'Tilføj færdighed', som giver brugerne mulighed for at angive flere færdigheder, hver med sin egen knap med teksten 'Fjern'.
Bemærk brugen af data-id til entydig identifikation og .closest() til at finde det overordnede element, der skal fjernes.
<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>Tjek af dynamiske formularer
Test din forståelse af dynamisk manipulation af formularer.
Opsummering: Dynamiske formularer
I denne lektion lærte du, hvordan du gør formularer mere interaktive og brugervenlige ved dynamisk at tilføje, fjerne og ændre felter med jQuery.
- Brug
.append(),.prepend(),.after()og.before()til at tilføje elementer. - Brug
.remove()til at slette elementer. - Brug
.attr()og.prop()til at ændre elementers attributter og egenskaber. - Brug især hændelsesdelegering sammen med
.on()til hændelser på elementer, der føjes til DOM'en efter den indledende sideindlæsning.
Derefter dykker vi ned i validering af formularer på klientsiden!
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Dynamisk manipulation af formularfelter” gratis?
Ja — alle 3 lektioner i læringssporet jQuery Academy, inklusive “Dynamisk manipulation af formularfelter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. jQuery Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Dynamisk manipulation af formularfelter”?
Lær dynamisk at tilføje, fjerne og ændre formularfelter ud fra brugerinput, så du kan skabe fleksible og interaktive formulargrænseflader med jQuery. Du øver dig i jQuery Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på jQuery Academy?
Der kræves ingen tidligere erfaring. jQuery Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 3.
Hvor lang tid tager lektionen “Dynamisk manipulation af formularfelter”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne jQuery Academy-lektion?
Ja. Alle jQuery Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Dynamisk manipulation af formularfelter
- Valideringslogik på klientsiden
- AJAX-afsendelse af formularer og feedback