[JQUERY] INPUT 박스 한번에 초기화하는 방법, form 초기화

안녕하세요, 오늘은 JQUERY에서 전체 INPUT BOX를 초기화하는 방법에 대해서 알아보도록 하겠습니다.

 

1. form 한 번에 초기화하는 방법 1

$('#form-name')[0].reset();

<form id="frm-reset">
  <div><input type="text" value="input box1"></div>
  <div><input type="text" value="input box2"></div>
  <div><input type="text" value="input box3"></div>
  <div>
      <select id="selectBox1">
        <option>select1</option>
        <option>select2</option>
        <option>select3</option>
      </select>     
      <select id="selectBox2">
        <option>select4</option>
        <option>select5</option>
        <option>select6</option>
      </select>     
  </div>
  <div>
    라디오1<input type="radio" name="radioBox">
    라디오2<input type="radio" name="radioBox">    
  </div>
</form>
<button id="reset">초기화하기</bitton>

$("#reset").click(function(){
  $("#frm-reset")[0].reset();
});

See the Pen Untitled by seo (@seungbly) on CodePen.

 

 

---

---

2. form 한 번에 초기화하는 방법 2

<form id="frm-reset">
  <div><input type="text" value="input box1"></div>
  <div><input type="text" value="input box2"></div>
  <div><input type="text" value="input box3"></div>
  <div>
      <select id="selectBox1">
        <option>select1</option>
        <option>select2</option>
        <option>select3</option>
      </select>     
      <select id="selectBox2">
        <option>select4</option>
        <option>select5</option>
        <option>select6</option>
      </select>     
  </div>
  <div>
    라디오1<input type="radio" name="radioBox">
    라디오2<input type="radio" name="radioBox">    
  </div>
  <div><input type="reset"></div>
</form>

See the Pen Untitled by seo (@seungbly) on CodePen.

 

 

<input type="reset">

주의사항으로는 form태그 안에 위치해 있어야 한다.