JavaScript에서 폼 제출 시 입력 값 변경하는 방법

JavaScript에서 폼(form) 제출 시 입력 필드의 값을 변경하려면 document 객체를 활용하면 됩니다. 기본 문법은 다음과 같습니다.

document.yourFormName.yourTextName.value=anyValue;

즉, document 객체를 통해 폼 이름과 입력 요소의 name 속성에 접근한 뒤, 원하는 값을 할당하면 됩니다.

폼 구성 예시

예를 들어, "Submit Form" 버튼을 클릭했을 때 submitForm() 함수가 호출되는 다음과 같은 입력 폼이 있다고 가정해 보겠습니다.

<form name="studentForm" onsubmit="submitForm();">
   <input type="hidden" name="txtInput" value="10000" />
   <input type="submit" value="Submit Form"/>
</form>

위 폼에는 숨김(hidden) 타입의 입력 필드가 있으며, 초기 값으로 10000이 설정되어 있습니다.

입력 값을 변경하는 함수 작성

이제 폼이 제출될 때 호출되는 submitForm() 함수를 사용하여 입력 필드의 값을 변경할 수 있습니다.

function submitForm(){
   document.studentForm.txtInput.value='STUDENT-100';
}

위 코드는 studentForm이라는 이름의 폼 안에 있는 txtInput 필드의 값을 STUDENT-100으로 변경합니다.

전체 예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.
css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<form name="studentForm" onsubmit="submitForm();">
<input type="hidden" name="txtInput" value="10000" />
<input type="submit" value="Submit Form"/>
</form>
<script>
   function submitForm(){
      document.studentForm.txtInput.value='STUDENT-100';
   }
</script>
</body>
</html>

프로그램 실행 방법

위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript에서 폼 제출 시 입력 값 변경하는 방법

여기서 "Submit Form" 버튼을 클릭하면, 쿼리 스트링(query string)에서 변경된 입력 값을 확인할 수 있습니다. 결과는 다음과 같습니다.

JavaScript에서 폼 제출 시 입력 값 변경하는 방법

이처럼 onsubmit 이벤트와 document 객체를 조합하면, 폼이 실제로 전송되기 전에 입력 필드의 값을 자유롭게 수정할 수 있습니다. 이 기법은 서버로 전송되기 전에 데이터를 가공하거나 특정 형식으로 변환해야 할 때 유용하게 활용됩니다.