[JavaScript] Form submission

<div id="login-form">
      <input type="text" placeholder="what is your name?"/>
      <button>Log In</button>
</div>

html에서 input 태그를 통해 입력을 받고

버튼을 눌러 이벤트가 발생할 수 있도록 함

function onLoginBtnClick() {
  const username = loginInput.value;
  if (username === "") {
    alert("Please write your name");
  } else if(username.length > 15){
    alert("Your name is too long.")
  }
}

자바스크립트에서 유효성 검사와 함께 클릭 이벤트가 발생했을 때의 동작을 정의해 줌

아무것도 입력하지 않고 로그인 버튼을 누를 경우 alert 창이 뜨는 것을 확인 할 수 있음

html에서 form 태그를 활용하여 추가적인 기능들을 사용할 수 있음

form 태그를 활용하면 자바스크립트의 코드를 줄일 수 있고 html에서 제공하는 기능을 사용할 수 있다는 장점이 있음

<form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="what is your name?"
      />
      <input type="submit" value="Log In" />
    </form>

위에서 사용했던 div 태그를 form 으로 변경하고 필수(required) 조건임과 최대 길이(maxlength)가 15인 조건을 추가할 수 있음

아무것도 입력하지 않은 채로 제출하게 된 경우 위와 같이 나오게 됨

또한 엔테 입력 시에 자동으로 form 제출할 수 있음

function onLoginBtnClick() {
  const username = loginInput.value;
  console.log(username);
}

하지만 폼을 제출할 때마다 브라우저가 새로고침 되는 문제가 있음

// 모든 이벤트 리스너 함수의 첫 번째 인자는 항상 지금 막 벌어진 일들에 대한 정보
function onLoginSubmit(event) { // 보통 event로 작성하는 것이 관행
  event.preventDefault(); // 어떤 이벤트의 기본 행동이 발생하지 않도록 막음 -> submit의 경우 새로고침
  console.log(event);
}

방금 실행된 이벤트에 대한 여러 정보를 포함하고 있음

submit의 주체는 input과 같은 정보

제출(log in을 클릭하거나 엔터키 입력)을 하더라도 새로고침이 되지 않음

input으로 유저의 이름을 입력받아 입력창은 숨기고 입력한 값을 보여주기

<h1 id="greeting" class="hidden"></h1>

html파일에 태그 생성

.hidden {
    display: none;
}

CSS에 숨김 스타일 생성

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault(); // 어떤 이벤트의 기본 행동이 발생하지 않도록 막음 -> submit의 경우 새로고침
  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);
  localStorage.setItem(USERNAME_KEY, username);
  greeting.classList.remove(HIDDEN_CLASSNAME);
  greeting.innerText = `Hello ${username}`;
}

중복되서 작성되는 string인 hidden을 변수로 생성해주어 클래스 이름 지정

const savedUsername = localStorage.getItem("username");

if (savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  // show the greetings
  greeting.classList.remove(HIDDEN_CLASSNAME);
  greeting.innerText = `Hello ${savedUsername}`;
}

로컬 스토리지에 username 정보가 없는 경우 input을 받고,

username이 있는 경우는 저장되어있는 값을 보여준다

이때 form 태그와 h1 태그에는 모두 hidden을 포함하고 있다가 로컬스토리지를 확인 한 후에 해당 클래스를 제거하거나 그대로 둔다

위의 코드에서

greeting.classList.remove(HIDDEN_CLASSNAME);
greeting.innerText = `Hello ${username}`;

부분이 중복되고 있기 때문에 하나의 함수로 만들어 코드의 유지보수성을 높일 수 있다

// h1 태그에 username을 삽입해주는 부분 중복 -> 함수 생성
function paintGreetings(username) {
  greeting.classList.remove(HIDDEN_CLASSNAME);
  greeting.innerText = `Hello ${username}`;
}

함수를 생성하고 각 부분에 함수로 대체해준다

자바스크립트 부분을 다음과 같이 작성할 수도 있다

// 모든 이벤트 리스너 함수의 첫 번째 인자는 항상 지금 막 벌어진 일들에 대한 정보
function onLoginSubmit(event) {
  // 보통 event로 작성하는 것이 관행
  event.preventDefault(); // 어떤 이벤트의 기본 행동이 발생하지 않도록 막음 -> submit의 경우 새로고침
  loginForm.classList.add(HIDDEN_CLASSNAME);
  localStorage.setItem(USERNAME_KEY, loginInput.value);
  paintGreetings();
}

// h1 태그에 username을 삽입해주는 부분 중복 -> 함수 생성
function paintGreetings() {
  const username = localStorage.getItem(USERNAME_KEY);
  greeting.classList.remove(HIDDEN_CLASSNAME);
  greeting.innerText = `Hello ${username}`;
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  // show the greetings
  paintGreetings();
}

위의 코드도 정상적으로 작동하지만 차이점은 유저정보는 한 번만 조회하지만 localStorage를 두 번 조회한다는 특징이 있다

전체코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Momentun App</title>
  </head>
  <body>
    <form id="login-form" class="hidden">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="what is your name?"
      />
      <!-- <button>Log In</button> -->
      <input type="submit" value="Log In" />
    </form>

    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
  </body>
</html>

style.css

.hidden {
    display: none;
}

app.js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

// 모든 이벤트 리스너 함수의 첫 번째 인자는 항상 지금 막 벌어진 일들에 대한 정보
function onLoginSubmit(event) {
  // 보통 event로 작성하는 것이 관행
  event.preventDefault(); // 어떤 이벤트의 기본 행동이 발생하지 않도록 막음 -> submit의 경우 새로고침
  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);
  localStorage.setItem(USERNAME_KEY, username);
  paintGreetings(username);
}

// h1 태그에 username을 삽입해주는 부분 중복 -> 함수 생성
function paintGreetings(username) {
  greeting.classList.remove(HIDDEN_CLASSNAME);
  greeting.innerText = `Hello ${username}`;
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  // show the greetings
  paintGreetings(savedUsername);
}

'Javascript > vanilla js' 카테고리의 다른 글

[JavaScript] Quotes and Backgrounds (2)	2024.11.12
[JavaScript] Clock (0)	2024.11.12

Yeonneee

[JavaScript] Form submission

'Javascript > vanilla js' 카테고리의 다른 글

티스토리툴바

[JavaScript] Form submission

'Javascript > vanilla js' 카테고리의 다른 글

'Javascript/vanilla js' Related Articles

티스토리툴바