Xóa các trường mẫu với jQuery

Tôi muốn xóa tất cả các trường đầu vào và vùng văn bản trong một biểu mẫu. Nó hoạt động như sau khi sử dụng nút đầu vào với resetlớp:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Điều này sẽ xóa tất cả các trường trên trang, không chỉ những trường từ biểu mẫu. Làm thế nào để bộ chọn của tôi trông giống như hình thức mà nút đặt lại thực tế tồn tại?

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

Đối với jQuery 1.6+ :

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

Đối với jQuery <1.6 :

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

Vui lòng xem bài đăng này: Đặt lại một biểu mẫu nhiều giai đoạn với jQuery

Hoặc là

$('#myform')[0].reset();

Như jQuery gợi ý :

Để lấy và tài sản thay đổi DOM như checked, selectedhoặc disabledtrạng thái của các yếu tố hình thức, sử dụng .prop () phương pháp.

Bất kỳ lý do này không nên được sử dụng?

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

Điều này sẽ không xử lý các trường hợp trong đó các trường nhập mẫu có giá trị mặc định không trống.

Một cái gì đó như nên làm việc

$('yourdiv').find('form')[0].reset();

nếu bạn sử dụng bộ chọn và tạo giá trị thành giá trị trống, nó không đặt lại biểu mẫu, nó sẽ làm cho tất cả các trường trống. Đặt lại là tạo biểu mẫu như trước khi có bất kỳ hành động chỉnh sửa nào từ người dùng sau khi tải biểu mẫu từ phía máy chủ. Nếu có một đầu vào có tên "tên người dùng" và tên người dùng đó đã được điền sẵn từ phía máy chủ, hầu hết các giải pháp trên trang này sẽ xóa giá trị đó khỏi đầu vào, không đặt lại giá trị như trước khi người dùng thay đổi. Nếu bạn cần đặt lại biểu mẫu, hãy sử dụng:

$('#myform')[0].reset();

nếu bạn không cần thiết lập lại biểu mẫu, nhưng điền vào tất cả các đầu vào với một số giá trị, ví dụ giá trị trống, thì bạn có thể sử dụng hầu hết các giải pháp từ các nhận xét khác.

Đơn giản nhưng hoạt động như một nét duyên dáng.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

Nếu ai đó vẫn đang đọc chủ đề này, đây là giải pháp đơn giản nhất không sử dụng jQuery mà là JavaScript đơn giản. Nếu các trường đầu vào của bạn nằm trong một biểu mẫu, có một lệnh đặt lại JavaScript đơn giản:

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

Tìm hiểu thêm về nó ở đây: http://www.w3schools.com/jsref/met_form_reset.asp

Chúc mừng!

$('form[name="myform"]')[0].reset();

Tại sao nó cần phải được thực hiện với bất kỳ JavaScript nào?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

Đã thử cái đó trước, nó sẽ không xóa các trường có giá trị mặc định.

Đây là một cách để làm điều đó với jQuery, sau đó:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

Nếu bạn muốn làm trống tất cả các hộp đầu vào bất kể loại của nó thì cứ sau một phút

 $('#MyFormId')[0].reset();

Tôi có mẹo dễ nhất để thiết lập lại mẫu

jQuery("#review-form")[0].reset();

hoặc là

$("#review-form").get().reset();

Với Javascript, bạn chỉ cần thực hiện với cú pháp này getElementById("your-form-id").reset();

bạn cũng có thể sử dụng jquery bằng cách gọi hàm reset theo cách này $('#your-form-id')[0].reset();

Nhớ đừng quên [0]. Bạn sẽ nhận được lỗi sau nếu

LoạiError: $ (...). Thiết lập lại không phải là một chức năng

JQuery cũng cung cấp một sự kiện bạn có thể sử dụng

$ ('# form_id'). kích hoạt ("đặt lại");

Tôi đã thử và nó hoạt động.

Lưu ý: Điều quan trọng cần lưu ý là các phương thức này chỉ đặt lại biểu mẫu của bạn về giá trị ban đầu được đặt bởi máy chủ khi tải trang. Điều này có nghĩa là nếu đầu vào của bạn được đặt trên giá trị 'set value' trước khi bạn thực hiện thay đổi ngẫu nhiên, trường sẽ được đặt lại về cùng giá trị đó sau khi phương thức đặt lại được gọi.

Hy vọng nó giúp

$('#editPOIForm').each(function(){ 
    this.reset();
});

đâu editPOIFormlà idthuộc tính của hình thức của bạn.

Tại sao bạn không sử dụng document.getElementById("myId").reset();? đây là đơn giản và đẹp

Đã kiểm tra và xác minh mã:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript phải được đưa vào $(document).readyvà nó phải phù hợp với logic của bạn.

Giải pháp dễ dàng và tốt nhất là-
$("#form")[0].reset();

Đừng sử dụng ở đây -
$(this)[0].reset();

Giả sử nếu bạn muốn xóa các trường và ngoại trừ loại tài khoản, trong hộp thả xuống thời gian trung bình sẽ được đặt lại thành giá trị cụ thể, tức là 'Tất cả các trường sẽ được đặt lại thành trống, tức là hộp văn bản. Cách tiếp cận này sẽ được sử dụng để xóa lĩnh vực cụ thể theo yêu cầu của chúng tôi.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

Tôi sử dụng cái này:

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

Và đây là nút của tôi:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

Sử dụng mã này Nơi bạn muốn gọi Hàm đặt lại bình thường bằng jQuery

setTimeout("reset_form()",2000);

Và viết chức năng này ra trang web jQuery trên tài liệu đã sẵn sàng

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

Một số bạn phàn nàn rằng radio và những thứ đó đã bị xóa trạng thái "đã kiểm tra" mặc định ... Tất cả những gì bạn phải làm là thêm các bộ chọn: radio ,: hộp kiểm vào .not và vấn đề được giải quyết.

Nếu bạn không thể làm cho tất cả các chức năng thiết lập lại khác hoạt động, thì chức năng này sẽ hoạt động.

• Chuyển thể từ câu trả lời của ngen

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID là nhận dạng của mẫu

2. OnSuccesscủa hoạt động chúng tôi gọi hàm JavaScript với tên " ClearInput"

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. nếu bạn làm cả hai quyền này, thì bạn sẽ không thể ngăn nó hoạt động ...

Đoạn mã sau sẽ xóa tất cả các biểu mẫu và các trường của nó sẽ trống. Nếu bạn chỉ muốn xóa một biểu mẫu cụ thể nếu trang có nhiều hơn một biểu mẫu, vui lòng đề cập đến id hoặc lớp của biểu mẫu

$("body").find('form').find('input,  textarea').val('');

Nếu tôi muốn xóa tất cả các trường trừ accountType..Sử dụng các mục sau

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

mã tôi thấy ở đây và các câu hỏi SO liên quan dường như không đầy đủ.

Đặt lại một biểu mẫu có nghĩa là đặt các giá trị gốc từ HTML, vì vậy tôi kết hợp các giá trị này cho một dự án nhỏ mà tôi đang thực hiện dựa trên mã trên:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

Xin vui lòng cho tôi biết nếu tôi thiếu bất cứ điều gì hoặc bất cứ điều gì có thể được cải thiện.

Không có cách nào ở trên hoạt động trong một trường hợp đơn giản khi trang bao gồm lệnh gọi đến kiểm soát người dùng web liên quan đến xử lý yêu cầu IHttpHandler (captcha). Sau khi gửi requsrt (để xử lý ảnh), mã bên dưới không xóa các trường trên biểu mẫu (trước khi gửi yêu cầu HttpHandler), mọi thứ đều hoạt động chính xác.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

Tôi đã viết một plugin jQuery phổ quát:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

Thêm nút đặt lại ẩn như sau

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

$ ('mẫu'). submit (function () {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});