Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
Tags
- 깃허브 연동
- dbeaver 백업/복구
- Quartz 라이브러리
- 자바 swing 프로젝트
- 깃허브 토큰 생성
- Jenkins
- 깃허브 토큰 발급
- git 폴더 모으기
- CI/CD
- 소프트웨어
- submit 기본동작
- document 함수
- .ppk
- Node Property
- Quartz dependency
- EL1021E
- 배열 call by value
- 클래스 참조
- deploy.sh
- 환경변수
- 채팅 프로젝트
- css 리셋
- ..gitignore
- 테스팅
- 배포 자동화
- AWS 생성
- reset
- firstChild
- 타임리프 참조 오류
- 되돌리기
Archives
- Today
- Total
TY blog
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로 변경해 기능사용을 막지만, 다음 버튼 클릭이 동작하지 않는다.
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
HTML 요소 Node Property 정리, Element 요소 선택하기 (0) | 2024.01.26 |
---|---|
HTML 요소 선택 JS 함수 정리 (0) | 2023.12.31 |
onfocus, onblur 이벤트 (0) | 2023.09.22 |
JavaScript 이미지 규격 체크 onload 함수 (0) | 2023.03.13 |
js 정규식 문자열 변환 (1) | 2023.01.28 |
Comments