Pembangunan Sambungan Pelayar (Chrome & Edge) · Pelajaran

Penghantaran Borang secara Terprogram

Automatikkan pengisian dan penghantaran borang pada halaman web, sekali gus memudahkan tugas kemasukan data yang berulang untuk pengguna.

Pelajaran 2 daripada 411 langkah

Penghantaran Borang secara Terprogram ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Mengautomatikkan Penghantaran Borang

Sambungan penyemak imbas boleh melakukan lebih daripada sekadar membaca halaman web; sambungan ini juga boleh berinteraksi dengannya! Salah satu keupayaan yang berkuasa ialah mengisi dan menghantar borang secara terprogram.

Ini bermakna sambungan anda boleh memasukkan teks, memilih pilihan dan mengklik butang secara automatik pada borang web, sekali gus menjimatkan masa dan usaha pengguna untuk tugasan berulang.

Mencari Borang dan Medan

Sebelum anda boleh berinteraksi dengan borang, skrip kandungan anda perlu mencarinya serta medan inputnya pada halaman web. Biasanya, anda akan menggunakan kaedah DOM (Model Objek Dokumen) standard untuk tujuan ini.

Gunakan document.querySelector() atau document.getElementById() untuk menyasarkan elemen.
Periksa HTML halaman untuk mencari ID atau kelas unik bagi elemen borang.

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

Mengisi Medan Teks

Untuk memasukkan teks ke dalam elemen <input type="text"> atau <textarea>, anda hanya perlu menetapkan sifat valuenya. Sifat ini mengawal kandungan yang dipaparkan dalam medan tersebut secara langsung.

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

Mengendalikan Kotak Pilihan dan Butang Radio

Untuk kotak pilihan dan butang radio, anda mengubah suai sifat checkednya. Menetapkannya kepada true akan memilih elemen tersebut, manakala false akan menyahpilihnya.

Kotak pilihan: Boleh ditogol secara individu.
Butang radio: Menetapkan checked = true pada satu butang dalam kumpulan akan menyahpilih butang lain dalam kumpulan yang sama secara automatik.

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

Mengurus Pilihan Menu Juntai Bawah

Untuk memilih pilihan dalam menu juntai bawah <select>, tetapkan sifat value elemen <select> kepada value bagi <option> yang dikehendaki.

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

Mencetuskan Peristiwa Perubahan

Kadang-kadang, menetapkan sifat value atau checked sesuatu elemen sahaja tidak mencukupi. Banyak borang web menggunakan JavaScript untuk bertindak balas terhadap input pengguna, selalunya dengan mendengar peristiwa 'change' atau 'input'.

Jika borang tidak berfungsi seperti yang dijangka selepas nilai ditetapkan, anda mungkin perlu menghantar peristiwa ini secara terprogram untuk mensimulasikan interaksi pengguna.

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

Menghantar Borang Secara Terprogram

Setelah semua medan diisi, anda perlu menghantar borang tersebut. Terdapat dua cara utama untuk berbuat demikian:

Klik butang hantar: Cari <button type="submit"> atau <input type="submit">, kemudian panggil kaedah .click()nya.
Panggil form.submit(): Dapatkan rujukan kepada elemen <form>, kemudian panggil kaedah .submit()nya secara terus. Cara ini memintas sebarang pengendali klik pada butang hantar.

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

Mengendalikan Borang Dinamik

Sesetengah borang atau medan input mungkin belum tersedia apabila skrip kandungan anda dimuatkan. Elemen tersebut mungkin ditambahkan secara dinamik oleh JavaScript halaman selepas panggilan AJAX atau interaksi pengguna.

Untuk situasi ini, anda mungkin perlu:

Menggunakan setTimeout atau setInterval untuk memeriksa kewujudan elemen secara berkala.
Menggunakan MutationObserver untuk memantau perubahan dalam DOM yang menandakan borang telah sedia.

Automasi Borang yang Kukuh

Apabila mengautomatikkan borang, sentiasa pertimbangkan keteguhan dan pengendalian ralat:

Semak kewujudan elemen: Sentiasa sahkan bahawa elemen wujud sebelum cuba berinteraksi dengannya.
Gunakan try...catch: Bungkus operasi penting dalam blok try...catch untuk mengendalikan ralat yang tidak dijangka.
Gunakan pemilih yang khusus: Gunakan ID unik atau pemilih atribut khusus supaya tidak menyasarkan elemen yang salah.

Pemeriksaan Automasi Borang

Anda sedang membina sambungan untuk mengisi borang pendaftaran secara automatik. Manakah coretan kod JavaScript berikut yang menetapkan nilai input teks dengan id='usernameField' kepada 'newuser123' dengan betul?

Jawab dalam pelajaran interaktif

Imbas Kembali: Penghantaran Borang

Anda telah mempelajari cara berinteraksi dengan borang web secara terprogram, iaitu ciri yang berkuasa untuk sambungan penyemak imbas!

Cari borang dan input menggunakan pemilih DOM.
Tetapkan .value untuk medan teks dan menu juntai bawah.
Tetapkan .checked untuk kotak pilihan dan butang radio.
Hantar peristiwa seperti 'change' jika perlu.
Hantar borang dengan mengklik butang atau memanggil .submit().

Pengetahuan ini membolehkan anda membina sambungan yang meningkatkan produktiviti pengguna dengan ketara melalui automasi kemasukan data berulang.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Penghantaran Borang secara Terprogram” percuma?

Ya — teks penuh “Penghantaran Borang secara Terprogram” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Sambungan Pelayar (Chrome & Edge), tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Penghantaran Borang secara Terprogram”?

Automatikkan pengisian dan penghantaran borang pada halaman web, sekali gus memudahkan tugas kemasukan data yang berulang untuk pengguna. Anda berlatih Pembangunan Sambungan Pelayar (Chrome & Edge) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Sambungan Pelayar (Chrome & Edge)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Penghantaran Borang secara Terprogram” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) ini?

Ya. Setiap pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Sambungan Pelayar (Chrome & Edge)