워드프레스 QuForm 조건부 필드 값을 다른 필드에 자동 입력하기

문제 상황

워드프레스 QuForm을 사용하여 지역 선택 폼을 만들 때 다음과 같은 요구사항이 있었습니다:

첫 번째 선택 필드에서 시/도를 선택 (서울, 부산, 대구 등)
두 번째 선택 필드에서 각 시/도에 맞는 구/군이 조건부로 노출
엔트리 화면에서는 모든 선택 필드를 표시하기 어려우므로, 최종 선택된 구/군명만 별도 텍스트 필드에 자동 입력
해당 텍스트 필드만 엔트리 테이블에 노출

해결 과정

1. 필드 구조 파악

먼저 QuForm의 HTML 구조를 파악해야 했습니다. 개발자 도구(F12)로 확인한 결과:

조건부 선택 필드들:

html<div class="quform-element quform-element-select quform-element-2_114">
    <select name="quform_2_114">...</select>
</div>

텍스트 입력 필드:

html<input type="text" name="quform_2_145" class="quform-field-2_145">

2. 필드 ID 정리

각 시/도별 구/군 선택 필드들의 ID:

2_114, 2_134, 2_133, 2_132, 2_131
2_130, 2_129, 2_128, 2_127, 2_126
2_125, 2_124, 2_123, 2_122, 2_121
2_120, 2_119

최종 값을 입력할 텍스트 필드 ID: 2_145

3. 시행착오

처음에는 히든 필드(Hidden Field)를 사용하려 했으나 JavaScript가 정상 작동하지 않았습니다. 디버깅을 위해 일반 텍스트 입력 필드로 변경한 후 테스트를 진행했습니다.

최종 해결 코드

javascriptjQuery(document).ready(function($) {
    $(document).on('change', '.quform-element select', function() {
        var $element = $(this).closest('.quform-element');
        var elementClass = $element.attr('class');
        
        console.log('변경된 요소:', elementClass);
        
        // 구/군 선택 필드 클래스들
        var districtFields = [
            'quform-element-2_114', 'quform-element-2_134', 'quform-element-2_133',
            'quform-element-2_132', 'quform-element-2_131', 'quform-element-2_130',
            'quform-element-2_129', 'quform-element-2_128', 'quform-element-2_127',
            'quform-element-2_126', 'quform-element-2_125', 'quform-element-2_124',
            'quform-element-2_123', 'quform-element-2_122', 'quform-element-2_121',
            'quform-element-2_120', 'quform-element-2_119'
        ];
        
        // 현재 변경된 필드가 구/군 필드인지 확인
        var isDistrictField = districtFields.some(function(fieldClass) {
            return elementClass.includes(fieldClass);
        });
        
        if (isDistrictField) {
            var selectedText = $(this).find('option:selected').text();
            console.log('선택된 텍스트:', selectedText);
            
            // 유효한 값이 선택된 경우에만 텍스트 필드에 입력
            if (selectedText && selectedText !== '구/군' && selectedText.trim() !== '') {
                $('input[name="quform_2_145"]').val(selectedText);
                console.log('텍스트 필드에 입력 완료:', selectedText);
            }
        }
    });
});

구현 방법

1. QuForm 폼 설정

시/도 선택 필드 생성
각 시/도별 구/군 선택 필드들 생성
조건부 로직 설정 (시/도 선택에 따라 해당 구/군 필드 노출)
최종 값을 저장할 텍스트 입력 필드 생성

2. JavaScript 코드 추가

QuForm → Form Settings → JavaScript 섹션에 위의 코드를 추가합니다.

3. 엔트리 화면 설정

시/도, 구/군 선택 필드들은 엔트리 테이블에서 숨김
텍스트 입력 필드(2_145)만 엔트리 테이블에 표시

핵심 포인트

1. 이벤트 델리게이션 사용

javascript$(document).on('change', '.quform-element select', function() {

조건부로 생성되는 필드들도 감지할 수 있도록 이벤트 델리게이션을 사용했습니다.

2. 클래스 기반 필드 식별

javascriptvar elementClass = $element.attr('class');
var isDistrictField = districtFields.some(function(fieldClass) {
    return elementClass.includes(fieldClass);
});

QuForm의 quform-element-{필드ID} 클래스 패턴을 활용해 대상 필드를 식별했습니다.

3. 정확한 셀렉터 사용

javascript$('input[name="quform_2_145"]').val(selectedText);

QuForm의 실제 name 속성 형식인 quform_{필드ID}를 사용했습니다.

주의사항

필드 ID 확인: 개발자 도구로 실제 HTML 구조와 필드 ID를 반드시 확인하세요.
디버깅 활용: console.log()를 활용해 각 단계가 정상 작동하는지 확인하세요.
히든 필드 이슈: 히든 필드에서 문제가 생기면 텍스트 필드로 먼저 테스트해보세요.
조건부 필드: 동적으로 생성되는 필드는 이벤트 델리게이션을 사용해야 합니다.

활용 방안

이 방법은 지역 선택 외에도 다양한 조건부 필드 상황에서 응용할 수 있습니다:

카테고리 → 하위 카테고리 → 최종 선택값 자동 입력
제품군 → 제품 모델 → 최종 선택값 자동 입력
부서 → 팀 → 최종 선택값 자동 입력

QuForm의 강력한 조건부 로직과 JavaScript를 조합하면 사용자에게는 직관적인 선택 경험을, 관리자에게는 깔끔한 데이터 관리 환경을 제공할 수 있습니다.

참고: 이 코드는 jQuery와 QuForm 환경에서 테스트되었습니다. 사용하는 QuForm 버전이나 테마에 따라 일부 수정이 필요할 수 있습니다.