Here I am displaying a javascript code that can clear all the controls on the form or a specific div or table.
function ClearTextbox(ParentControl) {
var control = $(ParentControl).get(0);
var list = control.getElementsByTagName("input");
var textAreaList = control.getElementsByTagName("textarea");
var selectList = control.getElementsByTagName("select");
for (var i = 0; i < list.length; i++) {
var attr = list[i].getAttribute('type');
var control = document.getElementById(list[i].id);
switch (attr) {
case "text":
$(control).val('');
break;
case "hidden":
$(control).val('');
break;
case "checkbox":
control.checked = false;
break;
case "radio":
control.checked = false;
break;
case "range":
control.setAttribute('value', '0');
break;
case "file":
control.setAttribute('value', '');
break;
}
}
for (var i = 0; i < textAreaList.length; i++) {
var control = document.getElementById(textAreaList[i].id);
$(control).val('');
}
for (var i = 0; i < selectList.length; i++) {
$(selectList[i]).val('');
}
}
Make a Call to the function.
<script>
$('#btnClear').click(function (e) {
e.preventDefault();
ClearTextbox('#form');//Pass the Parent control ID of Controls u want to clear
//Here I have Passes the ID of the forms tag clear all the controls in the form.
//In Case you want to clear only the contents in a Particular div or table, we can pass the ID of that div or //table and it will clear the elements only in that div or table.
});
</script>
