'Resetting all fields in a form when it is opened

I have two forms that lies under two tabs in a portlet. When I click on tab 2 I want all fields in that form to be empty. I don't want a button. I tried with:

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

<input id="button" type="hidden" onclick="resetForm"/></p>

but the fields only becomes empty when it is clicked on.



Solution 1:[1]

Simply call:

$form.get(0).reset();

Using .get() you can fetch the DOM element from the jQuery object. The DOM element for the form (HTMLFormElement) has a reset method that will restore the form's default values.

You should put this in the click event handler for your tab 2.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1