Menyetel ulang formulir multi-tahap dengan jQuery


349

Saya memiliki formulir dengan tombol reset standar yang dikodekan sebagai berikut:

<input type="reset" class="button standard" value="Clear" />

Masalahnya adalah, bentuk kata adalah dari jenis multi-tahap, jadi jika pengguna mengisi tahap & kemudian kembali nanti, nilai-nilai 'ingat' untuk berbagai bidang tidak akan mengatur ulang ketika tombol Hapus diklik.

Saya berpikir bahwa melampirkan fungsi jQuery untuk mengulang semua bidang dan menghapusnya 'secara manual' akan melakukan trik. Saya sudah menggunakan jQuery dalam formulir, tetapi saya baru saja bangun dengan kecepatan & jadi saya tidak yakin bagaimana melakukannya, selain secara individual merujuk setiap bidang dengan ID, yang tampaknya tidak terlalu efisien.

TIA untuk bantuan apa pun.


1
@ da5id: Yang perlu diingat adalah bahwa saya diterima juga mengosongkan elemen tersembunyi! Anda mungkin tidak menginginkan ini, jadi tambahkan saja: disembunyikan ke not()jika form Anda memiliki input tersembunyi.
Paolo Bergantino

Terima kasih Paulo, poin yang sangat bagus yang akan saya ingat.
da5id

2
Bagi siapa pun yang mencari jawaban yang baik, berhati-hatilah. Jawaban yang diterima ada di jalur yang benar tetapi memiliki bug. Jawaban yang paling banyak dipilih sampai sekarang tidak mengerti pertanyaan itu. Banyak jawaban lain juga salah paham dan bingung atur ulang dengan kosong / jelas .

1
Hak Mystkine - Baik pertanyaan dan jawaban yang diterima saat ini, mengonfigurasikan kliring dengan mengatur ulang - saya pikir si penanya benar-benar mencari solusi pengaturan ulang bentuk multi-tahap, meskipun judul aslinya - saya telah memperbarui judulnya.
Yarin

hep hep, terlepas dari usia pertanyaan ini saya telah menambahkan jawaban baru yang sebenarnya me-reset bagian yang sewenang-wenang dari formulir ... stackoverflow.com/questions/680241/…
kritzikratzi

Jawaban:


502

diperbarui pada Maret 2012.

Jadi, dua tahun setelah saya awalnya menjawab pertanyaan ini saya kembali untuk melihat bahwa itu telah berubah menjadi kekacauan besar. Saya merasa sudah saatnya saya kembali ke sana dan membuat jawaban saya benar karena ini adalah + yang paling banyak diterima.

Sebagai catatan, jawaban Titi salah karena bukan apa yang diminta oleh pengirim aslinya - benar bahwa mungkin untuk mereset formulir menggunakan metode reset asli (), tetapi pertanyaan ini mencoba untuk menghapus formulir yang tidak diingat. nilai yang akan tetap dalam formulir jika Anda meresetnya dengan cara ini. Inilah sebabnya mengapa diperlukan reset "manual". Saya berasumsi kebanyakan orang akhirnya dalam pertanyaan ini dari pencarian Google dan benar-benar mencari metode reset (), tetapi tidak bekerja untuk kasus khusus yang dibicarakan OP.

Jawaban asli saya adalah ini:

// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');

Yang mungkin bekerja untuk banyak kasus, termasuk untuk OP, tetapi seperti yang ditunjukkan dalam komentar dan jawaban lain, akan menghapus elemen radio / kotak centang dari atribut nilai apa pun.

Jawaban yang lebih benar (tetapi tidak sempurna) adalah:

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

Menggunakan :text, :radio, dll penyeleksi sendiri dianggap praktik buruk oleh jQuery karena mereka akhirnya mengevaluasi ke *:textyang membuatnya memakan waktu lebih lama dari seharusnya. Saya lebih suka pendekatan daftar putih dan berharap saya telah menggunakannya dalam jawaban asli saya. Bagaimanapun, dengan menentukan inputbagian pemilih, ditambah cache elemen formulir, ini akan membuatnya menjadi jawaban yang berkinerja terbaik di sini.

Jawaban ini mungkin masih memiliki beberapa kelemahan jika standar orang untuk elemen terpilih bukan merupakan opsi yang memiliki nilai kosong, tetapi ini pasti sama generiknya dengan yang akan didapat dan ini perlu ditangani berdasarkan kasus per kasus .


2
Itu: input berguna ... sekarang saya tahu saya akan menggunakan. Terima kasih Paolo :) +1
alex

Sangat bagus, tepuk tangan, tetapi apakah ini akan menghapus nilai tombol saya juga? Tidak dapat menguji sampai nanti.
da5id

1
Pada titik ini saya pikir akan lebih baik untuk hanya daftar yang Anda DO ingin kosong, jadi daripada: masukan di baris pertama yang Anda lakukan ": teks,: pilih,: radio,: kotak centang"
Paolo Bergantino

3
Masalahnya di sini adalah bahwa .val('')me - reset semua nilai ''bahkan jika nilai-nilai ini digunakan dalam tombol radio dan kotak centang. Jadi ketika saya menjalankan kode di atas saya kehilangan informasi berharga dari formulir, bukan hanya apa yang diinput pengguna.
jeffery_the_wind

3
Tampaknya ada satu masalah kecil dengan solusi ini - input: email - ia mengembalikan kesalahan: Kesalahan: Kesalahan sintaksis, ekspresi yang tidak dikenal: pseudo: email yang tidak didukung: email
Spencer Mark

390

Dari http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

$('#myform')[0].reset();

pengaturan myinput.val('')mungkin tidak meniru "reset" 100% jika Anda memiliki input seperti ini:

<input name="percent" value="50"/>

Misalnya, memanggil myinput.val('')input dengan nilai default 50 akan mengaturnya ke string kosong, sedangkan panggilan myform.reset()akan mengatur ulang ke nilai awal 50.


4
terima kasih, ini adalah cara yang bagus untuk menghapus formulir yang berisi: input type = "file".
neoneye

27
Saya pikir 34 orang salah paham apa pertanyaannya di sini. Penanya tahu tentang mengatur ulang, formulir akan "mengatur ulang" ke nilai yang diingat oleh skripnya dan ia harus memaksa mereka dihapus.
Paolo Bergantino

48

Ada masalah besar dengan jawaban yang diterima Paolo. Mempertimbangkan:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

The .val('')garis juga akan menghapus semua value's ditugaskan untuk kotak centang dan tombol radio. Jadi jika (seperti saya) Anda melakukan sesuatu seperti ini:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

Menggunakan jawaban yang diterima akan mengubah input Anda menjadi:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

Ups - Saya menggunakan nilai itu!

Berikut adalah versi yang dimodifikasi yang akan menjaga nilai kotak centang dan radio Anda:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

1
Untuk beberapa alasan ini tidak berfungsi untuk saya pada selectelemen. Apa bisa anda perbaiki ini?
Pentium10

2
$ (': input,: pilih', '#myFormId'). removeAttr ('checked'). removeAttr ('selected'); harus bekerja
sakhunzai

ini jawaban yang benar. Jika Anda menggunakan jawaban yang diterima, formulir itu jelas setelah Anda mengirim. Namun, jika Anda ingin mengirimkan formulir lagi, tidak ada kotak centang atau data tombol radio Anda akan ditangkap karena atribut nilai Anda akan dihapus.
djblue2009

Saya telah memperbarui jawaban saya untuk mengatasi semua ini, Anda adalah sebagian besar benar selain dari kenyataan jQuery sangat melarang menggunakan :text, :password, dll penyeleksi sendiri tanpa menentukan inputbagian, jika tidak mengevaluasi ke *:textyang berjalan melalui setiap elemen dalam dokumen bukan hanya <input>tag denganinput:text
Paolo Bergantino

@ paolo-bergantino Kritik Anda salah. Contoh-contoh saya mencakup elemen-elemen untuk diperiksa menggunakan #myFormIdkonteks yang diteruskan sebagai argumen kedua untuk $()- yaitu $(':input', '#context')- ini identik dengan$('#context').filter(':input')
kekuatan

16

Plugin jQuery

Saya membuat plugin jQuery sehingga saya dapat menggunakannya dengan mudah di mana saja saya membutuhkannya:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

Jadi sekarang saya bisa menggunakannya dengan menelepon:

$('#my-form').clear();

1
Jawaban ini adalah IMO terbaik. Haruskah itu juga termasuk .prop("checked", false)? stackoverflow.com/questions/5874652/prop-vs-attr
Luke

14

Membersihkan formulir agak rumit dan tidak sesederhana kelihatannya.

Sarankan Anda menggunakan plugin formulir jQuery dan gunakan fungsinya clearForm atau resetForm . Itu menangani sebagian besar kasus sudut.


$ ('# form_id'). clearForm (); hanya apa yang saya butuhkan - terima kasih! "Mengosongkan elemen formulir. Metode ini mengosongkan semua input teks, input kata sandi, dan elemen textarea, mengosongkan pemilihan dalam setiap elemen pilih, dan menghapus centang semua input radio dan kotak centang." (resetForm, di sisi lain, "Mereset formulir ke keadaan semula dengan memanggil metode DOM asli elemen form.")
Tyler Rick

14

document.getElementById ('frm'). reset ()


11
jika Anda adalah penggemar jQuery, ini dapat ditulis ulang menjadi: $ ('frm') [0] .reset ()
dmitko

8
@dmitko Lihat saja poster nama pengguna
Philipp M

1
Meskipun ini adalah solusi yang bagus untuk mengatur ulang formulir, sebenarnya itu bukan solusi untuk pertanyaan yang diajukan.
Luke

13

Saya biasanya melakukan:

$('#formDiv form').get(0).reset()

atau

$('#formId').get(0).reset()

5

Ini ada sesuatu untuk Anda mulai

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

Tentu saja, jika Anda memiliki kotak centang / tombol radio, Anda harus memodifikasi ini untuk memasukkannya juga dan mengatur .attr({'checked': false});

sunting jawaban Paolo lebih ringkas. Jawaban saya lebih bertele-tele karena saya tidak tahu tentang :inputpemilih, saya juga tidak berpikir tentang hanya menghapus atribut yang diperiksa.


5

Pertimbangkan untuk menggunakan plugin validasi - hebat! Dan mengatur ulang formulir sederhana:

var validator = $("#myform").validate();
validator.resetForm();

4

Saya menemukan ini bekerja dengan baik.

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

kecuali bahwa itu tidak berfungsi untuk kotak centang, tombol radio dan pemilihan.
kritzikratzi

4

pada dasarnya tidak ada solusi yang diberikan membuat saya senang. seperti yang ditunjukkan oleh beberapa orang, mereka mengosongkan formulir alih-alih mengatur ulang.

namun, ada beberapa properti javascript yang membantu:

  • Nilai default untuk bidang teks
  • default Diperiksa untuk kotak centang dan tombol radio
  • default Dipilih untuk opsi pilih

ini menyimpan nilai yang dimiliki suatu bidang saat halaman dimuat.

menulis plugin jQuery sekarang sepele: (untuk yang tidak sabar ... inilah demo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

plugin-code

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

pemakaian

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

beberapa catatan ...

  • Saya belum melihat ke dalam elemen formulir html5 baru, beberapa mungkin perlu perawatan khusus tetapi ide yang sama harus bekerja.
  • elemen perlu direferensikan secara langsung. yaitu $( "#container" ).resetValue()tidak akan bekerja. selalu gunakan $( "#container :input" )saja.
  • seperti yang disebutkan di atas, berikut adalah demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/

4

Anda mungkin menemukan bahwa ini sebenarnya lebih mudah diselesaikan tanpa jQuery.

Dalam JavaScript biasa, ini sesederhana:

document.getElementById('frmitem').reset();

Saya mencoba untuk selalu ingat bahwa ketika kita menggunakan jQuery untuk meningkatkan dan mempercepat pengkodean kita, kadang-kadang itu tidak lebih cepat. Dalam kasus tersebut, seringkali lebih baik menggunakan metode lain.


4

Saya membuat sedikit variasi dari solusi bagus Francis Lewis . Apa yang tidak dilakukan solusinya adalah mengatur pilihan drop-down menjadi kosong. (Saya pikir ketika kebanyakan orang ingin "menghapus", mereka mungkin ingin membuat semua nilai kosong.) Yang ini melakukannya dengan .find('select').prop("selectedIndex", -1).

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

2

Saya biasanya menambahkan tombol reset tersembunyi ke formulir. bila diperlukan cukup: $ ('# reset'). klik ();


1
mengapa Anda menjawab posting yang telah dijawab, dan disetujui lebih dari 2 tahun yang lalu? Dan termasuk ini, pos Anda juga berkualitas rendah
Rene Pot

ini jauh lebih tidak jelas daripada hanya memanggil form.reset () secara langsung. tidak perlu untuk retas ini.
kritzikratzi

2

Modifikasi jawaban yang paling banyak dipilih untuk $(document).ready()situasi ini:

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

2

Cukup gunakan jQuery Trigger eventseperti ini:

$('form').trigger("reset");

Ini akan mengatur ulang kotak centang, tombol radio, kotak teks, dll ... Pada dasarnya itu mengubah bentuk Anda ke keadaan default itu. Sederhananya bagian #ID, Class, elementdalam jQuerypemilih.


1

ini bekerja untuk saya, pyrotex jawaban tidak mereset bidang pilih, ambil miliknya, ini edit saya:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);

1

Saya menggunakan solusi Paolo Bergantino yang sangat bagus tetapi dengan beberapa penyesuaian ... Khusus untuk bekerja dengan nama formulir, bukan id.

Sebagai contoh:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

Sekarang ketika saya ingin menggunakannya, saya bisa melakukannya

<span class="button" onclick="jqResetForm('formName')">Reset</span>

Seperti yang Anda lihat, ini berfungsi dengan bentuk apa pun, dan karena saya menggunakan gaya css untuk membuat tombol, halaman tidak akan menyegarkan saat diklik. Sekali lagi terima kasih Paolo atas masukan Anda. Satu-satunya masalah adalah jika saya memiliki nilai default dalam formulir.


1

Saya menggunakan solusi di bawah ini dan itu berhasil untuk saya (mencampur javascript tradisional dengan jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

1

Saya hanya perantara dalam PHP, dan sedikit malas untuk menyelami bahasa baru seperti JQuery, tetapi bukankah ini mengikuti solusi yang sederhana dan elegan?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

Tidak dapat melihat alasan mengapa tidak memiliki dua tombol kirim, hanya dengan tujuan berbeda. Maka cukup:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

Anda baru saja mendefinisikan kembali nilai Anda ke apa pun yang seharusnya menjadi default.


0

Metode yang saya gunakan pada formulir yang cukup besar (50 bidang) adalah dengan hanya memuat kembali formulir dengan AJAX, pada dasarnya membuat panggilan kembali ke server dan hanya mengembalikan bidang dengan nilai defaultnya. Ini dibuat jauh lebih mudah daripada mencoba untuk mengambil setiap bidang dengan JS dan kemudian mengaturnya ke nilai standarnya. Itu juga memungkinkan saya untuk menjaga nilai default di satu tempat - kode server. Di situs ini, ada juga beberapa default berbeda tergantung pada pengaturan untuk akun dan oleh karena itu saya tidak perlu khawatir tentang mengirim ini ke JS. Satu-satunya masalah kecil yang harus saya tangani adalah beberapa bidang saran yang memerlukan inisialisasi setelah panggilan AJAX, tetapi bukan masalah besar.


0

Semua jawaban ini baik tetapi cara termudah mutlak untuk melakukannya adalah dengan reset palsu, yaitu Anda menggunakan tautan dan tombol reset.

Cukup tambahkan beberapa CSS untuk menyembunyikan tombol reset asli Anda.

input[type=reset] { visibility:hidden; height:0; padding:0;}

Dan kemudian pada tautan Anda tambahkan sebagai berikut

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

Semoga ini membantu! SEBUAH.


0
<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

0

Di sini, dengan penyegaran untuk kotak centang dan pilih:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

0

Saya mengalami masalah yang sama dan jabatan Paolo membantu saya, tetapi saya perlu menyesuaikan satu hal. Formulir saya dengan id advancedindexsearch hanya berisi bidang input dan mendapatkan nilai dari suatu sesi. Untuk beberapa alasan berikut ini tidak berfungsi untuk saya:

$("#advancedindexsearch").find("input:text").val("");

Jika saya memberi peringatan setelah ini, saya melihat nilai-nilai di mana dihapus dengan benar tetapi setelah itu di mana diganti lagi. Saya masih tidak tahu bagaimana atau mengapa tetapi baris berikut ini memang membantu saya:

$("#advancedindexsearch").find("input:text").attr("value","");

0

Jawaban Paolo tidak memperhitungkan pemetik tanggal, tambahkan ini di:

$form.find('input[type="date"]').val('');

0

Saya membuat sedikit perbaikan pada jawaban asli Paolo Bergantino

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

Dengan cara ini, saya bisa meneruskan elemen konteks ke fungsi. Saya dapat mengatur ulang seluruh formulir atau hanya kumpulan bidang tertentu, misalnya:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

Plus, nilai default input dipertahankan.


0

di sini adalah solusi saya, yang juga berfungsi dengan tipe input html5 baru:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

1
Anda harus memindahkan di breakbawah ini checkboxdan radiokasing. Tidak perlu untuk itu dalam posisi saat ini.
bergie3000

0

Melengkapi jawaban yang diterima, jika Anda menggunakan plugin SELECT2, Anda perlu memanggil kembali script select2 untuk membuat perubahan, semua bidang select2:

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }

-1
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
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.