Formalar va boshqaruv elementlari

Forma yuborish: submit hodisasi va metod

Forma yuborilganda (submit) submit hodisasi ishga tushadi. Odatda u ma'lumot serverga jo'natilishidan oldin uni tekshirish (validatsiya) yoki yuborishni to'xtatib, ma'lumotni JavaScript orqali qayta ishlash uchun ishlatiladi. Ushbu darsda forma yuborishning barcha jihatlarini chuqur o'rganamiz.

submit hodisasi

Forma yuborishning ikki asosiy usuli bor:

  1. <input type="submit"> yoki <input type="image"> tugmasini bosish;
  2. Matn maydonida Enter tugmasini bosish.

Ikkala usul ham formada submit hodisasini keltirib chiqaradi. Ishlovchi ma'lumotni tekshirishi va agar xatolik bo'lsa, event.preventDefault() bilan yuborishni to'xtatishi mumkin:

<form onsubmit="alert('yuborildi!'); return false">
  Birinchi: <input type="text" name="one">
  <input type="submit" value="Yuborish">
</form>

<!-- Enter yoki tugma bosilsa, alert chiqadi.
     return false yuborishni to'xtatadi (sahifa yangilanmaydi) -->
on<event> ichida return false yozish — event.preventDefault()ning eski, lekin haligacha ishlaydigan muqobili. Zamonaviy koddagi ravshanlik uchun event.preventDefault()ni afzal ko'ring.

Enter bilan yuborish

Matn maydonida Enter bosilishi ham formani yuboradi (agar bir nechta matn maydoni bo'lsa). Bu foydalanuvchilarga tanish qulaylik: qidiruv maydoniga yozib, Enter bosish odatiy holat.

Qiziq nozik jihat: Enter bosilganda avval yuboruvchi tugmada click hodisasi generatsiya qilinadi — hatto foydalanuvchi tugmani bosmagan bo'lsa ham. Ya'ni brauzer tugma bosilgandek imitatsiya qiladi:

<form>
  Matn: <input type="text" name="text">
  <input type="submit" value="Yuborish" onclick="alert('click hodisasi ishladi!')">
</form>

<!-- Matn maydonida Enter bossangiz, tugmaning
     onclick ishlovchisi ham ishga tushadi -->

submit va click bog'liqligi

Formani dasturiy yuborish uchun tugmada button.click() yoki button.dispatchEvent(...)ni chaqirsak, forma yuboriladi. Chunki click tugmada submitni keltirib chiqaradi:

let form = document.getElementById('form');

// form.dispatchEvent orqali submit generatsiya qilish
let event = new Event('submit', { bubbles: true, cancelable: true });
form.dispatchEvent(event);
button yoki input type=submit ustida click() chaqirilsa, forma tabiiy yo'l bilan (submit hodisasi bilan) yuboriladi. Bu tabiiy imkoniyat: interfeys elementini bosishni imitatsiya qilish.

form.submit() metodi

Formani dasturiy yuborishning to'g'ridan-to'g'ri yo'li — form.submit() metodi. Uni chaqirganda ma'lumot serverga jo'natiladi:

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

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

// forma DOM'da bo'lishi kerak
document.body.append(form);

form.submit();
Muhim va ko'pincha unutiladigan jihat: form.submit() metodi chaqirilganda submit hodisasi generatsiya qilinmaydi! Ya'ni onsubmit ishlovchisi ishga tushmaydi. Buning mantiqi shuki, dasturchi form.submit()ni ataylab chaqirgan, demak barcha kerakli tekshiruvlarni allaqachon o'zi bajargan deb hisoblanadi. Agar validatsiya kerak bo'lsa, uni submit()ni chaqirishdan oldin qo'lda bajaring.

Yuborishdan oldin validatsiya

Amaliyotda submit hodisasi eng ko'p validatsiya uchun ishlatiladi. Agar ma'lumot noto'g'ri bo'lsa, event.preventDefault() bilan yuborishni to'xtatib, foydalanuvchiga xatolikni ko'rsatamiz:

<form id="form">
  Email: <input type="text" name="email" id="email">
  <div id="error" style="color:red"></div>
  <input type="submit" value="Yuborish">
</form>

<script>
  form.onsubmit = function(event) {
    let email = form.email.value;

    if (!email.includes('@')) {
      // xatolik: yuborishni to'xtatamiz
      event.preventDefault();
      error.innerHTML = 'Iltimos, to'g'ri email kiriting.';
      return;
    }

    // hammasi joyida bo'lsa, forma yuboriladi
    error.innerHTML = '';
  };
</script>

Bu yerda event.preventDefault() brauzerning odatiy harakatini — formani serverga yuborib, sahifani yangilashni — to'xtatadi. Xatolik tuzatilib, qaytadan yuborilganda esa forma normal jo'natiladi.

AJAX bilan yuborish

Ko'p zamonaviy ilovalarda forma umuman odatiy yo'l bilan yuborilmaydi. Aksincha, preventDefault() bilan brauzer yuborishini to'sib, ma'lumot JavaScript orqali (masalan, fetch) jo'natiladi. Bu sahifani yangilamasdan ma'lumot almashish imkonini beradi:

<form id="form">
  <input name="login">
  <input type="submit" value="Yuborish">
</form>

<script>
  form.onsubmit = async function(event) {
    event.preventDefault(); // odatiy yuborishni to'saylik

    // ma'lumotni to'playmiz va fetch bilan jo'natamiz
    let data = new FormData(form);

    let response = await fetch('/submit', {
      method: 'POST',
      body: data
    });

    let result = await response.json();
    alert(result.message);
  };
</script>
new FormData(form) — formadagi barcha maydonlarni avtomatik yig'ib beruvchi qulay obyekt. Uni to'g'ridan-to'g'ri fetchning bodysiga berish mumkin — brauzer ma'lumotni to'g'ri formatlaydi.

Xulosa