Làm cách nào để đặt lại (xóa) biểu mẫu thông qua JavaScript?

123

Tôi đã thử $("#client.frm").reset();nhưng nó không hoạt động. Làm thế nào để thiết lập lại biểu mẫu qua jQuery?

javascript jquery

— akuzma
nguồn

Bản sao có thể có của stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

— svk

6

Lưu ý: Xóa và Đặt lại là hai điều khác nhau. Đặt lại ( .reset()) sẽ đưa các giá trị trở lại giá trị ban đầu trong HTML. Đối với điều này, xem giải pháp của Nick Craver dưới đây. "Xóa" thường có nghĩa là đặt các giá trị trở lại trống / không được chọn / không được chọn; xem giải pháp MahmoudS.

— Lu-ca

258

form.reset() là một phương thức phần tử DOM (không phải là một phương thức trên đối tượng jQuery), vì vậy bạn cần:

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

Hoặc không có jQuery:

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

— Nick Craver
nguồn

4

Bộ não của tôi vừa mở rộng, cảm ơn: "Đối tượng jQuery là một trình bao bọc giống như mảng xung quanh một hoặc nhiều phần tử DOM. Để có được tham chiếu đến các phần tử DOM thực tế (thay vì đối tượng jQuery), bạn có hai tùy chọn. Đầu tiên (và Phương thức nhanh nhất) là sử dụng ký hiệu mảng: $ ("#foo") [0]; // Tương đương với document.getEuityById ("foo") Phương thức thứ hai là sử dụng hàm .get (): $ ("#foo ") .get (0); // Giống hệt ở trên, chỉ chậm hơn." learn.jquery.com/USE-jquery-core/faq/ Kẻ

— Andrew

Tôi gặp lỗi tiếp theo: TypeError: document.getEuityById (...). Reset không phải là một chức năng [Tìm hiểu thêm]. Tôi sử dụng plugin FormValidate cho mẫu. resetForm của nó không thiết lập lại hình thức quá = (Có đề xuất nào không?

— Eugen Konkov

Eugen, đây là nơi, giống như Indiana Jones và Cuộc thập tự chinh cuối cùng, bạn phải có một bước nhảy vọt về đức tin. Nếu bạn gọi document.getEuityById ('myform'). Reset () nó sẽ thực sự xóa biểu mẫu mặc dù phương thức đó dường như không tồn tại. Mf obfuscation điển hình.

— Newclique

43

Bạn chỉ có thể làm:

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

— người dùng2057484
nguồn

1

a Triggerđưa tôi đến thế giới mới

— gonatee

17

Giải pháp Pure JS như sau:

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

— Bán hàng Mahmoud
nguồn

1

Đây là giải pháp plugin jQuery tương đương. stackoverflow.com/a/24496012/1766230 (Tôi đã sử dụng selectedIndex = -1mánh khóe của bạn .)

— Luke

5

Giải pháp này hiện không hoạt động (năm 2016). Khi biểu mẫu có các giá trị mặc định cho các đầu vào văn bản, mật khẩu và textarea, bạn nên sử dụng các phần tử [i] .defaultValue = "" thay vì các phần tử [i] .value = "".

— Andrew F.

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

— Martynas Januškauskas

@Andrew: Nó phụ thuộc vào những gì bạn muốn. Nếu bạn chỉ muốn đặt lại biểu mẫu thành defaultValues, bạn có thể gọi reset()đối tượng biểu mẫu. Mã ở đây là để xóa biểu mẫu, thay vì đặt lại nó.

— Người bảo vệ một

4

, phương thức reset () không xóa các giá trị mặc định và trường hộp kiểm và còn nhiều vấn đề nữa.

Để thiết lập lại hoàn toàn, hãy kiểm tra liên kết dưới đây -

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

— Alpesh
nguồn

4

Đặt lại (Xóa) Biểu mẫu thông qua Javascript& jQuery:

Javascript ví dụ:

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

Ví dụ jQuery:

Bạn có thể thử sử dụng trigger() Liên kết tham chiếu

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

— Bò tót P
nguồn

4

Lưu ý, hàm form.reset()sẽ không hoạt động nếu một số thẻ đầu vào trong biểu mẫu có thuộc tínhname='reset'

— alexbobroff
nguồn

2

Thử cái này :

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

— Hazem_M
nguồn

2

Xóa mẫu như sau

document.forms[0].reset();

Bạn chỉ có thể xóa các thành phần biểu mẫu trong nhóm. bằng cách sử dụng này forms[0].

— Nagaraju Vuppala
nguồn

1

Sử dụng chức năng JavaScript reset():

document.forms["frm_id"].reset();

— Bánh mì kẹp thịt
nguồn

1

Bạn có thể sử dụng như sau:

$('[element]').trigger('reset')

— Chỉ học
nguồn

0

Hãy thử mã này. Một giải pháp hoàn chỉnh cho câu trả lời của bạn.

    <!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
nguồn

-1

Bạn có thể xóa toàn bộ biểu mẫu bằng hàm onclick. Đây là mã cho nó.

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

Hàm window.location.reload () sẽ làm mới trang của bạn và tất cả dữ liệu sẽ bị xóa.

— Arjun
nguồn