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

Question

Hi all,

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

TIA for any helpful links or advice.

David

Edit to add link to example solution code. Many thanks to Guffa and the other respondents! I learned from this! Peace.

Answer 1

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

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

Oh boy, this would be a one liner with jQuery:

$(':input:not(:button)', div).val([])

Without jQuery you've got to account for <select> fields, text fields, password fields and radio/checkbox fields:

function clearFields(container) {
    var selects = container.getElementsByTagName('select');

    for(var i=0, len=selects.length; i < len; i++) {
        selects[i].selectedIndex = -1;
    }

    var fields = container.getElementsByTagName('input');
    for(var i=0, len=fields.length; i < len; i++) {
        var field = fields[i];
        switch(field.type)
        {
            case 'radio':
            case 'checkbox':
                field.checked = false;
                break;

            case 'text':
            case 'password':
            case 'hidden':
                field.value = ''
        }
    }

    var fields = container.getElementsByTagName('textarea');
    for(var i=0, len=fields.length; i < len; i++) {
        fields[i].value = ''
    }
}

Answer 4

Very simple with JQuery:

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

$(this).val('');

});

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