JavaScript에서 input type="submit"이 작동하지 않을 때 해결 방법

HTML 폼에서 input type="submit" 또는 button type="submit"을 사용할 때 JavaScript 이벤트 핸들러가 제대로 작동하지 않는 경우가 있습니다. 이 문제를 해결하려면 onclick 속성과 함께 event.preventDefault()를 사용하여 폼의 기본 제출 동작을 막아야 합니다.

해결 방법: onclick 이벤트 활용

버튼의 onclick 속성에 이벤트 객체를 전달하는 함수를 연결하고, 함수 내부에서 preventDefault()를 호출하면 페이지 새로고침 없이 JavaScript 로직을 실행할 수 있습니다.

완전한 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 제출 처리 예제</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <form action="#">
    <label for="firstName">이름:</label>
    <input type="text" id="fName" name="firstName" placeholder="이름을 입력하세요" />
    <button type="submit" onclick="submitForm(event)">제출</button>
  </form>
  <span id="result"></span>

  <script>
    function submitForm(event) {
      event.preventDefault(); // 폼 기본 제출 막기
      const firstName = document.getElementById("fName").value;
      document.getElementById("result").innerHTML = "입력된 이름: " + firstName;
    }
  </script>
</body>
</html>

실행 방법

위 코드를 index.html 파일로 저장합니다.
VS Code에서 파일을 우클릭하고 "Open with Live Server"를 선택합니다.
브라우저에서 페이지가 열리면 텍스트 상자에 이름을 입력하고 제출 버튼을 클릭합니다.

작동 원리

event.preventDefault(): 폼의 기본 제출 동작(페이지 리로드)을 차단합니다.
document.getElementById(): 입력 필드의 값을 가져옵니다.
innerHTML: 결과를 화면에 동적으로 표시합니다.

예상 결과

이름을 입력하고 제출 버튼을 클릭하면 페이지 이동 없이 아래와 같이 입력된 이름이 화면에 표시됩니다.

JavaScript에서 input type= submit 이 작동하지 않을 때 해결 방법

추가 팁

모던 JavaScript에서는 addEventListener를 사용하여 이벤트를 바인딩하는 방식을 더 권장합니다. 이는 HTML과 JavaScript의 관심사 분리에 유리합니다.

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  // 처리 로직
});