Not able to reset form

I'm trying to reset my form. My reset button is for some reason not working:

<input id="btn_clearForm" type="reset" name="clearForm" value="Clear" />

So I've created this function to do the work:

jQuery('.clearButton').live('click',function () {
  clearForm(jQuery('#brand_data_form')); 
});

function clearForm(form) {
  jQuery(':input[type=text], :input[type=textarea]', form).val('');
  jQuery(':input[type=checkbox]', form).attr('checked', false);
  jQuery('select', form).attr('selectedIndex', -1);
  alert('test'); // <- At this point, the form is开发者_开发百科 cleared
}

The problem is that after the clearForm function has run, the data is put back into the form.

I've added the alert so that I can monitor the clearing, and each form field is reset. But when it's finished, it all gets populated again.

I don't understand what's wrong here.

A 'reset' button will reset the form to the initial values. You're looking to 'clear' the form, which is quite a bit different. Since you're attaching your "clear" function to the "reset" button, the two functions would appear to be conflicting. I'd change your input to type button and that should clear it up (no pun intended).

<input id="btn_clearForm" type="button" name="clearForm" value="Clear" />