javascript submit event

JavaScript/Event

javascript submit event

고기고기물고기 2022. 3. 24. 04:22

input type submit 기본 이벤트를 막는 코드

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


function onLoginSubmit(event) {
event.preventDefault();
// 기본 이벤트를 막아줌
const username = loginInput.value;
console.log(username);

console.dir(event);
// event element 볼수 있음.
}


loginForm.addEventListener("submit", onLoginSubmit);

※ event 안에 console.dir(event) 할 시 event 에 대한 argument를 보여준다

Submit 이벤트 발생 시 해당 form 숨김 처리 및 글자 출력

const LoginForm = document.querySelector("#Login-form");
const LoginInput = document.querySelector("#Login-form input");
const greeting = document.querySelector("#greeting")
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
event.preventDefault();
LoginForm.classList.add(HIDDEN_CLASSNAME);

const username = LoginInput.value;
localStorage.setItem("username", username);
// localstorage 에 저장해서 새로고침후에도 가져올수 있게
greeting.innerText =`Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
LoginForm.addEventListener("submit",onLoginSubmit);

※ 변수 + 변수 = 'Hello {$username}'; 가능 = "Hello" + username;

css

.hidden
{
 display:  none;
}

html

<body>
    <form id = "Login-form">
        <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>
    <a href = "http://www.naver.com"> go to naver</a>
    <script src = "app.js"></script>
</body>