Làm thế nào để xóa tất cả các trường nhập trong một div cụ thể với jQuery?

Question

Tôi đang cố gắng sử dụng jQuery để thực hiện một điều đơn giản: xóa các trường nhập của một nhóm trường nhập trong một div bất cứ khi nào biểu mẫu tải hoặc nếu người dùng thay đổi danh sách chọn; nhưng tôi đang có một con quỷ của một thời gian nhận được chọn để làm việc.

Thứ nhất, đây là onclick của tôi và onload gây nên:

<form name="EditGenotype" action="process_GenotypeMaint.php" method="POST" onsubmit="return false" onload=clear_fetch() > 

và trên picklists:

<SELECT multiple size=6 NAME="marker" onchange=show_marker() onclick=clear_fetch() > 

Tiếp theo, đây là yếu tố đầu vào HTML của tôi trong div Tôi muốn xóa:

<div class=fetch_results> 
     <fieldset> 
    <LEGEND><b>Edit Genotype, call 1</b></LEGEND> 
     <boldlabel>Allele_1</boldlabel><input id=allele_1_1 name=allele_1_1 size=5 > 
     <boldlabel>Allele_2</boldlabel><input id=allele_1_2 name=allele_1_2 size=5 > 
     <boldlabel>Run date</boldlabel><input id=run_date1 name=run_date1 size=10 disabled=true> 
     </fieldset> 
     <fieldset> 
    <LEGEND><b>Edit Genotype, call 2</b></LEGEND> 
     <boldlabel>Allele_1</boldlabel><input id=allele_2_1 name=allele_2_1 size=5 > 
     <boldlabel>Allele_2</boldlabel><input id=allele_2_2 name=allele_2_2 size=5 > 
     <boldlabel>Run date</boldlabel><input id=run_date2 name=run_date2 size=10 disabled=true> 
     </fieldset> 
     <fieldset> 
    <LEGEND><b>Edit Genotype, call 3</b></LEGEND> 
     <boldlabel>Allele_1</boldlabel><input id=allele_3_1 name=allele_3_1 size=5 > 
     <boldlabel>Allele_2</boldlabel><input id=allele_3_2 name=allele_3_2 size=5 > 
     <boldlabel>Run date</boldlabel><input id=run_date3 name=run_date3 size=10 disabled=true> 
     </fieldset> 
    </div> 

Cuối cùng, đây là tập lệnh của tôi:

function clear_fetch() {  

    $('#fetch_results:input', $(this)).each(function(index) { 
     this.value = ""; 
    }) 

    } 

Tuy nhiên, không có gì xảy ra ... vì vậy, tôi không được chọn đúng. Có ai nhìn thấy những gì tôi đã làm sai?

Answer 1

Fiddle:http://jsfiddle.net/simple/BdQvp/

Bạn có thể làm điều đó như vậy:

tôi đã bổ sung thêm hai nút trong Fiddle để minh họa làm thế nào bạn có thể chèn hoặc các giá trị rõ ràng trong những lĩnh vực đầu vào thông qua nút. Bạn chỉ cần chụp sự kiện onClick và gọi hàm.

//Fires when the Document Loads, clears all input fields 
$(document).ready(function() { 
    $('.fetch_results').find('input:text').val('');  
}); 

//Custom Functions that you can call 
function resetAllValues() { 
    $('.fetch_results').find('input:text').val(''); 
} 

function addSomeValues() { 
    $('.fetch_results').find('input:text').val('Lala.'); 
} 

Cập nhật:

Check-out this great answer below by Beena cũng cho một cách tiếp cận phổ cập hơn.

Answer 2

Các vấn đề về đôi mà tôi thấy. fetch_results là một lớp, không phải là một Id và mỗi chức năng không nhìn đúng.

$('.fetch_results:input').each(function() { 
     $(this).val(''); 
}); 

Chỉ cần nhớ rằng nếu bạn kết thúc bằng radio hoặc nút kiểm tra, bạn sẽ phải xóa thuộc tính đã chọn chứ không phải giá trị.

Answer 3

Thay đổi này:

<div class=fetch_results> 

Để này:

<div id="fetch_results"> 

Rồi sau nên làm việc:

$("#fetch_results input").each(function() { 
     this.value = ""; 
    })​ 

http://jsfiddle.net/NVqeR/

Answer 4

Nếu bạn muốn ở lại với một lớp cấp độ s cử tri sau đó bạn có thể làm một cái gì đó như thế này (sử dụng cùng một jfiddle từ Mahn)

$("div.fetch_results input:text").each(function() { 
    this.value = "testing"; 
})​ 

Điều này sẽ chỉ chọn các hộp nhập văn bản trong div với một lớp fetch_results.

Giống như bất kỳ jQuery nào, đây chỉ là một cách để thực hiện. Hỏi 10 người jQuery câu hỏi này và bạn sẽ nhận được 12 câu trả lời.

Answer 5

Chức năng này được sử dụng để xóa tất cả các phần tử trong biểu mẫu bao gồm nút radio, hộp kiểm, chọn, nhiều lựa chọn, mật khẩu, văn bản, văn bản, tệp.

function clear_form_elements(class_name) { 
    jQuery("."+class_name).find(':input').each(function() { 
    switch(this.type) { 
     case 'password': 
     case 'text': 
     case 'textarea': 
     case 'file': 
     case 'select-one': 
     case 'select-multiple': 
     case 'date': 
     case 'number': 
     case 'tel': 
     case 'email': 
      jQuery(this).val(''); 
      break; 
     case 'checkbox': 
     case 'radio': 
      this.checked = false; 
      break; 
    } 
    }); 
} 

Answer 6

lấy cảm hứng từ https://stackoverflow.com/a/10892768/2087666 nhưng tôi sử dụng bộ chọn thay vì một lớp học và thích nếu trên switch:

function clearAllInputs(selector) { 
    $(selector).find(':input').each(function() { 
    if(this.type == 'submit'){ 
      //do nothing 
     } 
     else if(this.type == 'checkbox' || this.type == 'radio') { 
     this.checked = false; 
     } 
     else if(this.type == 'file'){ 
     var control = $(this); 
     control.replaceWith(control = control.clone(true)); 
     }else{ 
     $(this).val(''); 
     } 
    }); 
} 

này nên chăm sóc của hầu hết các đầu vào bên trong bất kỳ công cụ chọn.

Answer 7

$.each($('.fetch_results input'), function(idx, input){ 
    $(input).val(''); 
});