sin prisa pero sin pausa

[Javascript] form - submit 하고 새로고침 안 되도록 하기 본문

더 알아보고 싶은데?

[Javascript] form - submit 하고 새로고침 안 되도록 하기

EstherDmt 2021. 6. 4. 16:05
반응형

[구현화면]

로그인 버튼이나 엔터를 눌러도 페이지가 넘어가지 않도록 설정하고 싶을 때 

 

 

[HTML 코드]

<body>
    <form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log In</button>
    </form>
    <script src="app.js"></script>
</body>

[Javascript 코드]

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


function onLoginSubmit(event) {
    const username = loginInput.value;
    event.preventDefault();
    console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit);

 

브라우저에서는 addEventListener로 "submit"에 의한 기능할 함수를 수행할 때

 해당 함수의 인자로써 현재 일어난 "submit"에 대한 정보를 넘겨준다. 

 

위 코드는 그 정보를 담은 인자를  event 라는 매개변수 이름을 붙여주고

"submit"이 될 때 기본적으로 일어나는 정보 전달(페이지 넘김)을 막아주는  preventDefault();  메소드를 사용해주는 코드

 

확인을 위해  preventDefault();  메소드를 써서 새로고침을 막아준 다음

 event 를 콘솔에 출력해보면,

 event 가 가지고 있는 submit된 정보들이 쭈루룩 나온다.

 

 

반응형

'더 알아보고 싶은데?' 카테고리의 다른 글

[MVC] 서블릿(Servlet) - URL 매핑 방법 2가지  (0) 2021.06.08
[톰캣 에러] HTTP 상태 404 – 찾을 수 없음  (0) 2021.06.08
이 시스템에는 oracle database express edition 서비스가 이미 있습니다 있습니다 있습니다 있습니다 있습니다  (0) 2021.04.14
[JAVA] Scanner의 단점과 해결방법  (0) 2021.03.24
[JAVA] BufferedReader  (0) 2021.03.19
'더 알아보고 싶은데?' Related Articles more