Cara mereset formulir menggunakan metode jQuery with .reset ()

Saya memiliki kode kerja yang dapat mengatur ulang formulir saya ketika saya mengklik tombol reset. Namun setelah kode saya semakin panjang, saya menyadari bahwa itu tidak berfungsi lagi.

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

Dan jQuery saya:

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

Apakah ada beberapa sumber yang harus saya sertakan dalam kode saya agar .reset()metode ini berfungsi? Sebelumnya saya menggunakan:

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

dan .reset()metode itu berhasil.

Saat ini saya menggunakan

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

Mungkinkah itu salah satu alasannya?

Anda dapat mencoba menggunakan trigger () Link Referensi

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

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

Taruh di biola JS. Bekerja sebagaimana dimaksud.

Jadi, tidak ada masalah yang disebutkan di atas yang salah di sini. Mungkin Anda mengalami masalah ID yang saling bertentangan? Apakah klik itu benar-benar mengeksekusi?

Sunting: (karena saya karung sedih tanpa kemampuan berkomentar yang tepat) Ini bukan masalah langsung dengan kode Anda. Ini berfungsi dengan baik ketika Anda mengeluarkannya dari konteks halaman yang sedang Anda gunakan, jadi, alih-alih menjadi sesuatu dengan jQuery / javascript & data formulir yang dikaitkan, itu harus berupa sesuatu yang lain. Saya akan mulai membagi dua kode di sekitarnya dan mencoba menemukan di mana itu terjadi. Maksudku, hanya untuk 'memastikan', kurasa kau bisa ...

console.log($('#configform')[0]);

di fungsi klik dan pastikan itu menargetkan bentuk yang tepat ...

dan jika ya, pasti ada sesuatu yang tidak tercantum di sini.

sunting bagian 2: Satu hal yang dapat Anda coba (jika tidak menargetkannya dengan benar) adalah menggunakan "input: reset" alih-alih apa yang Anda gunakan ... juga, saya sarankan karena bukan target yang salah bekerja untuk mencari tahu apa yang sebenarnya ditargetkan oleh klik. Cukup buka alat pembakar / pengembang, siapa saja Anda, masukkan

console.log($('#configreset'))

dan lihat apa yang muncul. dan kemudian kita bisa pergi dari sana.

Menurut posting ini di sini , jQuery tidak memiliki reset()metode; tetapi JavaScript asli tidak. Jadi, konversikan elemen jQuery ke objek JavaScript dengan menggunakan:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

Ini adalah salah satu hal yang sebenarnya lebih mudah dilakukan dalam Javascript vanilla daripada jQuery. jQuery tidak memiliki resetmetode, tetapi Elemen HTML Form tidak, sehingga Anda dapat mengatur ulang semua bidang dalam bentuk seperti ini:

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

Jika Anda melakukan ini melalui jQuery (seperti yang terlihat dalam jawaban lain di sini: $('#configform')[0].reset()), yang [0]sedang mengambil elemen bentuk DOM yang sama bahwa Anda akan mendapatkan langsung melalui document.getElementById. Pendekatan terakhir lebih efisien dan lebih sederhana (karena dengan pendekatan jQuery, Anda pertama-tama mendapatkan koleksi dan kemudian harus mengambil elemen dari itu, sedangkan dengan Javascript vanilla Anda hanya mendapatkan elemen secara langsung).

Tombol atur ulang tidak memerlukan skrip sama sekali (atau nama atau id):

<input type="reset">

dan kamu sudah selesai. Tetapi jika Anda benar - benar harus menggunakan skrip, perhatikan bahwa setiap kontrol formulir memiliki properti formulir yang mereferensikan formulir itu, sehingga Anda bisa melakukannya:

<input type="button" onclick="this.form.reset();">

Tetapi tombol reset adalah pilihan yang jauh lebih baik.

Saya akhirnya memecahkan masalah !! @RobG benar tentang formtag dan tabletag. yang formtag harus ditempatkan di luar meja. dengan itu,

<td><input type="reset" id="configreset" value="Reset"></td>

bekerja tanpa perlu jquery atau apa pun. klik sederhana pada tombol dan tadaa ~ seluruh formulir di-reset;) brilian!

Saya menggunakan kode sederhana ini:

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});

Dengan menggunakan fungsi jquery .closest (elemen) dan .find (...) .

Mendapatkan elemen induk dan mencari anak .

Akhirnya, lakukan fungsi yang dibutuhkan.

$("#form").closest('form').find("input[type=text], textarea").val("");

Baris pertama akan mengatur ulang input formulir

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

Yang kedua akan mereset select2

Opsional: Anda dapat menggunakan ini jika Anda memiliki jenis yang berbeda yang terdaftar pada acara yang berbeda

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2

Reset cepat bidang isian dimungkinkan dengan fungsi reset jQuery ini.

ketika Anda mendapat respons sukses maka jalankan kode di bawah ini.

$(selector)[0].reset();

Anda bisa menambahkan tipe input = reset dengan id = resetform seperti ini

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

kemudian dengan jquery Anda cukup menggunakan fungsi .click () pada elemen dengan id = resetform sebagai berikut

<script> 
$('#resetform').click();
</script>

dan form reset Catatan: Anda juga dapat menyembunyikan tombol reset dengan id = resetform menggunakan css Anda

<style>
#resetform
{
display:none;
}
</style>

Inilah solusi sederhana dengan Jquery. Ini bekerja secara global. Lihatlah kodenya.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

Tambahkan kelas yang jelas ke tombol di setiap formulir yang Anda butuhkan untuk meresetnya. Sebagai contoh:

<button class="button clear" type="reset">Clear</button>

jQuery tidak memiliki reset()metode; tetapi JavaScript asli tidak. Jadi, konversikan elemen jQuery ke objek JavaScript dengan menggunakan:

$("#formId")[0].reset();

$("#formId").get(0).reset();

Kami cukup menggunakan kode Javascript

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

<button type="reset">Reset</reset>

Cara paling sederhana yang bisa saya pikirkan adalah kuat. Tempatkan di dalam tag formulir.

Anda dapat menggunakan yang berikut ini.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

Kemudian kosongkan formulir:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });

Kode Anda harus berfungsi. Pastikan static/jquery-1.9.1.min.jsada. Anda juga dapat mencoba kembali ke static/jquery.min.js. Jika itu memperbaiki masalah maka Anda telah menunjuk masalah dengan tepat.