Form submit 기본흐름 제어

1. input type="submit"

 

 - HTML 양식에서 사용되는 입력 유형 중 하나로 이 입력 유형은 사용자가 양식을 제출할 때 사용되는 버튼으로 form 안에 데이터를 지정한 서버(action의 경로)로 전송하는 역할을 한다. 

 

<!-- submit의 기본 구성 -->
<form action="/" method="post">
	<input type="text" id="idTxt" />
	<input type="submit" id="submitBtn" value="제출">
</form>

 

2. submit 버튼에 onclick 이벤트가 같이 부여된 경우 동작흐름

 

 - submit 버튼에 onclick 이벤트가 같이 부여된 경우 onclick 이벤트가 실행되고 마지막에 submit 기능이 수행된다. 

 

<!-- submit의 기본 구성 -->
<form action="/" method="post">
	<input type="text" id="idTxt" />
	<input type="submit" id="submitBtn" onclick="testSubmit()" value="제출">
</form>

<script>
    function testSubmit(){
        alert("button test");
    }
</script>

<!--button test 출력 후 "/" 경로의 서버로 요청 -->

 

3. submit 버튼이 포함된 form 태그에 있는 Text 필드에 Enter 쳐보기 

 

 - 결과적으로 Text 필드가 focus 된 상태에서 Enter 입력 시 submit 버튼이 클릭된 것처럼 함수가 동작하고 서버로 요청되는데 HTML 기본 동작 흐름으로 가장 가까운 submit 버튼을 클릭하는 것으로 간주된다. 

 

* Text 필드 Focus 상태 Enter 이벤트 -> submit click 이벤트 Trigger 

 

submit 기본동작 제어하기

 

1. event.preventDefault() 

 

<button type="submit" onclick="event.preventDefault(); testSubmit()">Submit</button>

 

2. submit -> button으로 타입 변경 

 

<button type="button" onclick="testSubmit()">Submit</button>

 

3. 함수 수행이 종료되고 disabled 속성 사용하기 

 

function testSubmit(){
    let btn = document.getElementById("submitBtn");
    alert("button test");
    btn.disabled = true;
 }

 

이 방법은 disabled 속성을 true로 변경해 기능사용을 막지만, 다음 버튼 클릭이 동작하지 않는다.