HTML - Input태그에서 엔터 키입력시 submit 동작 현상 막기(form태그 내부 input태그 키입력)

form태그 내부에 input태그가 단일로 존재하면 엔터 입력시 submit동작이 이루어지는걸 알고 계셨나요?

 

input, button태그 하나씩 구성된 form태그를 만들고 이벤트를 작성중이였습니다.

button태그 타입도 submit이 아닌 button으로 지정하였고, js에 key event도 작성하지 않았는데, input에 글을 입력하고 엔터키를 누르면 자동으로 submit동작이 발생하였습니다.(저는 ajax를 통해 데이터를 처리하고 싶었습니다!)

 

다음은 문제가 발생한 코드 예제입니다.

<form name="agencyAddForm" action="" autocomplete="off">
    <div class="form-group m-t-10">
        <label class="control-label col-md-2 col-sm-2 col-xs-2">회사명</label>
        <div class="col-md-8 col-sm-8 col-xs-8">
            <input type="text" id="agencySearchName" class="form-control">
        </div>
        <div class="col-md-2 col-sm-2 col-xs-2">
            <button type="button" id="agencySearchBtn" class="btn btn-success btn-sm">찾기</button>
        </div>
    </div>
</form>

(부트스트랩을 사용하였기에 class가 많습니다.)

다른 내용은 볼 필요가 없고 form태그 내부를 보시면 input태그는 단일 한개가 존재하고 있습니다.

form내부에 input태그가 한개만 존재하면 자동으로 submit동작이 발생한다고 합니다.

 

해결방법

- onsubmit="return false;" 속성 추가하기

<form name="agencyAddForm" action="" autocomplete="off" onsubmit="return false;">
	...
</form>

이를 방지하기 위해 form태그 내부에 onsubmit이벤트를 추가하였습니다.

 

그외 방법으로 불필요한 input text태그를 숨기거나, hidden태그등을 넣어도 되지만, submit동작을 사용하진 않을거라 막아두었습니다.

 

 

ps. 신입때도 form태그 내부에 button태그에 type을 지정을 안하고 기본 동작인 submit동작이 되어서 고생했던 기억이 있는데, 역시 기초가 중요한것 같습니다!!!

1. form태그에 input이 하나만 있으면 엔터입력시 자동으로 submit이 동작한다.

2. form태그에 button이 있고 type지정을 안하면 submit이 동작한다.

 

2가지만 기억하시면 시간낭비가 줄어드실거 같습니다😙