Menyetel ulang formulir multi-tahap dengan jQuery

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.

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 .

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.

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

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

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.

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

Saya biasanya melakukan:

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

atau

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

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.

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

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

Saya menemukan ini bekerja dengan baik.

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

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/

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.

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

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

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

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.

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

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.

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

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.

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.

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.

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

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

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","");

Jawaban Paolo tidak memperhitungkan pemetik tanggal, tambahkan ini di:

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

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.

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

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

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);