📖
그누보드5 폼 자동 제출

페이지 정보

본문

1. 단순히 wr_1 입력란에 값이 들어간 후 1초가 지나면 폼이 자동 제출되도록 코드를 짜보겠습니다.[code]<input type="text" name="wr_1" value="" id="wr_1">

<script>
(function(){
  var submitTimer = null; // 타이머 저장

  function tryAutoSubmit(){
    var wr1  = document.getElementById('wr_1');
    var btn  = document.getElementById('btn_submit');
    if(!wr1 || !btn) return;

    // wr_1 값이 있을 때만
    if(wr1.value.trim().length > 0) {
      // 이전 타이머 취소 후 다시 시작
      if(submitTimer) clearTimeout(submitTimer);

      submitTimer = setTimeout(function(){
        // 값이 그대로 유지되고 있으면 전송
        if(wr1.value.trim().length > 0) {
          // 버튼 클릭 이벤트 발생 → onsubmit 검증도 정상 실행
          btn.dispatchEvent(new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
          }));
        }
      }, 1000);
    }
  }

  document.addEventListener('DOMContentLoaded', function(){
    var wr1 = document.getElementById('wr_1');
    if(!wr1) return;

    // 입력/붙여넣기 시만 동작
    wr1.addEventListener('input', tryAutoSubmit);
  });
})();
</script>[/code]👉 이렇게 하면:
페이지 진입 시 자동 실행 안 됨
사용자가 wr_1에 무언가 입력하거나 붙여넣었을 때만 1초 뒤 제출

2. 이번에는 wr_1 입력시 wr_1값 에서 숫자만 추출하여 실시간으로 wr_subject 에 자동입력 후 1초 뒤 폼전송[code]<script>
(function(){
  var submitTimer = null; // 제출 타이머 저장용
 
  // wr_1 입력값에서 숫자만 추출
  function extractDigits(s){
    if(!s) return '';
    return s.toString().replace(/\D/g, '');
  }

  // wr_1 값 -> wr_subject 값 복사 + 1초 뒤 자동 제출 예약
  function updateSubjectFromWr1(){
    var wr1  = document.getElementById('wr_1'); // 사용자 입력 필드
    var subj  = document.getElementById('wr_subject'); // 제목 필드
    var btn  = document.getElementById('btn_submit'); // 제출 버튼
    if(!wr1 || !subj || !btn) return;

    var digits = extractDigits(wr1.value); // wr_1에서 숫자만 추출

    if(digits.length) {
      subj.value = digits; // 추출된 숫자를 제목에 넣음

      // 기존 예약된 타이머가 있으면 취소 (입력 중 여러 번 실행 방지)
      if(submitTimer) clearTimeout(submitTimer);

      // 1초 뒤 버튼 강제 클릭 (onsubmit 검증 포함)
      submitTimer = setTimeout(function(){
        // 1초 후에도 값이 동일하면 실제 제출
        if(subj.value === digits) {
          btn.dispatchEvent(new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
          }));
        }
      }, 1000);
    }
  }

  document.addEventListener('DOMContentLoaded', function(){
    var wr1 = document.getElementById('wr_1');
    if(!wr1) return;
    wr1.addEventListener('input', updateSubjectFromWr1); // wr_1에 글자가 입력되거나 수정될 때마다 updateSubjectFromWr1 실행
  });
})();
</script>[/code]🔎 동작 흐름
사용자가 wr_1에 뭔가 입력 → 숫자 추출 → wr_subject에 반영.
숫자가 있으면 타이머 시작 (1초).
입력이 또 바뀌면 이전 타이머 취소 → 새 타이머로 다시 1초 대기.
입력이 멈춘 후 1초 지나면 작성완료 버튼 클릭 → 그누보드 onsubmit 검증 → 통과 시 제출.

댓글목록

등록된 댓글이 없습니다.

🔍 검색

회사소개 개인정보처리방침 서비스이용약관
Copyright © rainbowgarden.shop All rights reserved.