6 сентябр 2025

Formalar: submit hodisasi va metodi

submit hodisasi forma yuborilganda ishga tushadi, u odatda formani serverga yuborishdan oldin tekshirish yoki yuborishni bekor qilish va JavaScript da qayta ishlash uchun ishlatiladi.

form.submit() metodi JavaScript dan forma yuborishni boshlash imkonini beradi. Biz uni o’zimizning formalarimizni dinamik yaratish va serverga yuborish uchun ishlatishimiz mumkin.

Ularning batafsil ma’lumotlarini ko’raylik.

Hodisa: submit

Formani yuborishning ikkita asosiy usuli mavjud:

Birinchisi – <input type="submit"> yoki <input type="image"> ga bosish.
Ikkinchisi – input maydonida Enter tugmasini bosish.

Ikkala harakat ham formada submit hodisasiga olib keladi. Ishlov beruvchi ma’lumotlarni tekshirishi mumkin va agar xatolar bo’lsa, ularni ko’rsatishi va event.preventDefault() ni chaqirishi mumkin, shunda forma serverga yuborilmaydi.

Quyidagi formada:

Matn maydoniga boring va Enter ni bosing.
<input type="submit"> ga bosing.

Ikkala harakat ham alert ni ko’rsatadi va return false tufayli forma hech qayerga yuborilmaydi:

          <form onsubmit="alert('submit!');return false">
  Birinchi: Input maydoniga kiriting <input type="text" value="matn"><br>
  Ikkinchi: "Submit" ga bosing: <input type="submit" value="Yuborish">
</form>

Input maydonida Enter yordamida forma yuborilganda, <input type="submit"> da click hodisasi ishga tushadi.

Bu juda qiziq, chunki hech qanday bosish bo’lmagan.

Mana demo:

          <form onsubmit="return false">
 <input type="text" size="30" value="Bu yerga fokus qiling va enter bosing">
 <input type="submit" value="Yuborish" onclick="alert('bosish')">
</form>

Metod: submit

Formani serverga qo’lda yuborish uchun form.submit() ni chaqirishimiz mumkin.

Keyin submit hodisasi hosil bo’lmaydi. Agar dasturchi form.submit() ni chaqirsa, skript allaqachon barcha tegishli qayta ishlashlarni amalga oshirgan deb hisoblanadi.

Ba’zan bu formani qo’lda yaratish va yuborish uchun ishlatiladi:

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

// formani yuborish uchun u hujjatda bo'lishi kerak
document.body.append(form);

form.submit();

Vazifalar

Modal forma

html xabari, input maydoni va OK/CANCEL tugmalari bilan formani ko’rsatuvchi showPrompt(html, callback) funksiyasini yarating.

Foydalanuvchi matn maydoniga biror narsa yozishi va Enter yoki OK tugmasini bosishi kerak, keyin kiritilgan qiymat bilan callback(value) chaqiriladi.
Aks holda, agar foydalanuvchi Esc yoki CANCEL tugmasini bossa, callback(null) chaqiriladi.

Ikkala holatda ham bu kirish jarayonini tugatadi va formani olib tashlaydi.

Talablar:

Forma oynaning markazida bo’lishi kerak.
Forma modal bo’lishi kerak. Boshqacha qilib aytganda, foydalanuvchi uni yopmaguncha sahifaning qolgan qismi bilan hech qanday o’zaro ta’sir mumkin emas.
Forma ko’rsatilganda, fokus foydalanuvchi uchun <input> ichida bo’lishi kerak.
Tab/Shift+Tab tugmalari forma maydonlari orasida fokusni siljitishi kerak, uni boshqa sahifa elementlariga chiqishiga ruxsat bermang.

Foydalanish misoli:

          showPrompt("Biror narsa kiriting<br>...aqlli :)", function(value) {
  alert(value);
});
        

Iframe dagi demo:

P.S. Manba hujjatda sobit pozitsiyaga ega forma uchun HTML/CSS mavjud, lekin uni modal qilish sizga bog’liq.

Vazifa uchun sandbox-ni oching.

Modal oyna butun oynani qoplaydigan yarim shaffof <div id="cover-div"> yordamida amalga oshirilishi mumkin, masalan:

          #cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}
        

<div> hamma narsani qamrab olganligi sababli, uning ostidagi sahifani emas, balki barcha kliklarni oladi.

Shuningdek, biz body.style.overflowY='hidden' o’rnatish orqali sahifani aylantirishni oldini olishimiz mumkin.

Shakl <div> ichida emas, balki uning yonida bo’lishi kerak, chunki biz unda opacity bo’lishini istamaymiz.

Yechimni sandbox-da oching.

O'quv qo'llanma xaritasi

Izohlar

izoh berishdan oldin buni o'qing…