Hentikan kolom masukan dalam formulir agar tidak dikirim

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.

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();
});

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.

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

<input type="checkbox" checked="" id="class_box_2" value="2">

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" />

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;

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.

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');

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 ...

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.

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.

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 :)