Menggunakan JavaScript dan borang

Javascript memakai banyak topi. Anda boleh menggunakan JavaScript untuk membuat kesan khas. Anda boleh menggunakan JavaScript untuk menjadikan halaman HTML anda "lebih pintar" dengan memanfaatkan kemampuan membuat keputusan. Dan anda boleh menggunakan JavaScript untuk meningkatkan bentuk HTML. Permohonan terakhir ini sangat penting. Dari semua topi yang boleh dipakai JavaScript, ciri pemprosesan bentuknya adalah antara yang paling dicari dan digunakan.

Tidak ada yang menimbulkan ketakutan di hati penerbit Web daripada tiga surat ini: CGI. CGI (yang bermaksud antarmuka gateway biasa), adalah mekanisme untuk mengangkut data dari klien (penyemak imbas) ke pelayan dengan selamat. Ia biasanya digunakan untuk memindahkan data dari bentuk HTML ke pelayan.

Dengan JavaScript di sisi anda, anda dapat memproses borang mudah tanpa meminta pelayan. Dan semasa menghantar borang ke program CGI adalah perlu, anda boleh meminta JavaScript mengurus semua syarat awal, seperti mengesahkan input untuk memastikan bahawa pengguna telah memberi tanda pada setiap i. Dalam lajur ini kita akan melihat dengan teliti sambungan bentuk-JavaScript, termasuk cara menggunakan objek bentuk JavaScript, cara membaca dan mengatur isi formulir, dan cara memicu peristiwa JavaScript dengan memanipulasi kawalan formulir. Kami juga akan membahas cara menggunakan JavaScript untuk mengesahkan input borang dan menyerahkan borang ke program CGI.

Belajar JavaScript

Artikel ini adalah sebahagian daripada arkib kandungan teknikal JavaWorld. Anda dapat belajar banyak tentang pengaturcaraan JavaScript dengan membaca artikel dalam siri JavaScript , hanya perlu diingat bahawa beberapa maklumat mungkin sudah ketinggalan zaman. Lihat "Menggunakan objek bawaan JavaScript" dan "Program debugging JavaScript" untuk lebih lanjut mengenai pengaturcaraan dengan JavaScript.

Membuat borang

Terdapat sedikit perbezaan antara bentuk HTML lurus dan bentuk yang disempurnakan JavaScript. Yang utama ialah borang JavaScript bergantung pada satu atau lebih pengendali acara, seperti onClick atau onSubmit. Ini memanggil tindakan JavaScript ketika pengguna melakukan sesuatu dalam bentuk, seperti mengklik butang. Pengendali acara, yang ditempatkan dengan atribut selebihnya dalam tag bentuk HTML, tidak dapat dilihat oleh penyemak imbas yang tidak menyokong JavaScript. Kerana sifat ini, anda sering dapat menggunakan satu bentuk untuk penyemak imbas JavaScript dan bukan JavaScript.

Objek kawalan bentuk khas - juga disebut "widget" - merangkumi yang berikut:

  • Kotak teks untuk memasukkan sebaris teks
  • Tekan butang untuk memilih tindakan
  • Butang radio untuk membuat satu pilihan di antara sekumpulan pilihan
  • Tandakan kotak untuk memilih atau membatalkan pilihan satu pilihan bebas

Saya tidak akan repot menghitung semua atribut kawalan ini (widget), dan cara menggunakannya dalam HTML. Sebilangan besar rujukan pada HTML akan memberi anda maklumat. Untuk penggunaan dengan JavaScript, anda harus selalu ingat untuk memberikan nama untuk borang itu sendiri, dan setiap kawalan yang anda gunakan. Nama-nama tersebut membolehkan anda merujuk objek di halaman yang disempurnakan JavaScript.

Bentuk khasnya kelihatan seperti ini. Perhatikan saya telah memberikan NAME = atribut untuk semua kawalan borang, termasuk borang itu sendiri:

 Enter something in the box:

  • NAMA BORANG = "myform" mentakrifkan dan menamakan borang. Di tempat lain dalam JavaScript, anda boleh merujuk borang ini dengan nama myform . Nama yang anda berikan adalah terserah kepada anda, tetapi ia harus mematuhi peraturan penamaan pemboleh ubah / fungsi standard JavaScript (tanpa spasi, tidak ada watak pelik kecuali garis bawah, dll.).
  • TINDAKAN = "" menentukan bagaimana anda mahu penyemak imbas mengendalikan borang apabila diserahkan ke program CGI yang berjalan di pelayan. Oleh kerana contoh ini tidak dirancang untuk menghantar apa-apa, URL untuk program CGI dihilangkan.
  • KAEDAH = "GET" mendefinisikan kaedah data dihantar ke pelayan semasa borang dihantar. Dalam kes ini, atribut adalah bengkak kerana borang contoh tidak menghantar apa-apa.
  • JENIS INPUT = "teks" mentakrifkan objek kotak teks. Ini adalah penanda HTML standard.
  • JENIS INPUT = "butang" mentakrifkan objek butang. Ini adalah markup HTML standard kecuali pengendali onClick.
  • onClick = "testResults (this.form)" adalah pengendali acara - ia mengendalikan acara, dalam hal ini mengklik butang. Apabila butang diklik, JavaScript melaksanakan ungkapan dalam tanda kutip. Ungkapan itu mengatakan untuk memanggil testResults berfungsi di tempat lain di halaman, dan menyampaikan kepadanya objek bentuk semasa.

Mendapatkan nilai dari objek bentuk

Mari bereksperimen dengan mendapatkan nilai dari objek bentuk. Muat halaman, kemudian taipkan sesuatu ke dalam kotak teks. Klik butang, dan apa yang anda taip ditunjukkan di kotak amaran.

Penyenaraian 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Inilah cara skrip berfungsi. JavaScript memanggil fungsi testResults apabila anda mengklik butang dalam bentuk. Fungsi testResults dilewatkan objek bentuk menggunakan sintaks this.form (kata kunci ini merujuk kepada kawalan butang; bentuk adalah milik kawalan butang dan mewakili objek bentuk). Saya telah memberikan bentuk objek nama bentuk dalam fungsi testResult, tetapi apa-apa yang boleh nama anda suka.

Fungsi testResults mudah - ia hanya menyalin kandungan kotak teks ke pemboleh ubah bernama TestVar. Perhatikan bagaimana kandungan kotak teks dirujuk. Saya menentukan objek bentuk yang ingin saya gunakan (disebut form ), objek dalam bentuk yang saya mahukan (dipanggil inputbox ), dan sifat objek yang saya mahukan (nilai nilai ).

Lagi dari JavaWorld

Mahukan lebih banyak tutorial dan berita pengaturcaraan? Dapatkan buletin JavaWorld Enterprise Java ke peti masuk anda.

Menetapkan nilai dalam objek bentuk

The value property of the inputbox, shown in the above example, is both readable and writable. That is, you can read whatever is typed into the box, and you can write data back into it. The process of setting the value in a form object is just the reverse of reading it. Here's a short example to demonstrate setting a value in a form text box. The process is similar to the previous example, except this time there are two buttons. Click the "Read" button and the script reads what you typed into the text box. Click the "Write" button and the script writes a particularly lurid phrase into the text box.

Listing 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • When you click the "Read" button, JavaScript calls the readText function, which reads and displays the value you entered into the text box.
  • When you click the "Write" button, JavaScript calls the writeText function, which writes "Have a nice day!" in the text box.

Reading other form object values

The text box is perhaps the most common form object you'll read (or write) using JavaScript. However, you can use JavaScript to read and write values from most other objects (note that JavaScript cannot currently be used to read or write data using the password text box). In addition to text boxes, JavaScript can be used with:

  • Hidden text box (TYPE="hidden").
  • Radio button (TYPE="radio")
  • Check box (TYPE="checkbox")
  • Text area ()
  • Lists ()

Using Hidden Text Boxes

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Kawasan teks digunakan untuk kemasukan teks berbilang baris. Ukuran lalai kotak teks adalah 1 baris dengan 20 aksara. Anda boleh mengubah ukuran menggunakan atribut COLS dan ROWS. Berikut adalah contoh khas kawasan teks dengan kotak teks selebar 40 aksara dengan 7 baris:

Anda boleh menggunakan JavaScript untuk membaca kandungan kotak kawasan teks. Ini dilakukan dengan nilai nilai. Berikut adalah contoh: