본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
  1. 튜토리얼
  2. 브라우저: 문서, 이벤트, 인터페이스
  3. 폼과 폼 조작
2021년 5월 1일

submit 이벤트와 메서드

See More

submit 이벤트는 폼을 제출할 때 트리거 되는데, 주로 폼을 서버로 전송하기 전에 내용을 검증하거나 폼 전송을 취소할 때 사용합니다.

한편, form.submit() 메서드는 자바스크립트만으로 폼 전송을 하고자 할 때 사용합니다. submit()메서드는 동적으로 폼을 생성하고 서버에 보내고자 할 때 사용합니다.

개괄적인 설명은 여기서 마치고 이제 submit 이벤트와 메서드에 대해 자세히 살펴봅시다.

submit 이벤트

폼을 전송하는 방법은 크게 두 가지가 있습니다.

  1. <input type="submit">이나 <input type="image"> 클릭하기
  2. 인풋 필드에서 Enter 키 누르기

두 방법 모두 폼의 submit 이벤트를 트리거합니다. 이벤트 핸들러에선 데이터를 체크하는데, 데이터에 에러가 있는 경우 에러를 출력한 다음 event.preventDefault()를 호출하곤 합니다. 이렇게 되면 폼은 서버에 전송되지 않습니다.

아래 폼에서 두 동작을 각각 수행해 보세요.

  1. 텍스트 필드로 이동해 Enter 키를 누릅니다.
  2. <input type="submit">을 클릭합니다.

참고로 두 동작 모두 alert 창을 보여주는데, return false 때문에 폼은 전송되지 않습니다.

<form onsubmit="alert('submit!');return false">
  1. input 필드에 포커스를 준 다음 Enter 키 누르기: <input type="text" value="text"><br>
  2. '제출' 버튼 누르기: <input type="submit" value="제출">
</form>
submit과 click의 관계

input 필드에서 Enter 키를 눌러 폼을 전송하면 <input type="submit">에 있는 click 이벤트가 트리거 됩니다.

클릭을 하지 않았는데도 click 이벤트가 트리거 되니까 좀 이상해 보이긴 하네요.

데모를 살펴봅시다.

<form onsubmit="return false">
 <input type="text" size="30" value="여기에 포커스를 준 다음에 Enter 키 누르기">
 <input type="submit" value="제출" onclick="alert('클릭 이벤트가 트리거 되었습니다!')">
</form>

submit 메서드

form.submit()을 호출하면 자바스크립트로 직접 폼을 서버에 전송할 수 있습니다.

form.submit() 메서드가 호출된 다음엔 submit 이벤트는 생성되지 않습니다. 개발자가 form.submit()을 호출했다면 스크립트에서 이미 필요한 모든 조치를 했다고 가정하기 때문입니다.

이런 submit 메서드의 특징은 다음과 같이 폼을 직접 만들고 전송하길 원할 때 응용할 수 있습니다.

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="테스트">';

// 폼을 제출하려면 반드시 폼이 문서 안에 있어야 합니다.
document.body.append(form);

form.submit();

과제

Modal form

중요도: 5

Create a function showPrompt(html, callback) that shows a form with the message html, an input field and buttons OK/CANCEL.

  • A user should type something into a text field and press Enter or the OK button, then callback(value) is called with the value they entered.
  • Otherwise if the user presses Esc or CANCEL, then callback(null) is called.

In both cases that ends the input process and removes the form.

Requirements:

  • The form should be in the center of the window.
  • The form is modal. In other words, no interaction with the rest of the page is possible until the user closes it.
  • When the form is shown, the focus should be inside the <input> for the user.
  • Keys Tab/Shift+Tab should shift the focus between form fields, don’t allow it to leave for other page elements.

Usage example:

showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});

A demo in the iframe:

P.S. The source document has HTML/CSS for the form with fixed positioning, but it’s up to you to make it modal.

샌드박스를 열어 정답을 작성해보세요.

A modal window can be implemented using a half-transparent <div id="cover-div"> that covers the whole window, like this:

#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}

Because the <div> covers everything, it gets all clicks, not the page below it.

Also we can prevent page scroll by setting body.style.overflowY='hidden'.

The form should be not in the <div>, but next to it, because we don’t want it to have opacity.

샌드박스를 열어 정답을 확인해보세요.

이전 주제다음 주제
튜토리얼 지도

댓글

댓글을 달기 전에 마우스를 올렸을 때 나타나는 글을 먼저 읽어주세요.
  • 추가 코멘트, 질문 및 답변을 자유롭게 남겨주세요. 개선해야 í•  것이 있다면 댓글 대신 이슈를 만들어주세요.
  • 잘 이해되지 않는 부분은 구체적으로 언급해주세요.
  • 댓글에 í•œ 줄짜리 코드를 삽입하고 싶다면 <code> 태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면 <pre> 태그를 이용하세요. 10줄 이상의 코드는 plnkr, JSBin, codepen 등의 샌드박스를 사용하세요.

챕터

주제 탐색

공유
GitHub에서 수정하기