6 Oktober 2021

Forms: event dan method submit

Event submit terpicu saat form dikirimkan, biasanya digunakan untuk memvalidasi form sebelum mengirimkannya ke server atau untuk membatalkan pengiriman dan memprosesnya dalam JavaScript.

Method form.submit() memungkinkan untuk memulai pengiriman form dari JavaScript. Kita dapat menggunakannya untuk membuat dan mengirim form kita sendiri secara dinamis ke server.

Mari kita lihat lebih detail

Event: submit

Ada dua cara utama untuk mengirimkan form:

Pertama – untuk mengklik <input type="submit"> atau <input type="image">.
Kedua – tekan Enter pada kolom input.

Kedua tindakan tersebut mengarah ke event submit pada form. Handler dapat memeriksa data, dan jika ada kesalahan, tunjukkan dan panggil event.preventDefault(), maka formulir tidak akan dikirim ke server.

Dalam form di bawah ini:

Masuk ke field teks dan tekan Enter.
Klik <input type="submit">.

Kedua tindakan menunjukkan alert dan form tidak dikirim ke mana pun karena return false:

          <form onsubmit="alert('submit!');return false">
  First: Enter in the input field <input type="text" value="text"><br>
  Second: Click "submit": <input type="submit" value="Submit">
</form>

Saat form dikirim menggunakan Enter pada field input, event click akan dipicu pada <input type="submit">.

Itu agak lucu, karena tidak ada klik sama sekali.

Berikut demonya:

          <form onsubmit="return false">
 <input type="text" size="30" value="Focus here and press enter">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

Method: submit

Untuk mengirimkan form ke server secara manual, kita dapat memanggil form.submit().

Maka event submit tidak dibuat. Diasumsikan bahwa jika programmer memanggil form.submit(), maka skrip telah melakukan semua pemrosesan terkait.

Terkadang itu digunakan untuk membuat dan mengirim formulir secara manual, seperti ini:

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

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

// form harus berada di dalam dokumen untuk mengirimkannya.
document.body.append(form);

form.submit();

Tugas

Modal form

Create a function showPrompt(html, callback) that shows a form with the message html, an input field and buttons OK/CANCEL.

A user should type something into a text field and press Enter or the OK button, then callback(value) is called with the value they entered.
Otherwise if the user presses Esc or CANCEL, then callback(null) is called.

In both cases that ends the input process and removes the form.

Requirements:

The form should be in the center of the window.
The form is modal. In other words, no interaction with the rest of the page is possible until the user closes it.
When the form is shown, the focus should be inside the <input> for the user.
Keys Tab/Shift+Tab should shift the focus between form fields, don’t allow it to leave for other page elements.

Usage example:

          showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});
        

A demo in the iframe:

P.S. The source document has HTML/CSS for the form with fixed positioning, but it’s up to you to make it modal.

Buka sandbox untuk tugas tersebut.

A modal window can be implemented using a half-transparent <div id="cover-div"> that covers the whole window, like this:

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

Because the <div> covers everything, it gets all clicks, not the page below it.

Also we can prevent page scroll by setting body.style.overflowY='hidden'.

The form should be not in the <div>, but next to it, because we don’t want it to have opacity.

Buka solusi di kotak pasir.

Peta tutorial

komentar

baca ini sebelum berkomentar…