Input formulir yang dinonaktifkan tidak muncul dalam permintaan


340

Saya memiliki beberapa input yang dinonaktifkan dalam formulir dan saya ingin mengirimkannya ke server, tetapi Chrome mengecualikannya dari permintaan.

Apakah ada solusi untuk ini tanpa menambahkan bidang tersembunyi?

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

</form>


2
@Liam itu adalah upaya yang sangat aneh untuk menutup untuk pertanyaan yang kurang dihadiri dengan jawaban kualitas yang lebih rendah.
hazzik

Sebuah tua kurang dihadiri pertanyaan. Secara teknis pertanyaan ini harus ditutup sebagai duplikat ketika ditanya. Saya telah menandai itu dengan mod untuk potensi penggabungan, mungkin atau mungkin tidak terjadi. Terserah mereka.
Liam

@Liam sebenarnya pertanyaannya berbeda bahkan beberapa jawaban terlihat serupa. Saya bertanya tentang cara membuat bidang "dinonaktifkan" untuk mengirim nilai, dan pertanyaan lain bertanya tentang "alasan"
hazzik

Hanya sampai di sini setelah saya menghabiskan beberapa jam mencoba menyelesaikannya. Ehhh ..
matcheek

Jawaban:


730

Elemen dengan disabledatribut tidak dikirimkan atau Anda dapat mengatakan nilainya tidak diposting (lihat poin kedua di bawah Langkah 3 dalam spesifikasi HTML 5 untuk membangun kumpulan data formulir ).

Yaitu,

<input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

FYI, per 17.12.1 dalam spesifikasi HTML 4:

  1. Kontrol yang dinonaktifkan tidak menerima fokus.
  2. Kontrol yang dinonaktifkan dilewati dalam navigasi tab.
  3. Kontrol yang dinonaktifkan tidak dapat diposting dengan sukses.

Anda dapat menggunakan readonlyatribut dalam kasus Anda, dengan melakukan ini Anda akan dapat memposting data bidang Anda.

Yaitu,

<input type="textbox" name="Percentage" value="100" readonly="readonly" />

FYI, per 17.12.2 dalam spesifikasi HTML 4:

  1. Elemen baca-saja menerima fokus tetapi tidak dapat dimodifikasi oleh pengguna.
  2. Elemen baca-saja disertakan dalam navigasi tab.
  3. Elemen baca-saja berhasil diposting.

8
Untuk menjawab pertanyaan saya sendiri: Tidak, readony hanya berfungsi untuk <input /> form control dari type = 'text' dan type = 'password' dan untuk <textarea />. Apa yang dilakukan readonly adalah mencegah pengguna mengubah nilai kontrol. Mencegah pengguna mengubah nilai kotak centang (atau input jenis radio) tidak masuk akal ...
Muleskinner

3
@ danielson317 Anda dapat membuat elemen pilih "dinonaktifkan" tetapi juga menambahkan input tersembunyi lainnya dengan nilai yang sama.
AlphaMale

1
@AlphaMale Tapi elemen tersembunyi tidak dapat memiliki nama yang sama (atau tidak seharusnya). Saya berhasil melewati ini dengan membiarkan elemen menjadi kosong dan hanya mengisi nilai asli dari negara bentuk yang disimpan. Hanya perlu dicatat bahwa hanya baca tidak berfungsi pada item formulir pilih.
danielson317

2
Apakah Anda pernah menemukan sesuatu dan berpikir, "Apa yang membuat mereka berpikir ini akan jelas?" Jika saya mengalami masalah dengan memasukkan bidang input yang mungkin atau mungkin tidak dinonaktifkan, itu berarti saya tidak ingin pengguna mengubahnya, bukan karena itu harus bertindak secara efektif seolah-olah tidak pernah dinyatakan sama sekali!
Nick Bedford

1
Terima kasih ini sangat membantu dan jawabannya serta responsnya.
user1449249

25

Menggunakan Jquery dan mengirim data dengan ajax, Anda dapat memecahkan masalah Anda:

<script>

$('#form_id').submit(function() {
    $("#input_disabled_id").prop('disabled', false);

    //Rest of code
    })
</script>

Yang memberi +1 tentang solusi ini adalah Anda masih dapat menggunakan ikon penonaktifan merah ketika pengguna menggunakan input =)
JMASTER B

5
@ArielMaduro Anda dapat melakukannya dengan csscursor:not-allowed;
sricks

@ batu bata oh benarkah ?? Bisakah Anda memberikan contoh?
JMASTER B

lebih menyukai solusi ini daripada hanya menggunakan baca saja, karena bidang yang dinonaktifkan tidak dapat menerima fokus
Andreas

9

Untuk memposting nilai dari input yang dinonaktifkan selain input yang diaktifkan, Anda bisa mengaktifkan kembali semua input formulir saat dikirimkan.

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Jika Anda lebih suka jQuery:

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

Untuk ASP.NET MVC C # Razor, Anda menambahkan submit handler seperti ini:

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}

ada satu kutipan yang hilang dari opsi jquery
cagcak

8

Jika Anda benar-benar harus menonaktifkan bidang dan meneruskan data, Anda bisa menggunakan javascript untuk memasukkan data yang sama ke bidang tersembunyi (atau cukup setel bidang tersembunyi juga). Ini akan memungkinkan Anda untuk menonaktifkannya tetapi masih memposting data meskipun Anda akan memposting ke halaman lain.


1
Solusi ini adalah apa yang telah saya gunakan juga - tetapi seperti yang baru saya pelajari - properti readonly adalah solusi yang jauh lebih baik
Muleskinner

4

Saya memperbarui jawaban ini karena sangat berguna. Cukup tambahkan readonly ke input.

Jadi formulirnya adalah:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>

4

Semantik ini terasa seperti perilaku yang benar

Saya akan bertanya pada diri sendiri, " Mengapa saya harus menyerahkan nilai ini? "

Jika Anda memiliki input yang dinonaktifkan pada formulir, maka mungkin Anda tidak ingin pengguna mengubah nilai secara langsung

Nilai apa pun yang ditampilkan dalam input yang dinonaktifkan harus berupa

  1. output dari nilai di server yang menghasilkan formulir, atau
  2. jika formulir dinamis, dapat dihitung dari input lain pada formulir

Dengan asumsi bahwa server memproses formulir adalah sama dengan server yang menyajikannya, semua informasi untuk mereproduksi nilai input yang dinonaktifkan harus tersedia saat pemrosesan

Bahkan, untuk menjaga integritas data - bahkan jika nilai input yang dinonaktifkan dikirim ke server pemrosesan, Anda harus benar-benar memvalidasinya. Validasi ini akan membutuhkan tingkat informasi yang sama seperti Anda harus mereproduksi nilai!

Saya hampir berpendapat bahwa input read-only juga tidak boleh dikirim dalam permintaan

Senang dikoreksi, tetapi semua kasus penggunaan yang dapat saya pikirkan di mana input baca-saja / dinonaktifkan harus diserahkan benar-benar hanya masalah penataan yang menyamar


1
jangan lupa bahwa nilainya dapat dimanipulasi dengan alat pengembang chrome secara langsung
jimjim

2

Saya menemukan ini bekerja lebih mudah. baca saja kolom input, lalu gaya sehingga pengguna akhir tahu itu hanya baca. input yang ditempatkan di sini (dari AJAX misalnya) masih dapat mengirimkan, tanpa kode tambahan.

<input readonly style="color: Grey; opacity: 1; ">

-6

Anda benar-benar dapat menghindari penonaktifan, itu menyakitkan karena format formulir html tidak akan mengirim apa pun yang terkait dengannya <p> atau label lain.

Jadi, Anda bisa menempatkan secara teratur

<input text tag just before you have `/>

Tambahkan ini readonly="readonly"

Itu tidak akan menonaktifkan teks Anda tetapi tidak akan berubah oleh pengguna sehingga berfungsi seperti <p>dan akan mengirimkan nilai melalui formulir. Hapus saja batas jika Anda ingin membuatnya lebih seperti <p>tag

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.