게시판 input 입력폼 추가 삭제
본문
다른분들 질문하신 내용을 검색해서 추가 삭제하는건 어찌 했는데요.
수정일때가 문제라서요ㅠ
작성 후 수정하면 처음 작성하는것처럼 첫번째 입력폼만 나와서요
값이 등록된 필드는 수정시 바로 보이게 하려면 어떻게 수정해야할까요ㅠ
<script>
const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
const addButton = $('.add_field'); // 추가 버튼 선택
const maxFields = 10; // 최대 입력 필드 수 설정
let fieldCount = 1; // 현재 입력 필드 수
const delButton = '<a href="javascript:void(0);" class="remove_field">삭제</a>';
// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
e.preventDefault(); // 페이지 리로드 방지
if (fieldCount < maxFields) { // 최대 필드 수 체크
var el_num = 0;
var el_prefix = 'ext_';
var el = $('input[name^="' + el_prefix + '"]:last');
el_num++;
fieldCount++; // 필드 수 증가
// 새 입력 필드 추가
wrapper.append(`
<div class="input_list">
<input type="text" name="ext_3_${el_num}" onClick="fnPopUpCalendar(this, ext_3_${el_num}, 'yyyymmdd')" placeholder="입력해주세요." /> <input type="text" name="ext_4_${el_num}" placeholder="입력해주세요." />
${delButton}
</div>
`);
$('.remove_field').not(':last').remove();
}
});
// '삭제' 링크 클릭 시 이벤트
wrapper.on('click', '.remove_field', function(e) {
e.preventDefault(); // 페이지 리로드 방지
$(this).parent('.input_list').remove(); // 필드 제거
fieldCount--; // 필드 수 감소
if ($('.input_list').length > 1) {
$('.input_list:last').append(delButton);
}
});
</script>
답변 3
지금 올려주신 코드는
클릭이벤트에 동적 HTML을 추가해서 입력필드를 늘려가는 로직으로 판단됩니다.
변경(수정)을 진행할때는
추가된 갯수정보가 있어야하고
Document가 load되는 시점에
추가된 갯수정보만큼 클릭이 발생한것처럼 작동되고
추가된 data값들이 해당 순번에 input태그안에 value로 들어가게 해야하죠
그런데
지금 오려주신 로직은 Click Evnet에 해당되는 내용만 존재해서
저장된 정보가 무엇인지
또
로드시에 어떻게 구성을 원하는지
판단이 모호합니다.
임의로 만든다면 가능하겠으나
질문/답변란의 취지는 막힌곳에 대한 힌트를 얻는게 가장 좋은 방법이라고 생각하는데
제가 답변드린 내용으로
로직 구성을 직접 해보시고
그러다가 막히면 다시 질문을 해보시는게 바람직하지 않을까 합니다.
말씀해주시면 내용을 토대로 일단 우회해서 진행했습니다. 답변 감사드려요
도움이 되는 내용이면 좋겠네요 .. 성공하세요
관련 코드가 있으면 더 좋을거 같습니다~
<div class="input_wrap">
<div class="input_list">
<input type="text" name="ext_3_0" value="<? echo $ext_3[0] ?>" readonly class="frm_input required" size="8" maxlength="8" onClick="fnPopUpCalendar(this, ext_3_0, 'yyyymmdd')">
<input type="text" name="ext_4_0" value="<? echo $ext_4[0] ?>" placeholder="입력해주세요." />
</div>
</div>
<button class="add_field">추가하기</button>
<script>
const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
const addButton = $('.add_field'); // 추가 버튼 선택
const maxFields = 10; // 최대 입력 필드 수 설정
let fieldCount = 1; // 현재 입력 필드 수
const delButton = '<a href="javascript:void(0);" class="remove_field">삭제</a>';
// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
e.preventDefault(); // 페이지 리로드 방지
if (fieldCount < maxFields) { // 최대 필드 수 체크
var el_num = 0;
var el_prefix = 'ext_';
var el = $('input[name^="' + el_prefix + '"]:last');
el_num++;
fieldCount++; // 필드 수 증가
// 새 입력 필드 추가
wrapper.append(`
<div class="input_list">
<input type="text" name="ext_3_${el_num}" onClick="fnPopUpCalendar(this, ext_3_${el_num}, 'yyyymmdd')" placeholder="입력해주세요." /> <input type="text" name="ext_4_${el_num}" placeholder="입력해주세요." />
${delButton}
</div>
`);
$('.remove_field').not(':last').remove();
}
});
// '삭제' 링크 클릭 시 이벤트
wrapper.on('click', '.remove_field', function(e) {
e.preventDefault(); // 페이지 리로드 방지
$(this).parent('.input_list').remove(); // 필드 제거
fieldCount--; // 필드 수 감소
if ($('.input_list').length > 1) {
$('.input_list:last').append(delButton);
}
});
</script>
ext 가 어느 필드에 저장되는지 관련 내용이 없어서 최초 쓰기화면대로 로드 했습니다.
<div class="input_wrap">
<div class="input_list">
<input type="text" name="ext_3_0" value="<? echo $ext_3[0] ?>" readonly class="frm_input required" size="8" maxlength="8" onClick="fnPopUpCalendar(this, ext_3_0, 'yyyymmdd')">
<input type="text" name="ext_4_0" value="<? echo $ext_4[0] ?>" placeholder="입력해주세요." />
</div>
</div>
<button class="add_field">추가하기</button>
<script>
const wrapper = $('.input_wrap');
const addButton = $('.add_field');
const maxFields = 10;
let fieldCount = 1;
const delButton = '<a href="javascript:void(0);" class="remove_field">삭제</a>';
// 수정 모드: 기존 데이터 로드
$(document).ready(function() {
<?php
// ext_3, ext_4 배열의 최대 개수 확인
$max_count = max(count($ext_3), count($ext_4));
// 인덱스 1부터 시작 (0은 이미 HTML에 있음)
for($i = 1; $i < $max_count; $i++) {
$ext_3_val = isset($ext_3[$i]) ? $ext_3[$i] : '';
$ext_4_val = isset($ext_4[$i]) ? $ext_4[$i] : '';
// 둘 중 하나라도 값이 있으면 필드 추가
if($ext_3_val || $ext_4_val) {
?>
addExistingField(<?php echo $i; ?>, '<?php echo $ext_3_val; ?>', '<?php echo $ext_4_val; ?>');
<?php
}
}
?>
// 삭제 버튼 표시 (필드가 2개 이상일 때)
if ($('.input_list').length > 1) {
$('.input_list:last').append(delButton);
}
});
// 기존 필드 추가 함수
function addExistingField(num, val3, val4) {
if (fieldCount < maxFields) {
fieldCount++;
wrapper.append(`
<div class="input_list">
<input type="text" name="ext_3_${num}" value="${val3}" readonly class="frm_input" size="8" maxlength="8" onClick="fnPopUpCalendar(this, ext_3_${num}, 'yyyymmdd')" placeholder="입력해주세요." />
<input type="text" name="ext_4_${num}" value="${val4}" placeholder="입력해주세요." />
</div>
`);
}
}
// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
e.preventDefault();
if (fieldCount < maxFields) {
// 마지막 필드의 번호 찾기
var lastInput = $('input[name^="ext_3_"]:last');
var lastNum = 0;
if (lastInput.length > 0) {
var lastName = lastInput.attr('name');
lastNum = parseInt(lastName.replace('ext_3_', '')) || 0;
}
var newNum = lastNum + 1;
fieldCount++;
wrapper.append(`
<div class="input_list">
<input type="text" name="ext_3_${newNum}" readonly class="frm_input" size="8" maxlength="8" onClick="fnPopUpCalendar(this, ext_3_${newNum}, 'yyyymmdd')" placeholder="입력해주세요." />
<input type="text" name="ext_4_${newNum}" placeholder="입력해주세요." />
${delButton}
</div>
`);
// 이전 삭제 버튼 제거
$('.remove_field').not(':last').remove();
}
});
// '삭제' 링크 클릭 시 이벤트
wrapper.on('click', '.remove_field', function(e) {
e.preventDefault();
$(this).parent('.input_list').remove();
fieldCount--;
// 삭제 버튼 재배치
$('.remove_field').remove();
if ($('.input_list').length > 1) {
$('.input_list:last').append(delButton);
}
});
</script>
결론은 저장된 $ext_3 배열값이 있다면 해당 배열값의 input 이 나타나는 형태 입니다.
근데 제가 봤을때 <? echo $ext_3[0] ?> 이 선언도 틀렸을 가능성이 높네요
애초에 글수정시 $write 배열에서 가져오게 되어있는데 위 코드에서는 그게 없으니
저장되는 구조부터 알아야 합니다.
$ext_3, $ext_4 배열로 구분해서 넣은거구요~
내용은 잘 저장되고 하는데 수정할때 이미 입력된 값이 있는 입력폼은 보이게 나열하고 싶어서요~
일단 우회해서 다른방법으로 진행했습니다. 답변 감사드려요
