Bagaimana cara menghindari pengiriman kolom input yang disembunyikan oleh display: none ke server?

89

Bayangkan Anda memiliki formulir di mana Anda mengalihkan visibilitas beberapa bidang. Dan jika field tidak ditampilkan, Anda tidak ingin nilainya diminta.

Bagaimana Anda menangani situasi ini?

html http field glaz666.dll
sumber

Jawaban:

129

Menyetel elemen formulir ke nonaktif akan menghentikannya menuju server, misalnya:

<input disabled="disabled" type="text" name="test"/>

Dalam javascript itu akan berarti seperti ini:

var inputs = document.getElementsByTagName('input');
for(var i = 0;i < inputs.length; i++) {
    if(inputs[i].style.display == 'none') {
        inputs[i].disabled = true;
    }
}
document.forms[0].submit();

Di jQuery:

   $('form > input:hidden').attr("disabled",true);
   $('form').submit();
karim79.dll
sumber
16
Dengan pemilih semu jQuery :inputalih-alih inputAnda juga dapat dengan mudah menonaktifkan semua selectdan textareaelemen
Daniel Rikowski
8
Di jQuery> = 1.6, alih-alih attr("disabled", true)Anda harus menggunakan prop("disabled", true) api.jquery.com/prop
yorch
2
@ dominicbri7 - Mulai jQuery 1.6, disarankan menggunakan .prop()alih-alih .attr()untuk mendapatkan setelan AND, baik properti yang dinonaktifkan maupun yang dicentang. Memeriksa dan atau menyetel menggunakan .attr()akan dalam beberapa kasus memberikan hasil yang tidak diinginkan. Silakan baca dokumentasi jQuery sebelum mengomentari apa yang dirujuk oleh yorch.
zgr024
@ zgr024 baik-baik saja, komentar saya dihapus
dominicbri7
2
@DanielRikowski, Ada apa dengan jQuery ini di sini jQuery ada omong kosong. Mari kita bicara Vanilla JS.
Pacerier
13

Anda dapat menggunakan javascript untuk mengatur atribut yang dinonaktifkan. Acara klik tombol 'kirim' mungkin adalah tempat terbaik untuk melakukan ini.

Namun, saya akan menyarankan agar tidak melakukan ini sama sekali. Jika memungkinkan, Anda harus memfilter kueri Anda di server. Ini akan lebih bisa diandalkan.

Benediktus Cohen
sumber
7

Jika Anda ingin menonaktifkan semua elemen atau elemen tertentu dalam elemen induk tersembunyi, Anda dapat menggunakan

$("div").filter(":hidden").children("input[type='text']").attr("disabled", "disabled");

Contoh ini http://jsfiddle.net/gKsTS/ menonaktifkan semua kotak teks di dalam div tersembunyi

macio.Jun
sumber
Ini adalah solusi yang sangat baik karena melakukan iterasi melalui div tersembunyi dan menonaktifkan semua. seharusnya mendapatkan lebih banyak +1
yeppe
6

Bagaimana dengan:

$('#divID').children(":input").prop("disabled", true); // disable

dan

$('#divID').children(":input").prop("disabled", false); // enable

Untuk mengalihkan semua input anak (memilih, checkbox, input, textareas, dll) di dalam div tersembunyi.

Antonio Max
sumber
Ini adalah solusi yang bagus jika Anda ingin mengambil semua masukan. kerja bagus
doz87
3

Satu solusi yang sangat sederhana (tetapi tidak selalu yang paling nyaman) adalah dengan menghapus atribut "name" - standar mengharuskan browser tidak mengirimkan nilai yang tidak disebutkan namanya, dan semua browser yang saya tahu mematuhi aturan ini.

jsalvata.dll
sumber
4
Tidak disarankan karena jika Anda mengubah status melalui javascript Anda hampir tidak dapat mengatur ulang input tanpa menyimpan semua atribut nama. Lebih mudah untuk mengganti status nonaktif.
Simon
1

Saya akan menghapus nilai dari input atau melepaskan objek input dari DOM sehingga tidak ada untuk diposting di tempat pertama.

JMP
sumber