Hentikan kolom masukan dalam formulir agar tidak dikirim

114

Saya sedang menulis beberapa javascript (a greasemonkey / userscript) yang akan memasukkan beberapa bidang masukan ke dalam formulir di situs web.

Masalahnya, saya tidak ingin bidang masukan itu memengaruhi formulir dengan cara apa pun, saya tidak ingin mereka dikirim saat formulir dikirim, saya hanya ingin javascript saya memiliki akses ke nilainya.

Adakah cara agar saya dapat menambahkan beberapa bidang masukan di tengah formulir dan tidak mengirimkannya saat formulir dikirimkan?

Jelas hal yang ideal adalah agar bidang masukan tidak berada dalam elemen formulir, tetapi saya ingin tata letak halaman yang saya hasilkan memiliki bidang masukan yang disisipkan muncul di antara elemen formulir asli.

Biji pohon ek
sumber
2
apa masalahnya jika mereka dikirim? Anda dapat memilih bidang mana yang akan diproses dalam bahasa sisi server.
Sarfraz
6
Saya tidak percaya elemen formulir yang tidak dinamai muncul saat formulir dikirim - jika Anda dapat menulis JS untuk merujuknya dengan ID, Anda dapat membiarkan namanya kosong, secara efektif mencegahnya untuk dikirim.
gddc
2
biarkan kolom atribut nama kosong
batalkan pendaftaran
@Sarfraz Ahmed: Saya sedang menulis skrip greasemonkey, jadi saya tidak memiliki kendali atas situs web.
Acorn
11
Menurut w3: Untuk dimasukkan dalam pengiriman formulir. sebuah bidang (elemen formulir) harus ditentukan di dalam elemen formulir, dan harus memiliki atribut nama. Elemen tanpa nama, atau tidak terkandung dalam formulir, tidak dikirimkan ke server.
kennebec

Jawaban:

159

Anda dapat memasukkan kolom masukan tanpa atribut "nama":

<input type="text" id="in-between" />

Atau Anda bisa langsung menghapusnya setelah formulir dikirimkan (dalam jQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});
Gal
sumber
7
Menghilangkan nama mencegahnya dikirim? Keren, saya tidak tahu itu. Apakah ini berfungsi di semua browser? Apakah ini bagian dari standar, atau apakah ini kekhasan implementasi?
BlairHippo
2
@Acorn Saya tidak sepenuhnya yakin, tapi itu layak dibaca. Pada dasarnya jika Anda menghilangkan nilai atribut "name", Anda tidak dapat mengakses nilai tersebut melalui metode apa pun ... jadi bisa jadi nilai tersebut dibuang begitu saja oleh browser. Jika keamanan sangat penting bagi Anda, pilih opsi jquery / javascript (perhatikan bahwa kolom AKAN dikirimkan saat javascript dengan mudah dinonaktifkan - jadi jangan mengandalkan mekanisme keamanan apa pun padanya).
Gal
17
Saya menguji meninggalkan atribut name dengan chrome, firefox, safari dan tampaknya bidang formulir dikirimkan ke server dengan string kosong untuk nama tersebut. Saya memeriksa data posting menggunakan WebScarab dan menemukan bahwa data sedang dikirim. Untuk saat ini saya rasa saya harus menonaktifkan field untuk mencegahnya dikirimkan.
kldavis4
1
@ kldavis4 - tampaknya baik stripe (stripe.js) dan Braintree (braintree.js) [link] braintreepayments.com/docs/python/guide/getting_paid menggunakan konsep atribut "meninggalkan nama" untuk menghentikan data mengenai server sehingga mengurangi kebutuhan akan kepatuhan "PCI" ... jika Anda mengatakan bahwa "data" sedang dikirim, apakah itu salah?
Rahul Dighe
57

Hal termudah untuk dilakukan adalah memasukkan elemen dengan disabledatribut.

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

Dengan cara ini Anda masih dapat mengaksesnya sebagai anak-anak dalam bentuk.

Bidang yang dinonaktifkan memiliki sisi negatif bahwa pengguna tidak dapat berinteraksi dengan mereka sama sekali- jadi jika Anda memiliki disabledbidang teks, pengguna tidak dapat memilih teks tersebut. Jika Anda memiliki disabledkotak centang, pengguna tidak dapat mengubah statusnya.

Anda juga dapat menulis beberapa javascript untuk diaktifkan pada pengiriman formulir untuk menghapus bidang yang tidak ingin Anda kirimkan.

Johrn
sumber
Idenya adalah untuk bidang yang saya sisipkan agar dapat digunakan sehingga pengguna dapat mengubah kotak centang dll. Dan kemudian mengirimkannya ke javascript saya.
Acorn
3
Dinonaktifkan masih dapat berfungsi, jika Anda hanya menonaktifkan kolom pengiriman atau berdasarkan kotak centang yang dipilih. Dengan begitu, Anda tidak hanya membuang nameproperti yang mungkin ingin Anda simpan jika ingin digunakan nanti.
JMTyler
Ini bagus ketika Anda harus mengirimkan formulir menggunakan AJAX dan tidak ingin menghapus masukan Anda dari formulir atau menghapus nameatributnya.
Nolonar
15

Coba sederhana untuk menghapus atribut nama dari elemen masukan.
Jadi harus terlihat seperti itu

<input type="checkbox" checked="" id="class_box_2" value="2">
Lesha Pipiev
sumber
Ini harus menjadi jawabannya :))
Máxima Alekz
1
Ini berfungsi untuk kotak centang. Namun perlu diperhatikan bahwa ini akan menghentikan pembatalan pilihan otomatis tombol radio lain saat digunakan dengan tombol radio.
anre
10

Saya hanya ingin menambahkan opsi tambahan: Dalam masukan Anda tambahkan tag formulir dan tentukan nama formulir yang tidak ada di halaman Anda:

<input form="fakeForm" type="text" readonly value="random value" />
farvgnugn.dll
sumber
1
sementara ini mungkin berhasil (belum diuji), kecuali Anda benar-benar menentukan di fakeFormtempat lain (tidak perlu mengirimkan) ini menghasilkan HTML yang tidak valid.
Brian H.
1
Jika Anda tidak ingin menambahkan javascript dan Anda membutuhkan input di dalam formulir dengan interaksi pengguna. Sejauh ini, ini adalah solusi paling sederhana dari sudut pandang saya.
yannisalexiou
1
CATATAN: Solusi ini tidak berfungsi dengan IE . Periksa di sini
Harvey
@Harvey Astaga! Terimakasih atas peringatannya!
Joshua Pinter
9

Anda dapat menulis pengendali kejadian onsubmityang menghapus nameatribut dari semua bidang masukan yang Anda tidak ingin disertakan dalam pengiriman formulir.

Berikut contoh cepat yang belum teruji:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;
Jacob Relkin
sumber
2

Saya tahu posting ini kuno, tapi saya akan membalasnya. Cara termudah / terbaik yang saya temukan hanyalah dengan mengosongkan nama.

Letakkan ini sebelum pengiriman Anda:

document.getElementById("TheInputsIdHere").name = "";

Secara keseluruhan, fungsi pengiriman Anda mungkin terlihat seperti ini:

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

Ini akan tetap mengirimkan formulir dengan semua bidang Anda yang lain, tetapi tidak akan mengirimkan formulir tanpa nama.

Akan
sumber
Sederhana dan lugas. Saya suka itu!
pbarney
2

Tambahkan disabled = "disabled" pada masukan dan saat jquery menghapus atribut yang dinonaktifkan saat Anda ingin mengirimkannya menggunakan .removeAttr ('disabled')

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

jquery:

$("input[name='test']").removeAttr('disabled');

Pikka pikka
sumber
2

Semua jawaban di atas sudah menjelaskan segalanya tentang (tidak) penamaan kontrol formulir atau menghapusnya secara terprogram sebelum benar-benar mengirimkan formulir Anda.

Meskipun, dalam penelitian saya, saya menemukan satu solusi lain yang belum pernah saya lihat disebutkan dalam posting ini:
Jika Anda merangkum kontrol formulir yang Anda inginkan untuk diproses / tidak dikirim, di dalam <form>tag lain tanpa methodatribut atau path(dan jelas tidak ada kontrol jenis kirim seperti tombol atau mengirimkan masukan bersarang di dalamnya), maka mengirimkan formulir induk tidak akan menyertakan kontrol formulir yang dienkapsulasi tersebut.

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

Nilai kontrol [name = "notSent"] tidak akan diproses atau dikirim ke titik akhir POST server, tetapi nilai dari [name = "sent"] akan.

Solusi ini mungkin anekdotik tetapi saya masih membiarkannya untuk anak cucu ...

Delfshkrimm
sumber
Pengamatan yang menarik tetapi sudahkah Anda menguji ini di berbagai browser? Saya ingin tahu apakah itu berdasarkan desain, spesifikasi, atau hanya kekhasan perilaku browser. Apakah ini akan menjadi metode yang dapat diandalkan di masa depan saat browser berubah?
scipilot
1

Tangani pengiriman formulir dalam fungsi melalui onSubmit () dan lakukan sesuatu seperti di bawah ini untuk menghapus elemen formulir: Gunakan getElementById()DOM, lalu gunakan[object].parentNode.removeChild([object])

misalkan bidang Anda yang dipermasalahkan memiliki atribut id kode "my_removable_field":

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

Ini akan memberi Anda apa yang Anda cari.

Pembawa cincin
sumber
0

Apakah Anda bahkan membutuhkannya untuk menjadi elemen masukan sejak awal? Anda dapat menggunakan Javascript untuk secara dinamis membuat div atau paragraf atau daftar item atau apa pun yang berisi informasi yang ingin Anda sajikan.

Tetapi jika elemen interaktif itu penting dan merepotkan untuk menempatkan elemen-elemen tersebut di luar <form>blok, maka elemen-elemen tersebut harus dihapus dari formulir ketika halaman dikirimkan.

BlairHippo
sumber
Ya, saya membutuhkannya untuk menjadi elemen masukan karena saya mencoba mendapatkan masukan pengguna.
Acorn
0
$('#serialize').click(function () {
  $('#out').text(
    $('form').serialize()
  );
});

$('#exclude').change(function () {
  if ($(this).is(':checked')) {
    $('[name=age]').attr('form', 'fake-form-id');
  } else {
    $('[name=age]').removeAttr('form');    
  }
  
  $('#serialize').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/">
  <input type="text" value="John" name="name">
  <input type="number" value="100" name="age">
</form>

<input type="button" value="serialize" id="serialize">
<label for="exclude">  
  <input type="checkbox" value="exclude age" id="exclude">
  exlude age
</label>

<pre id="out"></pre>
Denis Lukyanov
sumber
Sayangnya atribut formulir tidak berfungsi di IE / Edge. caniuse.com/#search=form%20attribute
George Helyar
0

Anda perlu menambahkan onsubmit di formulir Anda:

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

Dan skripnya akan seperti ini:

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

Ini bekerja untuk saya setiap saat :)

Vasilakakis Anastasios
sumber