자바스크립트 폼 리셋

<form id="form1">의 폼 리셋이 필요할 경우 아래와 같은 방법으로 리셋하면 간단히 해결 할 수 있다.

document.getElementById('form1').reset()
document.forms[0].reset();
document.forms['forms1'].reset();
document.forms.form1.reset();


그런데 이 방법이 먹히질 않거나
필요한 요소만 골라서 리셋을 해야할 경우가 있다.

리셋이 필요한 elememt를 골라서 리셋하려면,
if(document.form1.elements[index].type == 'typename')
일일히 찾아서 지정할 수 밖에 없다.



<form id="form1">
...
</form>
<button onclick="clearFields();">Clear All</button>

<script type="text/javascript">
function clearFields() {
    var frm = document.getElementById('form1');
    var em = frm.elements;
    frm.reset();
    for(var i=0; i<em.length; i++) {
        if(em[i].type == 'text') em[i].value = '';
        if(em[i].type == 'checkbox') em[i].checked = false;
        if(em[i].type == 'radio') em[i].checked = false;
        if(em[i].type == 'select-one') em[i].options[0].selected = true;
        if(em[i].type == 'textarea') em[i].value = '';
    }
    return;
}
</script>



input type="text", input type="checkbox", input type="radio" 등은
각각의 type명이 type속성과 동일하지만,
골때리게도 <select>의 타입명은 select-one 이다.