[JS]<button type="button"> <button type="submit">

 

기본 동작

• type="button": 클릭 시 아무런 기본 동작을 하지 않음. 자바스크립트를 통해 동작을 정의해야 함.
• type="submit": 클릭 시 폼을 제출함

<button type="button" onclick="myFunction()">Click Me</button>

<script>
function myFunction() {
    alert("Button was clicked!");
}
</script>

 

<form action="/submit_form" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

 

 

사용 목적

• type="button": 폼 제출이 아닌 다른 작업을 수행할 때 사용.
• type="submit": 폼을 서버로 제출할 때 사용. 버튼 클릭 시 기본적으로 폼이 제출되면서 페이지가 새로고침 된다.

<form id="myForm" action="/submit_form" method="post">
    <input type="text" name="username" id="username" required>
    <button type="submit" id="submitBtn">Submit</button>
</form>

<script>
document.querySelector("#submitBtn").addEventListener("click", function(e) {
    e.stopPropagation(); // 현재 이벤트가 상위 요소로 전파되지 않도록 막음
    e.preventDefault(); // 페이지가 새로 고침되는 것을 막고, 대신 자바스크립트로 폼 제출을 처리

    
    // 유효성 검사를 통과하면 폼을 제출
    document.querySelector("#myForm").submit();
});
</script>