¿Cómo borrar todos los campos de entrada en un div específico con jQuery?

Question

Estoy tratando de usar jQuery para hacer algo simple: borrar los campos de entrada de un grupo de campo de entrada dentro de un div siempre que se cargue el formulario, o si el usuario cambia una lista de selección; pero estoy teniendo un diablo de vez en cuando para que el selector funcione.

En primer lugar, aquí está mi onclick y onload desencadena:

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

y en las listas de selección:

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

A continuación, aquí está mi elementos de entrada HTML en el div quiero aclarar:

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

Finalmente, aquí está mi script:

function clear_fetch() {  

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

    } 

Sin embargo, no ocurre nada ... por lo tanto, no debo tener el selector correcto. ¿Alguien ve lo que he hecho mal?

Answer 1

violín:http://jsfiddle.net/simple/BdQvp/

usted puede hacerlo de esta manera:

he añadido dos botones en el violín para ilustrar cómo se puede insertar o valores claros en aquellos campos de entrada a través de botones. Simplemente capture el evento onClick y llame a la función.

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

Actualización:

Salida this great answer below by Beena así un enfoque más universal.

Answer 2

Problemas de pareja que veo. fetch_results es una clase, no un Id. Y cada función no se ve bien.

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

Sólo asegúrese de recordar que si al final con las radios o los botones de activación, tendrá que borrar el atributo está marcado, no el valor.

Answer 3

cambiar esta situación:

<div class=fetch_results> 

A esto:

<div id="fetch_results"> 

A continuación, el siguiente debería funcionar:

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

http://jsfiddle.net/NVqeR/

Answer 4

Si quería quedarse con una clase nivel s elector entonces usted podría hacer algo como esto (utilizando el mismo jfiddle de Mahn)

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

Esto seleccionará sólo los cuadros de entrada de texto dentro del div con una clase fetch_results.

Al igual que con cualquier jQuery, esta es solo una forma de hacerlo. Haga esta pregunta a 10 jQuery personas y obtendrá 12 respuestas.

Answer 5

Esta función se utiliza para borrar todos los elementos del formulario, incluidos el botón de opción, la casilla de verificación, seleccionar, selección múltiple, contraseña, texto, área de texto, archivo.

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

inspirado en https://stackoverflow.com/a/10892768/2087666 pero yo uso el selector en lugar de una clase y si prefieren sobre el interruptor:

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

esto debe hacerse cargo de casi todas las entradas dentro de cualquier selector.

Answer 7

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