Đặt lại một hình thức nhiều giai đoạn với jQuery

Tôi có một biểu mẫu với nút đặt lại tiêu chuẩn được mã hóa như vậy:

<input type="reset" class="button standard" value="Clear" />

Rắc rối là, hình thức được cho là thuộc loại nhiều giai đoạn, vì vậy nếu người dùng điền vào một giai đoạn và sau đó quay lại, các giá trị 'được nhớ' cho các trường khác nhau sẽ không được đặt lại khi nhấp vào nút Xóa.

Tôi nghĩ rằng việc gắn một hàm jQuery để lặp trên tất cả các trường và xóa chúng 'thủ công' sẽ thực hiện thủ thuật. Tôi đã sử dụng jQuery trong biểu mẫu, nhưng chỉ mới bắt kịp tốc độ & vì vậy tôi không biết phải làm thế nào về vấn đề này, ngoài việc tham chiếu riêng từng trường theo ID, có vẻ không hiệu quả lắm.

TIA cho bất kỳ trợ giúp.

cập nhật vào tháng 3 năm 2012.

Vì vậy, hai năm sau khi tôi trả lời ban đầu câu hỏi này, tôi quay lại và thấy rằng nó đã biến thành một mớ hỗn độn lớn. Tôi cảm thấy đã đến lúc tôi quay lại với nó và làm cho câu trả lời của tôi thực sự chính xác vì nó được đánh giá cao nhất + được chấp nhận.

Đối với bản ghi, câu trả lời của Titi là sai vì đó không phải là những gì người đăng ban đầu yêu cầu - chính xác là có thể đặt lại biểu mẫu bằng phương thức reset (), nhưng câu hỏi này đang cố xóa một biểu mẫu đã nhớ các giá trị sẽ vẫn ở dạng nếu bạn đặt lại theo cách này. Đây là lý do tại sao cần thiết lập lại "thủ công". Tôi cho rằng hầu hết mọi người đã kết thúc câu hỏi này từ một tìm kiếm của Google và thực sự đang tìm kiếm phương thức reset (), nhưng nó không hoạt động đối với trường hợp cụ thể mà OP đang nói đến.

Câu trả lời ban đầu của tôi là:

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

Điều này có thể hoạt động trong nhiều trường hợp, bao gồm cả OP, nhưng như được chỉ ra trong các nhận xét và trong các câu trả lời khác, sẽ xóa các thành phần radio / hộp kiểm khỏi mọi thuộc tính giá trị.

Một câu trả lời đúng hơn (nhưng không hoàn hảo) là:

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

Sử dụng :text, :radiovv selectors tự được coi là xấu thực hành bởi jQuery khi họ kết thúc việc đánh giá để *:textmà làm cho nó mất nhiều thời gian hơn cần. Tôi thích cách tiếp cận danh sách trắng và ước gì tôi đã sử dụng nó trong câu trả lời ban đầu của mình. Dù sao đi nữa, bằng cách chỉ định inputphần của bộ chọn, cộng với bộ đệm của phần tử biểu mẫu, điều này sẽ làm cho nó trở thành câu trả lời hoạt động tốt nhất ở đây.

Câu trả lời này vẫn có thể có một số sai sót nếu mặc định của mọi người đối với các phần tử được chọn không phải là một tùy chọn có giá trị trống, nhưng nó chắc chắn là chung chung như nó sẽ nhận được và điều này cần phải được xử lý trong từng trường hợp cụ thể .

Từ http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

cài đặt myinput.val('')có thể không mô phỏng "đặt lại" 100% nếu bạn có đầu vào như thế này:

<input name="percent" value="50"/>

Ví dụ, gọi myinput.val('')trên một đầu vào có giá trị mặc định là 50 sẽ đặt nó thành một chuỗi trống, trong khi gọi myform.reset()sẽ đặt lại giá trị ban đầu là 50.

Có một vấn đề lớn với câu trả lời được chấp nhận của Paolo. Xem xét:

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

Các .val('')dòng cũng sẽ xóa bất kỳ value's gán cho hộp kiểm và nút radio. Vì vậy, nếu (như tôi) bạn làm một cái gì đó như thế này:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

Sử dụng câu trả lời được chấp nhận sẽ chuyển đổi đầu vào của bạn thành:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

Rất tiếc - Tôi đã sử dụng giá trị đó!

Đây là phiên bản sửa đổi sẽ giữ giá trị hộp kiểm và radio của bạn:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

Plugin jQuery

Tôi đã tạo một plugin jQuery để tôi có thể sử dụng nó dễ dàng ở bất cứ đâu tôi cần:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

Vì vậy, bây giờ tôi có thể sử dụng nó bằng cách gọi:

$('#my-form').clear();

Xóa các hình thức là một chút khó khăn và không đơn giản như vẻ ngoài của nó.

Khuyên bạn sử dụng plugin hình thức jQuery và sử dụng nó clearForm hoặc resetForm chức năng. Nó chăm sóc hầu hết các trường hợp góc.

document.getEuityById ('frm'). reset ()

Tôi thường làm:

$('#formDiv form').get(0).reset()

hoặc là

$('#formId').get(0).reset()

Đây là một cái gì đó để bạn bắt đầu

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

Tất nhiên, nếu bạn có hộp kiểm / nút radio, bạn sẽ cần sửa đổi điều này để bao gồm cả chúng và đặt .attr({'checked': false});

chỉnh sửa câu trả lời của Paolo ngắn gọn hơn. Câu trả lời của tôi dài dòng hơn vì tôi không biết về công :inputcụ chọn, tôi cũng không nghĩ đơn giản là xóa thuộc tính đã kiểm tra.

Cân nhắc sử dụng plugin xác thực - thật tuyệt! Và hình thức thiết lập lại rất đơn giản:

var validator = $("#myform").validate();
validator.resetForm();

Tôi thấy điều này hoạt động tốt.

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

về cơ bản không có giải pháp nào được cung cấp làm tôi hài lòng. như được chỉ ra bởi một vài người, họ làm trống biểu mẫu thay vì đặt lại nó.

tuy nhiên, có một số thuộc tính javascript giúp:

• defaultValue cho các trường văn bản
• defaultChecked cho các hộp kiểm và nút radio
• defaultSelected cho các tùy chọn chọn

những giá trị này lưu trữ giá trị mà một trường có khi trang được tải.

việc viết một plugin jQuery bây giờ không quan trọng: (đối với người thiếu kiên nhẫn ... đây là bản demo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

mã plugin

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

sử dụng

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

một số ghi chú ...

• Tôi chưa xem xét các yếu tố hình thức html5 mới, một số có thể cần xử lý đặc biệt nhưng ý tưởng tương tự sẽ hoạt động.
• các yếu tố cần được tham khảo trực tiếp. tức là $( "#container" ).resetValue()sẽ không làm việc luôn luôn sử dụng $( "#container :input" )thay thế.
• như đã đề cập ở trên, đây là bản demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Bạn có thể thấy rằng điều này thực sự được giải quyết dễ dàng hơn mà không cần jQuery.

Trong JavaScript thông thường, điều này đơn giản như:

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

Tôi cố gắng luôn nhớ rằng trong khi chúng tôi sử dụng jQuery để tăng cường và tăng tốc mã hóa, đôi khi nó không thực sự nhanh hơn. Trong những trường hợp đó, tốt hơn là sử dụng phương pháp khác.

Tôi đã thực hiện một biến thể nhỏ của giải pháp tốt đẹp của Francis Lewis . Những gì giải pháp của anh ta không làm là đặt các lựa chọn thả xuống thành trống. (Tôi nghĩ rằng khi hầu hết mọi người muốn "xóa", họ có thể muốn làm cho tất cả các giá trị trống.) Cái này làm điều đó với .find('select').prop("selectedIndex", -1).

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

Tôi thường thêm một nút đặt lại ẩn vào mẫu. khi cần chỉ: $ ('# reset'). click ();

Sửa đổi câu trả lời được bình chọn nhiều nhất cho $(document).ready()tình huống:

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

Đơn giản chỉ cần sử dụng jQuery Trigger event như vậy:

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

Điều này sẽ đặt lại các hộp kiểm, radiobuttons, hộp văn bản, v.v ... Về cơ bản, nó biến biểu mẫu của bạn về trạng thái mặc định. Đơn giản chỉ cần đặt #ID, Class, elementbên trong jQuerybộ chọn.

điều này làm việc cho tôi, câu trả lời pyrotex đã không 'thiết lập lại các trường chọn, lấy của anh ấy, ở đây' chỉnh sửa của tôi:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);

Tôi đang sử dụng giải pháp Paolo Bergantino rất tuyệt vời nhưng với một vài điều chỉnh ... Cụ thể để làm việc với tên biểu mẫu thay vì id.

Ví dụ:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

Bây giờ khi tôi muốn sử dụng nó có thể làm

<span class="button" onclick="jqResetForm('formName')">Reset</span>

Như bạn thấy, điều này hoạt động với bất kỳ hình thức nào và bởi vì tôi đang sử dụng kiểu css để tạo nút, trang sẽ không làm mới khi nhấp vào. Một lần nữa cảm ơn Paolo cho đầu vào của bạn. Vấn đề duy nhất là nếu tôi có giá trị mặc định trong biểu mẫu.

Tôi đã sử dụng giải pháp bên dưới và nó hiệu quả với tôi (trộn javascript truyền thống với jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

Tôi chỉ là một người trung gian trong PHP và hơi lười biếng để đi sâu vào một ngôn ngữ mới như JQuery, nhưng đây không phải là một giải pháp đơn giản và thanh lịch?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

Không thể thấy lý do tại sao không có hai nút gửi, chỉ với các mục đích khác nhau. Sau đó, đơn giản là:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

Bạn chỉ cần xác định lại các giá trị của bạn trở lại bất cứ giá trị mặc định nào.

Một phương pháp tôi đã sử dụng trên một biểu mẫu khá lớn (hơn 50 trường) là chỉ tải lại biểu mẫu bằng AJAX, về cơ bản thực hiện cuộc gọi trở lại máy chủ và chỉ trả về các trường với các giá trị mặc định của chúng. Điều này được thực hiện dễ dàng hơn nhiều so với việc cố gắng lấy từng trường bằng JS và sau đó đặt nó thành giá trị mặc định. Nó cũng cho phép tôi giữ các giá trị mặc định ở một nơi - mã của máy chủ. Trên trang web này, cũng có một số giá trị mặc định khác nhau tùy thuộc vào cài đặt cho tài khoản và do đó tôi không phải lo lắng về việc gửi chúng cho JS. Vấn đề nhỏ duy nhất tôi phải giải quyết là một số trường đề xuất yêu cầu khởi tạo sau cuộc gọi AJAX, nhưng không phải là vấn đề lớn.

Tất cả những câu trả lời này đều tốt nhưng cách dễ nhất tuyệt đối là với thiết lập lại giả, đó là bạn sử dụng một liên kết và nút đặt lại.

Chỉ cần thêm một số CSS để ẩn nút thiết lập lại thực sự của bạn.

input[type=reset] { visibility:hidden; height:0; padding:0;}

Và sau đó trên liên kết của bạn, bạn thêm như sau

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

Hi vọng điêu nay co ich! A.

<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

Ở đây với việc làm mới cho các hộp kiểm và chọn:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

Tôi đã có cùng một vấn đề và bài viết của Paolo đã giúp tôi, nhưng tôi cần phải điều chỉnh một điều. Biểu mẫu của tôi với id advancedindexsearch chỉ chứa các trường đầu vào và nhận các giá trị từ một phiên. Vì một số lý do, những điều sau đây không phù hợp với tôi:

$("#advancedindexsearch").find("input:text").val("");

Nếu tôi đặt một cảnh báo sau đó, tôi sẽ thấy các giá trị được loại bỏ một cách chính xác nhưng sau đó chúng lại được thay thế. Tôi vẫn không biết làm thế nào hoặc tại sao nhưng dòng sau đây đã làm điều đó cho tôi:

$("#advancedindexsearch").find("input:text").attr("value","");

Câu trả lời của Paolo không giải thích cho người chọn ngày, hãy thêm câu này vào:

$form.find('input[type="date"]').val('');

Tôi đã cải thiện một chút về câu trả lời ban đầu của Paolo Bergantino

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

Theo cách này, tôi có thể chuyển bất kỳ phần tử ngữ cảnh nào cho hàm. Tôi có thể đặt lại toàn bộ biểu mẫu hoặc chỉ một nhóm trường nhất định, ví dụ:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

Thêm vào đó, các giá trị mặc định của các đầu vào được giữ lại.

đây là giải pháp của tôi, cũng hoạt động với các kiểu đầu vào html5 mới:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

Bổ sung cho câu trả lời được chấp nhận, nếu bạn sử dụng plugin SELECT2, bạn cần nhớ lại tập lệnh select2 để thực hiện thay đổi là tất cả các trường select2:

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);