Cara menggunakan dinonaktifkan di javascript

Trik menerapkan form input dinamis untuk memudahkan user dalam menginput data untuk aplikasi office. Namun kemudahan itu ternyata menjadi komplikasi yang tak terduga. Berulang kali form insert gagal berkali-kali, gagal berkali-kali mengirim data. Terakhir dengan menggunakan fungsi print_r($_POST);

Bagi yang masih asing dengan print_r($_POST); . Sederhananya, setelah kita mendesain input form, fungsi ini bisa digunakan untuk mengecek - apa saja yang dikirim dari input form yang kita desain

Saya bingung karena ternyata errornya terletak pada form input dinamis yang susah payah dihilangkan - dan dimodifikasi sesuai kebutuhan aplikasi. Namun anehnya, file induk dari formulir input dinamis ini berhasil memasukkan data ke database tanpa kesalahan

Setelah dicek lagi, ternyata untuk alasan tampilan saya sudah menambahkan atribut "disabled" pada form input dinamis yang sudah tersedia, dan ternyata itu masalahnya.

Diterjemahkan dari situs, berikut penjelasannya. Saat atribut ini diterapkan, atribut ini akan menonaktifkan kontrol untuk bidang masukan yang relevan.

Jika diterapkan, atribut ini akan memberikan efek berikut ke elemen yang diterapkan atribut ini

1. Bidang yang dilampirkan atribut ini tidak dapat menerima fokus
2. Kolom akan dilewati di navigasi tab
3. Atribut yang dinonaktifkan tidak boleh "berhasil". Meskipun kontrol yang berhasil adalah syarat "legal"< /a>untuk pengiriman formulir. Inilah alasannyamengapakontroldinonaktifkan tidak dikirim saat formulir dikirimkan. kontrol yang sukses (successful control) merupakan syarat “sah” untuk pengiriman formulir. Inilah alasan mengapa kontrol disabled tidak ikut terikirim saat formulir di-submit.

Elemen yang mendukung atribut yang dinonaktifkan ini adalah. , , , , , dan

Solusi Alternatif

Beberapa alternatif solusi yang bisa kita ambil untuk mengantisipasi resiko tidak terkirimnya elemen yang memiliki atribut dinonaktifkan

1. Hapus dinonaktifkan dan pertimbangkan untuk menggunakan atribut readonly. Dengan menggunakan atribut readonly, kita diperbolehkan mengirimkan data pada field tersebut. Karakteristik hanya baca - dapat menerima fokus tetapi nilainya tidak dapat diubah oleh pengguna. Itu tidak dilewati dalam navigasi tab, dan nilainya dapat diposting seperti bidang lainnya. Namun readonly ini hanya dapat diterapkan

   Karena Anda menonaktifkannya sejak awal, cara untuk mengaktifkannya adalah dengan menyetel properti disabled miliknya sebagai false

   Untuk mengubah properti disabled_ di Javascript, Anda menggunakan ini

   var btn = document.getElementById("Button");
   btn.disabled = false;
   

   Dan jelas untuk menonaktifkannya lagi, Anda akan menggunakan true sebagai gantinya

   Karena Anda juga menandai pertanyaan dengan jQuery, Anda dapat menggunakan metode .prop. Sesuatu seperti

   var btn = $("#Button");
   btn.prop("disabled", true);   // Or `false`
   

   _

   Ini ada di versi jQuery yang lebih baru. Cara lama untuk melakukan ini adalah menambahkan atau menghapus atribut seperti ini

   var btn = $("#Button");
   btn.attr("disabled", "disabled");
   // or
   btn.removeAttr("disabled");
   

   Kehadiran properti disabled_ menonaktifkan elemen, sehingga Anda tidak dapat menetapkan nilainya sebagai "false". Bahkan yang berikut ini harus menonaktifkan elemen tersebut

   Anda tentunya sudah mengenal tag beserta fungsinya pada artikel sebelumnya. Tag ini digunakan untuk membuat elemen – elemen yang digunakan untuk meminta informasi dari user. Tag ini secara umum dapat berbentuk kotak teks, tombol, kotak pilihan dan yang lainnya.

   Pada tutorial sebelumnya kita sudah membahas tentang penggunaan input tag pada HTML dan nilai input type nya seperti text, password, dan submit. Nah, pada tutorial kali ini kita akan membahas penggunaan atribut readonly, disabled dan target pada form HTML. Ketiga atribut tersebut tentunya memiliki fungsi yang berbeda dalam implementasinya. Untuk lebih jelasnya mengenai ketiga atribut tersebut, mari simak tutorial berikut ini

   Atribut readonly dan Disabled

   Secara umum, atribut readonly dan disabled digunakan untuk membuat kotak teks tidak dapat digunakan. Untuk keperluan tertentu, anda tentu membutuhkan kedua atribut ini agar text box tidak bisa diubah – ubah, misalnya untuk text box yang sudah memiliki nilai default. Berikut penjelasan dari kedua atribut tersebut

   1. Atribut hanya baca

   Atribut readonly digunakan untuk menentukkan bahwa elemen hanya dapat dibaca (read only) tanpa bisa diedit. Berikut contoh penulisan dan penggunaan atribut readonly pada form HTML :

   <!DOCTYPE html>
   <html>
    <head>
     <title>Penggunaan Atribut Readonly pada Form HTML</title>
    </head>
    <body>
     <form action="proses_input.php" method="get">
      Kode Barang : 
       <input type="text" name="kode" value ="BRG01" readonly> <br><br>
      Jumlah Barang : 
       <input type="text" name="jumlah"><br><br>
      Harga per satuan : 
       <input type="text" name="harga"><br><br>
       <input type="submit" value="Submit">
     </form>
    </body>
   </html>

   Setelah kode diatas dijalankan pada browser maka akan muncul seperti gambar dibawah ini

   
   

   Pada kolom Item Code tidak bisa menginput data karena kolom sudah diberi atribut readonly, jadi kolom hanya bisa dibaca dan tidak bisa diedit atau diubah

   2. Atribut nonaktif

   Atribut yang dinonaktifkan digunakan untuk menonaktifkan elemen (contoh elemen input). Seperti pada atribut readonly, atribut ini tidak perlu ditulis nilainya, cukup tulis dinonaktifkan. Berikut adalah contoh penulisan dan penggunaan atribut disabled pada form HTML

   <!DOCTYPE html>
   <html>
    <head>
     <title>Penggunaan Atribut Disabled pada Form HTML</title>
    </head>
    <body> 
     <form action="proses_input.php" method="get">
      Kode Barang : 
       <input type="text" name="kode" value ="BRG01" disabled> <br><br>
      Jumlah Barang : 
       <input type="text" name="jumlah"><br><br>
      Harga per satuan : 
       <input type="text" name="harga"><br><br>
       <input type="submit" value="Submit">
     </form>
    </body>
   </html>

   _

   Setelah kode diatas dijalankan pada browser maka akan muncul seperti gambar dibawah ini

   
   

   Perbedaan antara Atribut Readonly dan Disabled

   Dari dua contoh kode di atas, Anda bisa melihat perbedaan penggunaan atribut readonly dan disabled. Atribut readonly membuat text box tetap seperti biasa sedangkan atribut disabled membuat text box menjadi abu-abu. Walaupun begitu, ada perbedaan yang perlu anda ketahui yaitu pada saat anda mengklik tombol Submit, nilai pada atribut readonly tetap terkirim ke server sedangkan atribut disabled tidak.

   
   

   Atribut readonly. nilai Kode Item dikirim ke server

   
   

   Atribut dinonaktifkan. Nilai Kode Item tidak dikirim ke server

   3. Atribut Sasaran

   Atribut target digunakan untuk menentukan lokasi respons yang diterima setelah formulir berhasil dikirim. Nilai atribut target adalah _blank, _self, _parent, dan _top. Penggunaan atribut target ini sudah saya jelaskan pada artikel cara membuat link di HTML

   Berikut adalah contoh penulisan kode dan penggunaan atribut target pada form HTML

   <!DOCTYPE html>
   <html>
    <head>
     <title>Penggunaan Atribut Target di HTML Forms</title>
    </head>
    <body>
     <form action="proses_input.php" method="get" target="_blank">
      Nama Depan: <input type="text" name="ndepan"><br>
      Nama Belakang: <input type="text" name="nbelakang"><br>
       <input type="submit" value="Submit"> 
     </form>
    </body>
   </html>

   Setelah kode diatas dijalankan pada browser maka akan muncul seperti gambar dibawah ini

   
   

   Saat Anda mengklik tombol Kirim, hasil tanggapan yang diterima akan ditampilkan di tab baru

   Sekian materi tentang penggunaan atribut readonly, target dan disable pada form HTML. Kunjungi terus blog ini karena saya akan selalu update materi belajar HTML untuk pemula
   

   Bagian 28. Masukkan Jenis Kata Sandi dan Kirim elemen

   Bagian 30. Kotak centang Jenis Input, Jenis Radio Dan Atribut Dicentang

   Editor. Muhammad Zakaria

   Download berbagai jenis aplikasi terbaru mulai dari windows, aplikasi android, driver dan sistem operasi gratis hanya di Nesabamedia. com