2021-02-25 TIL(at work)
요청 사항 파악
- 어떤 정보를 검색할 때, 여러 가지 값을 넣고 이에 해당하는 정보를 제공하는 서비스가 있다. 사용자가 입력한 정보를 모두 초깃값으로 변경하는, ‘초기화’ 버튼을 추가해달라는 요청을 받았다.
- 어떤 값들을 초기화해야 하는지 명확하지 않아 기획자와 상의해본 결과, 가장 상위 카테고리는 변경하지 않고 사용자가 입력한 세부 내용만 초기화 하면 될 것 같다는 답변을 받았다.
해결 방안 탐색
- 어떤 값들을 초기화해야하는지 데이터의 범위를 정한 후, 해당 값들을 초깃값으로 변경하는
javaScript코드를 작성하고, 이를html파일에 적용한다. - 사용자가
<input>태그에 입력한 값을 초기화하는 방법에 대해 검색해 보았는데, 리셋 기능을 가진 버튼을 넣을 수 있었다. 하지만 아래와 같은 버튼으로 초기화 기능을 수행하기 위해서는, 초기화하려는 값들이<form>태그로 묶여있는 상태여야만 했다. 기존 소스는 해당 값들이<form>태그로 묶여 있지 않았기 때문에 다른 방법을 찾아보기로 했다.
<input type="reset" value="초기화">
- 사용자가 입력한 값을 삭제해야 하는 데이터의 종류에는
text와select가 있었다. 각각의 타입에서 어떤 코드를 통해 값을 초깃값으로 바꿀 수 있을지 알아본다.text의 경우 전체 텍스트를''(빈 문자열)로 치환하는 것이 가장 짧고 간단할 것 같았다.select는 처음에 선택된 값에attr()을 이용하여selected라는 옵션을 주면 될 것 같았다.
해결 과정
1번째 시도
- 먼저 초기화 버튼을 만들고, id를
btnReset으로 주었다.
<button id="btnReset">초기화</button>
- 그리고 btnReset 버튼을 클릭했을 때 일어나는 이벤트 코드를 작성했다.
$('#btnReset').click(function(){
$('#text').val('');
S('#selected').attr('selected','selected');
}
- 결과 : 실패,
btnReset을 클릭했을 때, 사용자가 입력한text값을 없애는 것은 성공했지만,select값을 처음 값으로 바꾸는 데에는 실패했다. 특히 이 버튼을 딱 한 번만 사용할 때는 초기화 버튼이 처음 의도대로 작동하는 듯 했으나, 여러 군데에 초기화 버튼을 넣으면 모든 곳에서 제대로 작동하지 않았다.
2번째 시도
- text만 없애는 초기화 버튼과,
text와select값을 없애야 하는 초기화 버튼을 따로 구현하기로 하였다. 중복된 코드를 작성하는 것을 지양하고 싶었지만, 내가 생각해낼 수 있는 최선의 방법이었다. 따라서btnReset1과btnReset2를 만들었다.
$('#btnReset1').click(function(){
$('#text').val('');
}
$('#btnReset2').click(function(){
$('#text').val('');
S('#selected').attr('selected','selected');
}
- 이렇게 할 경우, 초기화 버튼을 넣는 곳마다 초기화할 데이터를 일일이 초기화하는 코드를 작성해야 했다. 그래서 방식을 변경하기로 했다. 군데군데를
<form>태그로 묶고, 같은 아이디를 부여한 후, 그 아이디에 대해 초기화하도록 이벤트를 생성하기로 했다.
<form id="from">
...
</form>
<form id="from">
...
</form>
$('#btnReset1').click(function(){
$('form').reset();
}
-
그런데 문제는,
<form>태그는 블럭타입이라 원치않는 곳에서 줄바꿈이 일어난다는 것이었다. 그래서"style="display:inline"이라는 옵션 값을 추가했다. -
결과 : 성공, 조금 비효율적인 코드를 작성한 느낌이 들었지만 일단 기획실에서 원하던대로 기능을 구현하는 데는 성공했다. 추후 조금 더
javaScript에 대해 공부를 하면서 처음에 시도했던 방식으로 더 나은 코드를 작성할 수는 없었을지 알아봐야겠다.