Simple way to clear the value of any input inside a div?

Question

Is there a simple way to iterate over the child elements in an element, say a div, and if they are any sort of input (radio, select, text, hidden...) clear their v

Answer 1

Use the following code to clear all type of input form elements value

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

Answer 2

I suppose that you want to clear all children, not only the direct children, so it would have to be recursive. As different input elements is cleared differently, you have to check their type so that you know what to do with them. I suppose that you want to clear textareas also, but leave buttons unchanged:

function clearChildren(element) {
   for (var i = 0; i < element.childNodes.length; i++) {
      var e = element.childNodes[i];
      if (e.tagName) switch (e.tagName.toLowerCase()) {
         case 'input':
            switch (e.type) {
               case "radio":
               case "checkbox": e.checked = false; break;
               case "button":
               case "submit":
               case "image": break;
               default: e.value = ''; break;
            }
            break;
         case 'select': e.selectedIndex = 0; break;
         case 'textarea': e.innerHTML = ''; break;
         default: clearChildren(e);
      }
   }
}

Call it with a reference to the element:

clearChildren(document.getElementById('IdOfTheDiv'));

Edit:
Forgot the select...

Edit 2:
Some corrections: childNodes.length, handling elements without tagName and uppercase tagName values.

Answer 3

Very simple with JQuery:

$('#myDiv').children().find('input,select').each(function(){
   $(this).val('');
});

We can put as many tags in the "find" call.

Answer 4

Karim's answer works well. Using jQuery, I believe it'll go something like this:

$("#myDiv").each(function(){
   if($(this).type == "input")
      $(this).val('');
});

Actually, come to think of it, you may also try:

$("#myDiv input").val('');//myDiv is your Div name

Answer 5

This is an old post but someone can see it.

function clearFields(divElement) {
    var ancestor = document.getElementById(divElement),
    descendents = ancestor.getElementsByTagName('*');

    var i, e, d;
    for (i = 0; i < descendents.length; ++i) {
        if (descendents[i].tagName.toLowerCase() == 'input'){
            switch (descendents[i].type){
                case 'text':
                case 'password':
                case 'color':
                case 'date':
                case 'email':
                case 'month':
                case 'number':
                case 'range':
                case 'search':
                case 'tel':
                case 'time':
                case 'url':
                case 'week':
                    descendents[i].value = '';
                    break;

                case 'radio':
                case 'checkbox':
                    descendents[i].checked = false;
            }
        }
        else if (descendents[i].tagName.toLowerCase() == 'select'){
            descendents[i].selectedIndex = 0;
        }
    }   
}

and to use it:

clearFields ('divName');

Of course you can add more elements to rest it

Answer 6

Kudos, Haresh! Small addition to uncheck checkboxes. (Use true to check all.)

$('#myDiv').children().find('input,select').each(function(){

$(this).val('');
$(this).attr('checked',false);

});