Bagaimana cara mereset (menghapus) formulir melalui JavaScript?

124

Saya sudah mencoba $("#client.frm").reset();tetapi tidak berhasil.Jadi bagaimana cara mereset formulir melalui jQuery?

javascript jquery akuzma
sumber
Kemungkinan duplikat stackoverflow.com/questions/680241/blank-out-a-form-with-jquery
svk
6
Catatan: Hapus dan Atur Ulang adalah dua hal yang berbeda. Reset ( .reset()) akan mengembalikan nilai ke nilai aslinya di HTML. Untuk ini, lihat solusi Nick Craver di bawah ini. "Hapus" biasanya berarti menyetel nilai kembali ke kosong / tidak dicentang / tidak dipilih; lihat solusi MahmoudS.
Lukas

Jawaban:

258

form.reset() adalah metode elemen DOM (bukan yang ada di objek jQuery), jadi Anda perlu:

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

Atau tanpa jQuery:

document.getElementById("client").reset();
Nick Craver
sumber
4
Otak saya baru saja berkembang, terima kasih: "Objek jQuery adalah pembungkus seperti larik di sekitar satu atau lebih elemen DOM. Untuk mendapatkan referensi ke elemen DOM yang sebenarnya (bukan objek jQuery), Anda memiliki dua opsi. Yang pertama (dan tercepat) adalah menggunakan notasi larik: $ ("#foo") [0]; // Setara dengan document.getElementById ("foo") Metode kedua adalah menggunakan fungsi .get (): $ ("#foo ") .get (0); // Identik dengan yang di atas, hanya lebih lambat." learn.jquery.com/using-jquery-core/faq/…
Andrew
Saya mendapatkan kesalahan berikutnya: TypeError: document.getElementById (...). Reset bukan fungsi [Pelajari Lebih Lanjut]. Saya menggunakan plugin FormValidate untuk formulir. resetFormnya tidak mengatur ulang bentuk juga = (Ada saran?
Eugen Konkov
Eugen, di sinilah, seperti Indiana Jones dan The Last Crusade, Anda harus mengambil lompatan keyakinan. Jika Anda memanggil document.getElementById ('myform'). Reset () itu akan benar-benar menghapus formulir meskipun metode itu tampaknya tidak ada. Obfuscation khas M $.
Newclique
43

Anda cukup melakukan:

$("#client.frm").trigger('reset')

pengguna2057484
sumber
1
a Triggermembawa saya ke dunia baru
gonatee
18

Solusi JS murni adalah sebagai berikut:

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}
Mahmoud Saleh
sumber
1
Berikut adalah solusi plugin jQuery yang kira-kira setara. stackoverflow.com/a/24496012/1766230 (Saya menggunakan selectedIndex = -1trik Anda .)
Lukas
5
Solusi ini tidak berfungsi sekarang (pada 2016). Ketika formulir memiliki nilai default untuk teks, kata sandi dan input area teks, Anda harus menggunakan elemen [i] .defaultValue = "" alih-alih elemen [i] .value = "".
Andrew F.
var field_type = elements[i].type.toLowerCase();
Martynas Januškauskas
@ Andrew: Itu tergantung pada apa yang Anda inginkan. Jika Anda hanya ingin mengatur ulang formulir ke defaultValues, Anda dapat memanggil reset()objek formulir. Kode di sini adalah untuk menghapus formulir, daripada mengatur ulang.
Pelindung satu
4

Reset (Hapus) Bentuk pikir Javascript& jQuery:

Contoh Javascript:

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

Contoh jQuery:

Anda dapat mencoba menggunakan trigger() Link Referensi

$('#client.frm').trigger("reset");
Gaurang P.
sumber
4

Catatan, fungsi form.reset()tidak akan berfungsi jika beberapa tag masukan dalam formulir memiliki atributname='reset'

alexbobroff.dll
sumber
2

Coba ini :

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}
Hazem_M
sumber
2

Hapus formulir sebagai berikut

document.forms[0].reset();

Anda cukup menghapus elemen formulir dalam grup. dengan menggunakan ini forms[0].

Nagaraju Vuppala
sumber
1

Gunakan fungsi JavaScript reset():

document.forms["frm_id"].reset();
Felix Bagur
sumber
1

Anda bisa menggunakan yang berikut ini:

$('[element]').trigger('reset')
Hanya belajar
sumber
0

Coba kode ini. Solusi lengkap untuk jawaban Anda.

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>
Jaffer Wilson
sumber
-1

Anda dapat menghapus seluruh formulir menggunakan fungsi onclick. Berikut adalah kode untuk itu.

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

Fungsi window.location.reload () akan menyegarkan halaman Anda dan semua data akan dihapus.

Arjun
sumber