0

how can i get all child element(like radio,checkbox,select,text,...) within a form and make them blank using javascript. My form has many other elements like table,div etc. but i dont want to changes on these other element.

Any suitable idea to get these child element(form element) through the form name(frmlist) or form id(frmlist) and make them blank. Actually i have no idea previously that how many elements are there in form and what are the names/ids of these element.

Thanks a lot...

1
  • 1
    Do you have an specific need for it to be JS? Is the reset button not enough? <input type="reset" />
    – Katsuke
    Jun 14, 2011 at 6:21

6 Answers 6

1

Try something like this:

Example Form:

<form name="data_entry" action="#">
    Company Name: <input type="text" name="company_name">
    Select Business Type: <input type="radio" name="business_category" value="1"> Manufacturer
    <input type="radio" name="business_category" value="2"> Whole Sale Supplier
    <input type="radio" name="business_category" value="3"> Retailer
    <input type="radio" name="business_category" value="4"> Service Provider
    Email Address: <input type="text" size="30" name="email">
    Keep Information Private: <input type="checkbox" name="privacy">
    <input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">
    <input type="button" name="clear" value="Clear Form" onclick="clearForm(this.form);">
</form>

Example Javascript:

for (i = 0; i < frm_elements.length; i++) {
    field_type = frm_elements[i].type.toLowerCase();
    switch (field_type) {
    case "text":
    case "password":
    case "textarea":
    case "hidden":
        frm_elements[i].value = "";
        break;
    case "radio":
    case "checkbox":
        if (frm_elements[i].checked) {
            frm_elements[i].checked = false;
        }
        break;
    case "select-one":
    case "select-multi":
        frm_elements[i].selectedIndex = -1;
        break;
    default:
        break;
    }
}

From Using Javascript to Reset or Clear Form.

2
  • Hello Michael Robinson frm_elements is what ? is form name ? Jun 14, 2011 at 5:59
  • @BajrangLal: It's explained well in the tutorial I linked to Jun 14, 2011 at 6:01
1

Sometimes we forget about old solutions. Why not ditch the javascript here and use:

<input type="reset" value = "CLEAR all"/>

see this jsfiddle

5
  • Actually when page is submited using php on same page then the reset button is not working as reset. I tried it. Jun 14, 2011 at 6:26
  • That would indicate a flaw in [the rest of] your code, I suppose.
    – KooiInc
    Jun 14, 2011 at 6:35
  • @Kooilnc - This would work if all of the input elements were "blank" as per his original question. Unfortunately, type="reset" resets the form to it's original state which means that if a field already had a value in it originally (not entered by the user), it wouldn't be "blank." Jun 14, 2011 at 7:25
  • @Francois: I understand that. But the OP asked "how can i get all child element(like radio,checkbox,select,text,...) within a form and make them blank using javascript"
    – KooiInc
    Jun 14, 2011 at 7:57
  • @Kooilnc - "Blank" (or empty) isn't back to default (which is what the reset button does.) Jun 14, 2011 at 15:23
0

You should consider using jQuery. It would be as simple as doing:

$(':input')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');
3
  • Francois Deschenes ! how can i use it ? Jun 14, 2011 at 6:07
  • Go to jQuery's website and download it. Once downloaded, add a <script type="text/javascript" src="path/to/jquery.min.js"></script> in the HEAD of your page. You'll then need to add a function to an element's event to trigger the function. For example, if you want a ekement to trigger the action when you click it, you'd want $(function() { $('#buttonID').click(function() { ... }); }); where #buttonID is the ID attribute value of the element and ... is the code above. Of course you'd want the code in a <script> tag. Jun 14, 2011 at 6:10
  • @Jeff - I'm not forgetting select. All SELECT elements' values will be set to "" (an empty string). The .not() defines the types of :input not to include. jQuery defines :input as any input element including select, textarea, checkboxes, etc... Jun 14, 2011 at 6:14
0

Use the following function to get all forms elements

 function getAllFormFields(node)
   {
    var allFormFields = new Array;
    var x = node.getElementsByTagName('input');
    for (var i=0;i<x.length;i++)
    allFormFields.push(x[i]);
     var y = node.getElementsByTagName('option');
     for (var i=0;i<y.length;i++)
    allFormFields.push(y[i]);
     return allFormFields;
      }

i have been viewing quiksmode.org, the function idea is from quirksmode.org

0

The simplest method is to add a reset button to the form (per KooiInc's answer), it will return all controls to their default value with no scripting at all:

<input type="reset">

and you're done.

If you must use script (heaven knows why), call the form's reset method:

<input type="button" value="Reset" onclick="this.form.reset()">

The other part of your question is how to get all the controls in a form when it also contains other elements (forms must contain a block element as a child to be valid). HTML form elements have an elements collection that is all the controls in the form. It is a simple property access, no functions or filtering required:

var allControls = form.elements;

Simple enough. :-)

0

I know this is an old question but in case anybody came searching, a quicker oneliner code in his situation would be:

$('#frmlist')[0].reset()

Note the array accessor [0]. The element returned is the frmlist form which you then call reset() on. This resets all the fields in the form to their default value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.