[javascript] form.reset()의 input hidden 초기화 문제

출처 :gracefullight.dev/2016/12/26/form-reset-%EC%9D%98-input-hidden-%EC%B4%88%EA%B8%B0%ED%99%94-%EB%AC%B8%EC%A0%9C/

 

Javascript 의 form 의 reset() 메소드는 hidden field 와 check, radio button 에 대해 초기화를 시켜주지 않는다. 

따라서 form 의 모든 field 를 초기화 시키려면 아래의 메소드가 필요하다.

 

$('#form').clearForm();

$.fn.clearForm = function () {
  return this.each(function () {
    var type = this.type,
      tag = this.tagName.toLowerCase();
    if (tag === 'form') {
      return $(':input', this).clearForm();
    }
    if (
      type === 'text' ||
      type === 'password' ||
      type === 'hidden' ||
      tag === 'textarea'
    ) {
      this.value = '';
    } else if (type === 'checkbox' || type === 'radio') {
      this.checked = false;
    } else if (tag === 'select') {
      this.selectedIndex = -1;
    }
  });
};

Javascript 의 form 의 reset() 메소드는 이미 바꾼 hidden type의 element의 값을 초기화 하지 않는다.

ex) <input type="hidden" name="aaa" id="aaa">

$('#aaa').val('bbb');  // 설정 후 

$("#consumerInfoForm")[0].reset();  // 하더라도 $('#aaa').val()의 값은 'bbb'이다.