Saya telah bekerja kode yang bisa me-reset formulir saya ketika saya klik pada tombol reset. Namun setelah kode saya semakin lama, saya menyadari bahwa itu doesn't bekerja 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 saya jQuery:
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Ada beberapa sumber yang saya harus memasukkan dalam kode saya agar .reset()
metode untuk bekerja? Sebelumnya saya menggunakan:
<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>
dan .reset()
metode kerja.
Saat ini saya'm 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>
Mungkin ini bisa menjadi salah satu alasan?
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Meletakkannya di JS fiddle. Bekerja sebagaimana dimaksud.
Jadi, tidak ada isu tersebut yang salah di sini. Mungkin anda're memiliki konflik masalah ID? Adalah klik-benar melaksanakan?
Edit: (karena saya'm karung sedih yang tepat tanpa mengomentari kemampuan) Itu's tidak masalah langsung dengan kode anda. Ini bekerja dengan baik ketika anda membawanya keluar dari konteks dari halaman yang anda're saat ini menggunakan, jadi, bukannya sesuatu dengan tertentu jQuery/javascript & dikaitkan bentuk data, itu harus menjadi sesuatu yang lain. I'd mulai memecah kode di sekitar itu dan mencoba untuk menemukan di mana itu's terjadi. Maksud saya, hanya untuk 'pastikan', saya kira anda bisa...
console.log($('#configform')[0]);
dalam fungsi klik dan pastikan itu's penargetan bentuk yang tepat...
dan jika itu, itu harus menjadi sesuatu yang's tidak tercantum di sini.
edit bagian 2: Satu hal yang bisa anda coba (jika itu's tidak menargetkan itu benar) adalah menggunakan "input:reset" bukan apa yang anda gunakan... juga, aku'd sarankan karena itu's tidak target yang's benar bekerja untuk mencari tahu apa yang sebenarnya klik menargetkan. Hanya membuka firebug/alat pengembang, whathave anda, melemparkan
console.log($('#configreset'))
dan lihat apa yang muncul. dan kemudian kita bisa pergi dari sana.
Menurut posting ini di sini, jQuery tidak memiliki me-reset()
metode, tetapi native JavaScript tidak. Jadi, convert jQuery elemen objek JavaScript dengan baik menggunakan :
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Ini adalah salah satu dari hal-hal yang's benar-benar mudah dilakukan di vanilla Javascript dari jQuery. jQuery doesn't memiliki me-reset
metode, tetapi Form HTML Elemen tidak, sehingga anda dapat me-reset semua bidang dalam bentuk seperti ini:
document.getElementById('configform').reset();
Jika anda melakukan hal ini melalui jQuery (seperti yang terlihat pada jawaban yang lain di sini: $('#configform')[0].reset()
), yang [0]
adalah mengambil bentuk yang sama elemen DOM yang akan anda dapatkan langsung melalui dokumen.getElementById
. Pendekatan kedua adalah investasi yang lebih efisien dan sederhana sekalipun (karena dengan jQuery pendekatan anda pertama kali mendapatkan koleksi dan kemudian harus mengambil sebuah elemen dari itu, sedangkan dengan vanili Javascript anda hanya mendapatkan unsur langsung).
Tombol reset doesn't perlu setiap script pada semua (atau nama atau id):
<input type="reset">
dan anda'kembali dilakukan. Tetapi jika anda benar-benar *harus * menggunakan script, perhatikan bahwa setiap bentuk kontrol memiliki formulir properti yang referensi bentuk's, sehingga anda bisa melakukan:
<input type="button" onclick="this.form.reset();">
Tapi tombol reset adalah pilihan yang jauh lebih baik.
I've akhirnya memecahkan masalah!!
@RobG benar tentang bentuk
tag meja
tag. the bentuk
tag harus ditempatkan di luar tabel. 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 bentuk reset ;) brilian!
Dengan menggunakan fungsi jquery .terdekat(elemen) dan .menemukan(...).
Mendapatkan orang tua elemen dan mencari anak.
Akhirnya, melakukan fungsi yang dibutuhkan.
$("#form").closest('form').find("input[type=text], textarea").val("");
Saya menggunakan kode sederhana:
//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');
});
Baris pertama akan me-reset form input
$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2
Kedua akan me-reset select2
Opsional: Anda dapat user ini jika anda memiliki jenis yang berbeda yang terdaftar dengan peristiwa yang berbeda
$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
Anda hanya dapat menambahkan input type = 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 hanya menggunakan .klik() fungsi pada elemen dengan id = resetform sebagai berikut
<script>
$('#resetform').click();
</script>
dan bentuk ulang Catatan: Anda juga dapat menyembunyikan tombol reset dengan id = resetform menggunakan css
<style>
#resetform
{
display:none;
}
</style>
Berikut ini adalah solusi sederhana dengan Jquery. Ia bekerja secara global. Lihat pada kode.
$('document').on("click", ".clear", function(){
$(this).closest('form').trigger("reset");
})
Menambahkan kelas yang jelas untuk tombol di setiap bentuk yang anda butuhkan untuk me-reset. Misalnya:
<button class="button clear" type="reset">Clear</button>
Anda dapat menggunakan langkah berikut.
@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>
}
Maka jelas bentuk:
$('.btn:reset').click(function (ev) {
ev.preventDefault();
$(this).closest('form').find("input").each(function(i, v) {
$(this).val("");
});
});