📖
그누보드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 검증 → 통과 시 제출.
<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 검증 → 통과 시 제출.
댓글목록
등록된 댓글이 없습니다.
![]() ![]() |