Utveckling av webbläsartillägg (Chrome och Edge) · Lektion

Skicka formulär programmatiskt

Automatisera ifyllning och insändning av formulär på webbsidor och förenkla återkommande uppgifter med datainmatning för användarna.

Lektion 2 av 411 steg

Skicka formulär programmatiskt är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Automatisera formulärinskick

Webbläsartillägg kan göra mer än att bara läsa webbsidor – de kan även interagera med dem! En kraftfull funktion är att programmatiskt fylla i och skicka formulär.

Det innebär att tillägget automatiskt kan skriva in text, välja alternativ och klicka på knappar i ett webbformulär, så att användarna sparar tid och arbete vid repetitiva uppgifter.

Hitta formulär och fält

Innan ni kan interagera med ett formulär måste ert content script hitta formuläret och dess inmatningsfält på webbsidan. Vanligtvis använder ni då standardmetoder i DOM (Document Object Model).

Använd document.querySelector() eller document.getElementById() för att hitta element.
Granska sidans HTML för att hitta unika ID:n eller klasser för formulärelement.

(function() {
  // Find a form by its ID
  const loginForm = document.getElementById('login-form');
  // Find an input field by its name attribute within that form
  const usernameField = document.querySelector('#login-form input[name="username"]');
  
  if (loginForm && usernameField) {
    console.log("Form and username field found!");
  } else {
    console.log("Could not find form or username field.");
  }
})();

Fylla i textfält

Om ni vill skriva in text i element av typen <input type="text"> eller <textarea> anger ni helt enkelt deras value-egenskap. Den här egenskapen styr direkt innehållet som visas i fältet.

(function() {
  // Assume an input field like <input type="text" id="myTextInput">
  const myTextInput = document.getElementById('myTextInput');
  if (myTextInput) {
    myTextInput.value = "CoddyKit Demo";
    console.log("Text input value set to: " + myTextInput.value);
  } else {
    console.log("Text input field not found.");
  }
})();

Hantera kryssrutor och alternativknappar

För kryssrutor och alternativknappar ändrar ni deras checked-egenskap. Om ni anger true markeras elementet, och om ni anger false avmarkeras det.

Kryssrutor: Kan växlas individuellt.
Alternativknappar: Om ni anger checked = true för en knapp i en grupp avmarkeras de andra knapparna i samma grupp automatiskt.

(function() {
  // Assume <input type="checkbox" id="agreeTerms">
  const agreeCheckbox = document.getElementById('agreeTerms');
  if (agreeCheckbox) {
    agreeCheckbox.checked = true;
    console.log("Terms agreed: " + agreeCheckbox.checked);
  }

  // Assume <input type="radio" name="choice" id="choiceA">
  const choiceARadio = document.getElementById('choiceA');
  if (choiceARadio) {
    choiceARadio.checked = true;
    console.log("Choice A selected: " + choiceARadio.checked);
  }
})();

Hantera val i rullgardinsmenyer

Om ni vill välja ett alternativ i en <select>-rullgardinsmeny anger ni value-egenskapen för <select>-elementet till value-värdet för önskat <option>-element.

(function() {
  // Assume <select id="countrySelect"><option value="us">USA</option><option value="ca">Canada</option></select>
  const countrySelect = document.getElementById('countrySelect');
  if (countrySelect) {
    countrySelect.value = "ca"; // Selects the option with value="ca"
    console.log("Selected country: " + countrySelect.value);
  } else {
    console.log("Country select dropdown not found.");
  }
})();

Utlösa change-händelser

Ibland räcker det inte att bara ange ett elements value- eller checked-egenskap. Många webbformulär använder JavaScript för att reagera på användarinmatning och lyssnar ofta efter 'change'- eller 'input'-händelser.

Om ett formulär inte fungerar som förväntat efter att ni har angett värden kan ni behöva utlösa dessa händelser programmatiskt för att simulera användarinteraktion.

(function() {
  // Assume <input type="text" id="quantityInput">
  const quantityInput = document.getElementById('quantityInput');
  if (quantityInput) {
    quantityInput.value = "5";
    console.log("Value set. Now dispatching change event...");
    // Dispatch a 'change' event to trigger any associated JS listeners
    quantityInput.dispatchEvent(new Event('change', { bubbles: true }));
    console.log("Change event dispatched.");
  } else {
    console.log("Quantity input field not found.");
  }
})();

Skicka formulär programmatiskt

När alla fält är ifyllda måste ni skicka formuläret. Det finns två huvudsakliga sätt att göra detta:

Klicka på skicka-knappen: Hitta <button type="submit"> eller <input type="submit"> och anropa dess .click()-metod.
Anropa form.submit(): Hämta en referens till <form>-elementet och anropa dess .submit()-metod direkt. Detta kringgår eventuella klickhanterare på skicka-knappen.

(function() {
  // Assume <form id="dataForm">...</form> and <button type="submit" id="sendBtn">Send</button>
  const dataForm = document.getElementById('dataForm');
  const submitButton = document.getElementById('sendBtn');
  
  if (dataForm) {
    console.log("Submitting form directly using .submit()...");
    dataForm.submit(); 
  } else if (submitButton) {
    console.log("Clicking submit button...");
    submitButton.click();
  } else {
    console.log("Form or submit button not found.");
  }
})();

Hantera dynamiska formulär

Vissa formulär eller inmatningsfält kanske inte finns direkt när ert content script läses in. De kan läggas till dynamiskt av sidans JavaScript efter ett AJAX-anrop eller en användarinteraktion.

I sådana situationer kan ni behöva:

Använda setTimeout eller setInterval för att regelbundet kontrollera om elementet finns.
Använda en MutationObserver för att bevaka ändringar i DOM som visar att formuläret är klart.

Robust formulärautomatisering

När ni automatiserar formulär bör ni alltid tänka på robusthet och felhantering:

Kontrollera att elementet finns: Verifiera alltid att ett element finns innan ni försöker interagera med det.
Använd try...catch: Omslut kritiska åtgärder med block av typen try...catch för att hantera oväntade fel.
Var specifik med selektorer: Använd unika ID:n eller specifika attributselektorer för att undvika att rikta in er på fel element.

Kontroll av formulärautomatisering

Ni bygger ett tillägg som automatiskt fyller i ett registreringsformulär. Vilket JavaScript-kodfragment anger korrekt värdet för ett textfält med id='usernameField' till 'newuser123'?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Skicka formulär

Ni har lärt er att programmatiskt interagera med webbformulär – en kraftfull funktion för webbläsartillägg!

Hitta formulär och inmatningsfält med DOM-selektorer.
Ange .value för textfält och rullgardinsmenyer.
Ange .checked för kryssrutor och alternativknappar.
Utlös händelser som 'change' vid behov.
Skicka formulär genom att klicka på en knapp eller anropa .submit().

Med den här färdigheten kan ni bygga tillägg som effektiviserar användarnas arbete genom att automatisera repetitiv datainmatning.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Skicka formulär programmatiskt” gratis?

Ja – hela texten till ”Skicka formulär programmatiskt” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Skicka formulär programmatiskt”?

Automatisera ifyllning och insändning av formulär på webbsidor och förenkla återkommande uppgifter med datainmatning för användarna. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?

Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Skicka formulär programmatiskt”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?

Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)