Kosongkan bidang formulir dengan jQuery

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?

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

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.

Ada alasan mengapa ini tidak boleh digunakan?

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

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

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.

Sederhana tetapi bekerja seperti pesona.

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

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!

$('form[name="myform"]')[0].reset();

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

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

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

Saya mendapat trik termudah untuk mengatur ulang formulir

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

atau

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

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

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

di mana editPOIFormadalah idatribut formulir Anda.

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

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.

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

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

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

Saya menggunakan ini:

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

Dan inilah tombol saya:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

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>

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

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

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

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

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

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.

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>

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>

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

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

var el = $(this);

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

return false;

});