Kosongkan bidang formulir dengan jQuery


402

Saya ingin menghapus semua bidang input dan textarea dalam formulir. Ini berfungsi seperti berikut saat menggunakan tombol input dengan resetkelas:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Ini akan menghapus semua bidang pada halaman, bukan hanya yang dari formulir. Bagaimana pemilih saya terlihat seperti bentuk tombol reset yang sebenarnya?



2
Metode yang lebih rinci untuk mereset formulir di sini .
Uzbekjon

Jawaban:


487
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

49
Jangan lupakan input[type=password]bidangmu.
SammyK

64
Jawaban ini mencakup pertanyaan awal. Mereka yang menginginkan lebih dari sekedar bidang teks jelas perlu menambahkan kode sesuai kebutuhan ...
ShaneBlake

2
juga ingat akan ada lebih banyak tipe input selain type = kata sandi (seperti kata SammyK) dalam HTML5: type = url, type = digit, type = email, dll http://www.w3.org/TR/html5/forms .html # state-of-the-type-atribut
Gabriel

6
Tip kecil: pemilih ini tidak akan memilih elemen input yang bergantung pada tipe implisit = teks, Anda harus secara eksplisit menyertakan tipe = teks pada markup Anda. Itu mungkin jelas, tetapi itu bukan bagi saya, sekarang :-)
Elbin

2
@CaptSaltyJack: Itu me-reset mereka ke nilai default yang tidak sama dengan membersihkannya ...
ShaneBlake

628

Untuk jQuery 1.6+ :

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

Untuk jQuery <1.6 :

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

Silakan lihat posting ini: Mengatur ulang formulir multi-tahap dengan jQuery

Atau

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

Seperti yang disarankan jQuery :

Untuk mengambil dan sifat perubahan DOM seperti checked, selectedatau disabledkeadaan unsur-unsur bentuk, gunakan .prop () metode.


3
Sepotong kode pertama akan menetapkan nilai kotak centang "" bukan hanya tidak mencentangnya. Dan itu tidak akan memengaruhi pemilihan, karena itu adalah tag opsi yang dipilih.

6
untuk menghindari menghapus nilai-nilai checkbox, saya menggunakan berikut, terinspirasi oleh jawaban Anda: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');. Ini akan menghapus nilai default (yaitu value="something", tetapi tidak untuk kotak centang atau seleksi.
Jeppe Mariager-Lam

17
JANGAN GUNAKAN INI (opsi 1) jika Anda memiliki radio, kotak centang, atau pilih, Anda akan membuang banyak waktu untuk menemukan bug aneh setelah nilainya hilang. Versi yang benar, yang membiarkan nilai-nilai mereka tetap utuh: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');(berdasarkan komentar Jeppe Mariager-Lam)
Konstantin Pereiaslov

8
Ada alasan untuk menghindari opsi kedua?
rineez

6
solusi kedua Anda adalah jawaban yang sebenarnya
abzarak

159

Ada alasan mengapa ini tidak boleh digunakan?

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

17
@ pythonian29033: dan dengan pendekatan Anda, Anda akan mengatur ulang SEMUA formulir pada halaman ke default ... yang jelas BUKAN apa yang diinginkan pengembang normal. Saya pikir pengembang jQuery harus memperhatikan fakta bahwa ia perlu mengubah pemilih dari kode contoh ke kode yang sesuai ...
Sk8erPeter

8
@ Sk8erPeter Jika Anda memiliki beberapa elemen pada halaman dengan ID form, Anda salah melakukannya. Anda akan benar jika pemilihnya adalah form, tetapi itu lebih merupakan pemilih ID #form.
brandones

@brandones: Anda seharusnya memperhatikan apa yang Anda balas, karena Anda salah ... :) Periksa kode yang ditulis pythonian29033 (yang saya jawab sebelumnya): $("form").trigger('reset');benar-benar memicu peristiwa "reset" pada SEMUA <form>elemen. Dalam kebanyakan kasus, itu mungkin salah. Tetapi $("#form").trigger('reset');(ditampilkan dalam jawaban asli) hanya memicu acara "reset" pada elemen yang memiliki set id "form" (dapat dijangkau dengan #formpemilih). Dan ya, satu id harus digunakan hanya sekali, ini sebabnya mereka menyebutnya "id", karena mengidentifikasi satu elemen dengan jelas.
Sk8erPeter

61

Ini tidak akan menangani kasus di mana bidang input formulir memiliki nilai default yang tidak kosong.

Sesuatu seperti seharusnya bekerja

$('yourdiv').find('form')[0].reset();

Saya hanya memiliki kode js dari posting pertama saya dan ingin itu berfungsi pada setiap halaman dengan beberapa tombol reset dalam beberapa bentuk. Jadi hanya pemilih yang membutuhkan kontribusi.
tbuehlmann

51

Jika Anda menggunakan penyeleksi dan membuat nilai menjadi nilai kosong, itu tidak mengatur ulang formulir, itu membuat semua bidang kosong. Reset adalah membuat formulir seperti sebelum tindakan edit dari pengguna setelah memuat formulir dari sisi server. Jika ada input dengan nama "nama pengguna" dan nama pengguna itu diawali dari sisi server, sebagian besar solusi pada halaman ini akan menghapus nilai itu dari input, tidak mengatur ulang ke nilai seperti sebelum perubahan pengguna. Jika Anda perlu mengatur ulang formulir, gunakan ini:

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

jika Anda tidak perlu mengatur ulang formulir, tetapi isi semua input dengan beberapa nilai, misalnya nilai kosong, maka Anda dapat menggunakan sebagian besar solusi dari komentar lain.


29

Sederhana tetapi bekerja seperti pesona.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

14
Kecuali itu tidak menghapus bidang. Ini mengatur mereka ke default.
Mark Fraser

29

Jika seseorang masih membaca utas ini, berikut adalah solusi paling sederhana menggunakan bukan jQuery, tetapi JavaScript biasa. Jika bidang input Anda ada di dalam formulir, ada perintah reset JavaScript sederhana:

document.getElementById("myform").reset();

Lebih lanjut tentang hal itu di sini: http://www.w3schools.com/jsref/met_form_reset.asp

Bersulang!


Seperti yang tertulis. Ini me-reset ke nilai bentuk bawaan dan tidak mengosongkan nilai. Tapi ya, Jika Anda telah memuat formulir dengan nilai default, mereka tidak akan dihapus. Mungkin loop JS yang melewati semua input dan
mengosongkannya


17

Mengapa itu harus dilakukan dengan JavaScript sama sekali?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords


Mencoba yang pertama, tidak akan menghapus bidang dengan nilai default.

Inilah cara untuk melakukannya dengan jQuery, lalu:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

1
Mencoba yang pertama, tidak akan menghapus bidang dengan nilai default.
tbuehlmann

Ada alasan lain Anda sering membutuhkan JavaScript untuk ini. Bentuknya mungkin bukan "bentuk" sama sekali. Misalnya, formulir Anda benar-benar hanya kumpulan input untuk aplikasi Backbone.js / Ember.js / AngularJS dan data tidak akan pernah dikirim sebagai formulir tradisional ke server tetapi harus diproses secara ketat dengan sisi klien JavaScript. Dalam kasus seperti ini tidak ada formulir untuk mengatur ulang agar berfungsi.
John Munsch

3
.live()sudah usang, dan juga lambat / tidak perlu. Anda bisa menggunakan .bind()atau .on().
Kevin Beal

14

Jika Anda ingin mengosongkan semua kotak input terlepas dari jenisnya, maka itu hanya beberapa menit

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

12

Saya mendapat trik termudah untuk mengatur ulang formulir

jQuery("#review-form")[0].reset();

atau

$("#review-form").get().reset();

12

Dengan Javascript Anda cukup melakukannya dengan sintaks ini getElementById("your-form-id").reset();

Anda juga dapat menggunakan jquery dengan memanggil fungsi reset dengan cara ini $('#your-form-id')[0].reset();

Ingatlah untuk tidak melupakan [0]. Anda akan mendapatkan kesalahan berikut jika

TypeError: $ (...). Reset bukan fungsi

JQuery juga menyediakan acara yang dapat Anda gunakan

$ ('# form_id'). trigger ("reset");

Saya mencoba dan berhasil.

Catatan: Penting untuk diperhatikan bahwa metode ini hanya mengatur ulang formulir Anda ke nilai awal yang ditentukan oleh server pada pemuatan halaman. Ini berarti jika input Anda ditetapkan pada nilai 'set nilai' sebelum Anda melakukan perubahan acak, bidang akan diatur ulang ke nilai yang sama setelah metode reset dipanggil.

Semoga ini bisa membantu


7
$('#editPOIForm').each(function(){ 
    this.reset();
});

di mana editPOIFormadalah idatribut formulir Anda.


2
Hanya akan ada satu #editPOIFormdan .each()metode ini tidak masuk akal. Bahkan jika Anda menambahkan id ini ke beberapa bentuk, itu hanya akan mengembalikan salah satunya.
Kevin Beal

1
Masing-masing () memungkinkan Anda untuk menggunakan ini (bukan $ (ini)) untuk mendapatkan objek DOM yang mendasarinya, dan mengatur ulang panggilan (). Dengan asumsi Anda ingin mengatur ulang ke nilai default, alih-alih membersihkan semuanya, ini adalah solusi yang baik.
Dave

@Dapat juga menggunakan$('#editPOIForm').get(0).reset();
Thomas Daugaard

2
@ThomasDaugaard: kecuali jika Anda menggunakan get (0) atau cukup $ ('# editPOIForm') [0] Anda akan mendapatkan kesalahan skrip jika $ ('# editPOIForm') tidak cocok dengan elemen, sedangkan setiap () akan gagal tanpa kesalahan. Jadi saya kira itu tergantung pada prioritas Anda sejauh penanganan kesalahan terjadi.
Dave

6

Mengapa Anda tidak menggunakannya document.getElementById("myId").reset();? ini sederhana dan cantik


6

Kode yang diuji dan diverifikasi:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript harus disertakan $(document).readydan harus dengan logika Anda.


5

Solusi yang paling mudah dan terbaik adalah-
$("#form")[0].reset();

Jangan gunakan di sini -
$(this)[0].reset();


Hanya sedikit peringatan: Jika Anda memiliki nilai default untuk input, misalkan server-diberikan, maka form.reset();akan mengatur ulang ke nilai-nilai itu, dan tidak menghapus input.
Evil_Bengt

4

Katakanlah jika Anda ingin menghapus bidang dan kecuali tipe akun, dalam kotak dropdown waktu rata-rata akan diatur ulang ke nilai tertentu, yaitu 'Semua'. Bidang yang tersisa harus diatur ulang menjadi kosong yaitu kotak teks. Pendekatan ini akan digunakan untuk menghapus bidang tertentu sebagai persyaratan kami.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

Jawaban paling lengkap. Terima kasih.
RationalRabbit

Satu pertanyaan: Bagaimana Anda mengarahkan ini ke formulir tertentu jika Anda melakukannya secara terprogram, bukan dengan mengklik tombol?
RationalRabbit


3

Gunakan Kode ini Di mana Anda ingin Memanggil Fungsi Reset Normal oleh jQuery

setTimeout("reset_form()",2000);

Dan Tuliskan Fungsi Ini di Luar Situs jQuery pada Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

3

Beberapa dari Anda mengeluh bahwa radio dan semacamnya sudah dihapus dari status "dicentang" default ... Yang harus Anda lakukan adalah menambahkan: radio,: pemilih kotak centang ke .not dan masalah diselesaikan.

Jika Anda tidak bisa mendapatkan semua fungsi reset lainnya berfungsi, ini akan berfungsi.

  • Diadaptasi dari jawaban ngen

    function form_reset(formID){
        $(':input','#'+formID)
        .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
        .val('');
    }

2
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 
  1. frmID adalah identifikasi formulir
  2. OnSuccessoperasi yang kita sebut fungsi JavaScript dengan nama " ClearInput"

    <script type="text/javascript">
        function ClearInput() {
            //call action for render create view
            $("#frmID").get(0).reset();
        }
    </script>
  3. jika Anda melakukan keduanya dengan benar, maka Anda tidak akan dapat menghentikannya dari bekerja ...


1

Kode berikut menghapus semua formulir dan bidangnya akan kosong. Jika Anda ingin menghapus hanya formulir tertentu jika halaman memiliki lebih dari satu formulir, harap sebutkan id atau kelas formulir

$("body").find('form').find('input,  textarea').val('');

0

Jika saya ingin menghapus semua bidang kecuali jenis akun .. Gunakan yang berikut

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

1
Anda tidak ingin kehilangan nilai untuk kotak centang dalam radiobuttons, tetapi hanya hapus centang pada mereka, ini bukan solusi yang baik
Frankey

0

kode yang saya lihat di sini dan pada pertanyaan SO terkait sepertinya tidak lengkap.

Menyetel ulang formulir berarti mengatur nilai asli dari HTML, jadi saya menyatukan ini untuk proyek kecil yang saya lakukan berdasarkan kode di atas:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

Tolong beri tahu saya jika saya kehilangan sesuatu atau apa pun dapat diperbaiki.


0

Tidak satu pun di atas berfungsi pada kasus sederhana ketika halaman menyertakan panggilan ke kontrol pengguna web yang melibatkan pemrosesan permintaan IHttpHandler (captcha). Setelah mengirim requsrt (untuk pemrosesan gambar) kode di bawah ini tidak menghapus bidang pada formulir (sebelum mengirim permintaan HttpHandler) semuanya berfungsi dengan benar.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

0

Saya telah menulis plugin jQuery universal:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>


-2

Tambahkan tombol reset tersembunyi sebagai berikut

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

-4

$ ('form'). submit (function () {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});

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.