Cách đặt lại biểu mẫu bằng jQuery với phương thức .reset ()

Tôi có mã làm việc có thể đặt lại biểu mẫu của mình khi tôi nhấp vào nút đặt lại. Tuy nhiên, sau khi mã của tôi dài hơn, tôi nhận ra rằng nó không hoạt động nữa.

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

Và jQuery của tôi:

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

Có một số nguồn mà tôi nên đưa vào mã của mình để .reset()phương pháp hoạt động không? Trước đây tôi đã sử dụng:

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

và .reset()phương pháp đã hoạt động.

Hiện tại tôi đang sử dụng

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

Nó có thể là một trong những lý do?

bạn có thể thử sử dụng trigger () Tham chiếu liên kết

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

http://jsfiddle.net/8zLLn/

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

Đặt nó trong JS fiddle. Làm việc như dự định.

Vì vậy, không có vấn đề nào nêu trên là lỗi ở đây. Có thể bạn đang gặp sự cố ID xung đột? Nhấp chuột có thực sự đang thực thi không?

Chỉnh sửa: (bởi vì tôi là một kẻ buồn bã không có khả năng bình luận thích hợp) Nó không phải là vấn đề trực tiếp với mã của bạn. Nó hoạt động tốt khi bạn đưa nó ra khỏi ngữ cảnh của trang mà bạn hiện đang sử dụng, vì vậy, thay vì nó là một cái gì đó với dữ liệu biểu mẫu jQuery / javascript & quy tắc cụ thể, nó phải là một cái gì đó khác. Tôi sẽ bắt đầu chia nhỏ đoạn mã xung quanh nó và cố gắng tìm xem nó đang diễn ra ở đâu. Ý tôi là, chỉ để 'chắc chắn', tôi cho rằng bạn có thể ...

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

trong chức năng nhấp chuột và đảm bảo rằng nó đang nhắm mục tiêu đúng biểu mẫu ...

và nếu có, nó phải là thứ không được liệt kê ở đây.

chỉnh sửa phần 2: Một điều bạn có thể thử (nếu nó không nhắm mục tiêu chính xác) là sử dụng "input: reset" thay vì những gì bạn đang sử dụng ... ngoài ra, tôi đề xuất vì nó không phải là mục tiêu hoạt động không chính xác để tìm hiểu những gì nhấp chuột thực sự đang nhắm mục tiêu. Chỉ cần mở firebug / công cụ dành cho nhà phát triển, bạn có gì, tung ra

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

và xem những gì bật lên. và sau đó chúng ta có thể đi từ đó.

Theo bài đăng này ở đây , jQuery không có reset()phương thức; nhưng JavaScript gốc thì có. Vì vậy, hãy chuyển đổi phần tử jQuery thành một đối tượng JavaScript bằng cách sử dụng:

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

Đây là một trong những thứ thực sự được thực hiện trong Javascript vani dễ dàng hơn jQuery. jQuery không có resetphương thức, nhưng Phần tử biểu mẫu HTML thì có, vì vậy bạn có thể đặt lại tất cả các trường trong một biểu mẫu như sau:

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

Nếu bạn thực hiện việc này thông qua jQuery (như đã thấy trong các câu trả lời khác ở đây $('#configform')[0].reset():), thì [0]nó đang tìm nạp phần tử DOM cùng dạng mà bạn sẽ nhận trực tiếp qua document.getElementById. Tuy nhiên, cách tiếp cận thứ hai vừa hiệu quả hơn vừa đơn giản hơn (vì với cách tiếp cận jQuery, trước tiên bạn nhận được một tập hợp và sau đó phải tìm nạp một phần tử từ nó, trong khi với Javascript vani bạn chỉ lấy phần tử trực tiếp).

Nút đặt lại hoàn toàn không cần bất kỳ tập lệnh nào (hoặc tên hoặc id):

<input type="reset">

và bạn đã hoàn thành. Nhưng nếu bạn thực sự phải sử dụng script, hãy lưu ý rằng mọi điều khiển biểu mẫu đều có thuộc tính biểu mẫu tham chiếu đến biểu mẫu mà nó ở trong đó, vì vậy bạn có thể làm:

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

Nhưng nút đặt lại là một lựa chọn tốt hơn nhiều.

Cuối cùng tôi đã giải quyết được vấn đề !! @RobG đã đúng về formthẻ và tablethẻ. các formThẻ phải được đặt bên ngoài bàn. với,

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

hoạt động mà không cần jquery hoặc bất kỳ thứ gì khác. chỉ cần nhấp vào nút và tadaa ~ toàn bộ biểu mẫu đã được đặt lại;) tuyệt vời!

Tôi sử dụng mã đơn giản này:

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

Dòng đầu tiên sẽ đặt lại đầu vào biểu mẫu

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

Cái thứ hai sẽ đặt lại select2

Tùy chọn: Bạn có thể sử dụng cái này nếu bạn có các loại khác nhau được đăng ký với các sự kiện khác nhau

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

Bằng cách sử dụng hàm jquery .closest (phần tử) và .find (...) .

Lấy phần tử cha và tìm kiếm phần tử con .

Cuối cùng, làm chức năng cần thiết.

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

jQuery không có reset()phương thức; nhưng JavaScript gốc thì có. Vì vậy, hãy chuyển đổi phần tử jQuery thành một đối tượng JavaScript bằng cách sử dụng:

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

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

Chúng tôi chỉ có thể sử dụng mã Javascript

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

Có thể đặt lại nhanh các trường biểu mẫu với chức năng đặt lại jQuery này.

khi bạn nhận được phản hồi thành công thì hãy kích hoạt mã bên dưới.

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

Bạn chỉ có thể thêm một loại đầu vào = đặt lại với một id = biểu mẫu đặt lại như thế này

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

thì với jquery, bạn chỉ cần sử dụng hàm .click () trên phần tử có id = resetform như sau

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

và biểu mẫu đặt lại Lưu ý: Bạn cũng có thể ẩn nút đặt lại với id = resetform bằng cách sử dụng css của bạn

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

Đây là giải pháp đơn giản với Jquery. Nó hoạt động trên toàn cầu. Hãy xem mã.

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

Thêm một lớp rõ ràng vào một nút trong mọi biểu mẫu mà bạn cần đặt lại. Ví dụ:

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

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

Cách đơn giản nhất mà tôi có thể nghĩ ra là mạnh mẽ. Đặt trong thẻ biểu mẫu.

Mã của bạn sẽ hoạt động. Đảm bảo static/jquery-1.9.1.min.jstồn tại. Ngoài ra, bạn có thể thử hoàn nguyên về static/jquery.min.js. Nếu điều đó khắc phục được sự cố thì bạn đã xác định được chính xác vấn đề.

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

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

Sau đó, xóa biểu mẫu:

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