트러블 슈팅 - html(js) - form 안의 button(input)의 OnSubmit이 작동하지 않음

• 문제: form 안의 button(input)의 OnSubmit이 작동하지 않음. e.preventDefault() 사용하여도 미작동.

• 원인: form은 submit 될 경우 reload(새로고침)되는데 이는 form의 이벤트이기에 form에서 제어해야 함.

• 해결: form 태그에 OnSubmit 이벤트 설정

• 관련 ChatGPT 응답
  HTML의 <form> 요소에서 onSubmit 이벤트 핸들러는 기본적으로 폼이 제출되었을 때 페이지가 새로 고쳐지는 동작을 발생시킵니다. 이 동작을 막기 위해서는 event.preventDefault()를 사용해야 합니다. 그러나 질문에서 언급한 것처럼, onSubmit을 <form>에 설정하고 preventDefault()를 호출하는 경우와 다른 태그에 설정할 경우의 차이를 이해하는 것이 중요합니다.

이유

1. 폼의 기본 제출 동작: <form> 태그 자체는 사용자가 제출 버튼을 클릭하거나 엔터 키를 눌러서 폼을 제출하는 동작을 처리합니다. 이때 onSubmit 이벤트는 폼이 제출되기 직전에 발생합니다.

   • onSubmit 이벤트가 폼에 설정되어 있으면, 폼 제출 시 event.preventDefault()를 사용하여 폼 제출을 막을 수 있습니다.

2. 내부 태그의 동작: <form> 안에 있는 다른 태그(예: <input>, <button>, <textarea> 등)에 onSubmit을 설정하더라도, 이는 폼 제출 자체와 관련이 없습니다. 그 대신, 폼의 제출 버튼에 대해 click 이벤트가 발생할 수 있습니다.

   • 예를 들어, input 또는 button에서 onSubmit을 사용하려고 하면, 이는 실제로 폼의 onSubmit과는 다르게 동작합니다. onSubmit은 폼에 대해 직접 설정된 이벤트 핸들러여야 폼이 제출되었을 때 그 동작을 제어할 수 있습니다.

예시 코드

<form id="myForm" onsubmit="handleSubmit(event)">
  <input type="text" name="name" id="name" required>
  <button type="submit">Submit</button>
</form>

<script>
  function handleSubmit(event) {
    event.preventDefault();  // 폼 제출을 막음
    alert("폼 제출이 막혔습니다.");
  }
</script>

위 코드에서 onsubmit="handleSubmit(event)"는 <form>에 설정되어 있기 때문에 폼이 제출될 때 handleSubmit 함수가 호출됩니다. event.preventDefault()를 호출하여 페이지 리로드를 막을 수 있습니다.

반면에, 만약 button이나 input 요소에서 onsubmit을 설정해도 폼 제출을 막을 수 없습니다. 폼 제출을 제어하려면 반드시 <form> 요소에 onsubmit을 설정해야 합니다.