Nilai input yang dinonaktifkan tidak akan dikirimkan

Jawaban:

189

Ya, semua browser tidak boleh mengirimkan input yang dinonaktifkan, karena hanya baca.

Informasi lebih lanjut (bagian 17.12.1)

Definisi atribut

dinonaktifkan [CI] Ketika diatur untuk kontrol formulir, atribut Boolean ini menonaktifkan kontrol untuk input pengguna. Saat disetel, atribut yang dinonaktifkan memiliki efek berikut pada suatu elemen:

  • Kontrol yang dinonaktifkan tidak menerima fokus.
  • Kontrol yang dinonaktifkan dilewati dalam navigasi tab.
  • Kontrol yang dinonaktifkan tidak dapat berhasil.

Elemen-elemen berikut mendukung atribut yang dinonaktifkan: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, dan TEXTAREA.

Atribut ini diwarisi tetapi deklarasi lokal mengesampingkan nilai yang diwarisi.

Bagaimana elemen yang dinonaktifkan diberikan tergantung pada agen pengguna. Misalnya, beberapa agen pengguna "tidak berwarna" item menu yang dinonaktifkan, label tombol, dll.

Dalam contoh ini, elemen INPUT dinonaktifkan. Oleh karena itu, ia tidak dapat menerima input pengguna atau nilainya tidak akan disampaikan dengan formulir.

<INPUT disabled name="fred" value="stone">

Catatan. Satu-satunya cara untuk mengubah nilai atribut yang dinonaktifkan secara dinamis adalah melalui skrip.

Aziz
sumber
86
Penanganan masalah: tambahkan <input type="hidden">elemen dengan nama / nilai yang sama dengan input yang dinonaktifkan.
John Kugelman
info apa saja yang dilakukan browser dan mana yang tidak patuh?
Allisone
82
gunakan readonly = "readonly" sebagai gantinya :) lihat stackoverflow.com/questions/7357256/...
Adrien Be
1
@ Allisone: Firefox & Chrome tampaknya mematuhi ini (input yang dinonaktifkan TIDAK dikirimkan). Belum mencoba di browser lain.
Adrien Be
1
@ JohnKugelman mengapa nama yang sama? yang cacat tidak akan dikirim lagi .. semoga memberikan nama sebenarnya ke yang tersembunyi dan gunakan yang berbeda untuk yang cacat
Arth
286

disabled input tidak akan mengirimkan data.

Gunakan readonlyatribut:

<input type="text" readonly />

Sumber di sini

Fred K
sumber
@ FrankFang, Ok, tapi, ketika saya meneruskan data ke templat blade Laravel kolektif. Itu tidak akan berhasil. tidak bisa mengirim data seperti itu.
ssi-anik
@ ssi-anik readonlybekerja, pastikan Anda memberikan "nama" attr ke input.
BenNov
26

Anda dapat menggunakan tiga hal untuk meniru yang dinonaktifkan:

  1. HTML: readonlyatribut (sehingga nilai yang ada dalam input dapat digunakan pada pengiriman formulir. Juga pengguna tidak dapat mengubah nilai input)

  2. CSS: 'pointer-events':'none'(memblokir pengguna dari mengklik input)

  3. HTML: tabindex="-1"(memblokir pengguna untuk menavigasi ke input dari keyboard)

Novice_JS
sumber
22

Mereka tidak bisa dikirim, karena itu yang dikatakan dalam spesifikasi W3C .

17.13.2 Kontrol yang berhasil

Kontrol yang berhasil adalah "valid" untuk pengiriman. [menggunting]

  • Kontrol yang dinonaktifkan tidak dapat berhasil.

Dengan kata lain, spesifikasi mengatakan bahwa kontrol yang dinonaktifkan dianggap tidak valid dan tidak boleh diserahkan.

MiffTheFox
sumber
2

Disabledkontrol tidak dapat berhasil, dan kontrol yang berhasil adalah "valid" untuk pengiriman. Ini adalah alasan mengapa kontrol yang dinonaktifkan tidak mengirimkan formulir.

Juan de Parras
sumber
1

Ada dua atribut, yaitu readonlydan disabled, yang dapat membuat input semi-baca-saja. Tetapi ada perbedaan kecil di antara mereka.

<input type="text" readonly />
<input type="text" disabled />
  • The readonlyAtribut membuat teks masukan Anda dinonaktifkan, dan pengguna tidak dapat mengubahnya lagi.
  • disabledAtribut tidak hanya akan membuat teks input Anda dinonaktifkan (tidak dapat diubah) tetapi juga tidak dapat dikirimkan .

Pendekatan jQuery (1):

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

Pendekatan jQuery (2):

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

Pendekatan JavaScript:

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PS disableddan readonlymerupakan atribut html standar. propdiperkenalkan dengan jQuery 1.6.

Elyas Hadizadeh
sumber
0

kontrol pilih masih dapat diklik bahkan pada attrib hanya baca

jika Anda ingin tetap menonaktifkan kontrol tetapi Anda ingin nilainya diposting. Anda mungkin mempertimbangkan untuk membuat bidang tersembunyi. dengan nilai yang sama dengan kendali Anda.

lalu buat jquery, pada perubahan pilih

$('#your_select_id').change(function () {
    $('#your_hidden_selectid').val($('#your_select_id').val());
});
Johnine
sumber