[jQuery]form 초기화

input 필드 초기화를 위해 $("#id").val() 또는 $("#id").empty() 등 상황에 따라 방법이 다양하지만 간단한 방법을 한가지 소개해보려고 합니다.

---

reset() 메소드

form의 아이디가 frmW인 경우 아래와 같이 한다면,

$("#frmW")[0].reset();

frmW의 안에 있는 input(+file 타입), select, check, , textarea 까지 모든 내용이 초기화가 된다.

<form id="frmW" method="POST"> 
<div class="container-fluid">
<table class="table table-borderless">
	<thead>
	  	<tr>
			<th colspan="2">						
				<h4><strong>메일작성</strong></h4>
			</th>			      			    
		</tr>
		<tr class="border-top">
			<th colspan="2">
				<button type="button" class="btn btn-outline-secondary" onclick="fnct_SendMail('S')">보내기</button>
				<button type="button" class="btn btn-outline-secondary" onclick="fnct_SendMail('U')">임시저장</button>
				<button type="button" class="btn btn-outline-secondary" onclick="fnct_MailReset()">초기화</button>			
			</th>									    
		</tr>
	</thead>
	<colgroup>
		<col width="10%" />
		<col width="" />
	</colgroup>				
	<tbody>				  		
  		<tr>
    		<th>제목</th>
    		<td><input type="text" class="form-control" name="mailTitleW" id="mailTitleW"></td>			    		
  		</tr>
  		<tr>
    		<th>받는사람</th>
    		<td>    			
      			<div class="input-group">
    				<div class="input-group-prepend">
	          			<div class="input-group-text" onclick="fnct_GetUsermail('toUserW')"><img src="/images/address.png" class="w18-h18"></div>
	        		</div>
	        		<input type="text" class="form-control" id="toUserW" placeholder="">
    			</div>    			
    		</td>
  		</tr>
  		<tr>
    		<th>참조(CC)</th>
    		<td>
    			<div class="input-group">
    				<div class="input-group-prepend">
	          			<div class="input-group-text" onclick="fnct_GetUsermail('ccUserW')"><img src="/images/address.png" class="w18-h18"></div>
	        		</div>
	        		<input type="text" class="form-control" id="ccUserW" placeholder="">
    			</div>  
    		</td>	    		
  		</tr>			  		  		
  		<tr>
    		<th>첨부</th>
    		<td>    	    			
    			<div class="input-group">					 
					<table class="table table-bordered table-sm">
						<thead class="thead-light text-center">
					    	<tr>
						   		<th>No</th>
					      		<th>파일명</th>
						   		<th>크기(Bytes)</th>
						   		<th>수정</th>				      		
						   	</tr>
						   	<tr>
						   		<th class="text-center" colspan="4">
						   			<input type="file" class="form-control" multiple="multiple" id="mailFileW" name="mailFileW[]">	
						   		</th>				      						     
						   	</tr>
						</thead>
						<tbody id="fileListW" class="text-center"></tbody>					
					</table>
				</div>
    		</td>    		
  		</tr>
  		<tr>
  			<td colspan="2">
  				<textarea class="form-control" name="mailContentW" id="mailContentW" style="height: 400px"></textarea>
  			</td>
  		</tr>				  				  
	</tbody>
</table>
</div>
</form>

 

초기화 전

초기화 후

(파일 리스트가 보여지는 건.. 파일 선택시 선택된 파일의 리스트를 그려주는 기능을 넣었는데 아마 이 부분은 table을 그려주기 때문에 reset() 함수 이외에 추가로 지워주는 기능을 넣어야할 것 같다)

---

+ 피드백은 언제나 환영입니다 :)