인풋 관련해서 다시 질문 드립니다.
본문
<div class="input_wrap">
<div class="input_list">
<input type="text" name="wr_31" placeholder="입력해주세요." />
</div>
</div>
<button class="add_field">추가하기</button>
<script>
const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
const addButton = $('.add_field'); // 추가 버튼 선택
const maxFields = 10; // 최대 입력 필드 수 설정
let fieldCount = 1; // 현재 입력 필드 수
// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
e.preventDefault(); // 페이지 리로드 방지
if (fieldCount < maxFields) { // 최대 필드 수 체크
fieldCount++; // 필드 수 증가
// 새 입력 필드 추가
wrapper.append(`
<div class="input_list">
<input type="text" name="wr_32" placeholder="입력해주세요." />
<a href="javascript:void(0);" class="remove_field">삭제</a>
</div>
`);
}
});
// '삭제' 링크 클릭 시 이벤트
wrapper.on('click', '.remove_field', function(e) {
e.preventDefault(); // 페이지 리로드 방지
$(this).parent('.input_list').remove(); // 필드 제거
fieldCount--; // 필드 수 감소
});
</script>
위 코드는 필드 추가 되는 소스 인데, 추가 버튼을 누르면 필드 계속 추가가 되는데, 처음 wr_31은 정상 저장이 되고, 추가 했을 때 나오는 인풋이 wr_32 입니다. 이렇게 해서 2개만 하면 저장이 정상 되는데 ,
여기서 추가 버튼 누를때 마다 wr_31 이후 wr_32~wr_39 까지 생기가 하려면 어떤방식으로 수정을 해아 할까요. 아주 잘 알고 계신 고수님들 있을까요?~~
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="input_wrap">
<div class="input_list">
<input type="text" name="wr_31" placeholder="입력해주세요." />
</div>
</div>
<button class="add_field">추가하기</button>
<script>
const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
const addButton = $('.add_field'); // 추가 버튼 선택
const maxFields = 10; // 최대 입력 필드 수 설정
let fieldCount = 1; // 현재 입력 필드 수
// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
e.preventDefault(); // 페이지 리로드 방지
if (fieldCount < maxFields) { // 최대 필드 수 체크
var el_num = 0;
var el_prefix = 'wr_';
var el = $('input[name^="' + el_prefix + '"]:last');
if (el != null) {
el_num = Number(el.get(0).name.replace(el_prefix, ''));
}
el_num++;
fieldCount++; // 필드 수 증가
// 새 입력 필드 추가
wrapper.append(`
<div class="input_list">
<input type="text" name="wr_${el_num}" placeholder="입력해주세요." />
<a href="javascript:void(0);" class="remove_field">삭제</a>
</div>
`);
}
});
// '삭제' 링크 클릭 시 이벤트
wrapper.on('click', '.remove_field', function(e) {
e.preventDefault(); // 페이지 리로드 방지
$(this).parent('.input_list').remove(); // 필드 제거
fieldCount--; // 필드 수 감소
});
</script>
답변 감사합니다. .. 적용을 해봤는데, 실질적으로 wr_31만 저장이 되네요. 추가를 해도ㅠㅠ
문제가 있다고 판단되는 경우
다음 소스로 임의의 페이지 구성을 하고 테스트 해볼수 있습니다.
<?php
if (empty($_POST) == false) {
print_r($_POST);
}
?>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<form method="post">
<input type="submit">
<div class="input_wrap">
<div class="input_list">
<input type="text" name="wr_31" placeholder="입력해주세요." />
</div>
</div>
<button class="add_field">추가하기</button>
</form>
<script>
const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
const addButton = $('.add_field'); // 추가 버튼 선택
const maxFields = 10; // 최대 입력 필드 수 설정
let fieldCount = 1; // 현재 입력 필드 수
// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
e.preventDefault(); // 페이지 리로드 방지
if (fieldCount < maxFields) { // 최대 필드 수 체크
var el_num = 0;
var el_prefix = 'wr_';
var el = $('input[name^="' + el_prefix + '"]:last');
if (el != null) {
el_num = Number(el.get(0).name.replace(el_prefix, ''));
}
el_num++;
fieldCount++; // 필드 수 증가
// 새 입력 필드 추가
wrapper.append(`
<div class="input_list">
<input type="text" name="wr_${el_num}" placeholder="입력해주세요." />
<a href="javascript:void(0);" class="remove_field">삭제</a>
</div>
`);
}
});
// '삭제' 링크 클릭 시 이벤트
wrapper.on('click', '.remove_field', function(e) {
e.preventDefault(); // 페이지 리로드 방지
$(this).parent('.input_list').remove(); // 필드 제거
fieldCount--; // 필드 수 감소
});
</script>
도베르만님 ~ 혹시 필드 삭제를 할때 삭제버튼은 제일 마지막에 추가 된 input에만 나오게 해서 그
마지막 꺼만 지워지게 할 수 있는 방법이 있을까요?
<?php
if (empty($_POST) == false) {
print_r($_POST);
}
?>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<form method="post">
<input type="submit">
<div class="input_wrap">
<div class="input_list">
<input type="text" name="wr_31" placeholder="입력해주세요." />
</div>
</div>
<button class="add_field">추가하기</button>
</form>
<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 = 'wr_';
var el = $('input[name^="' + el_prefix + '"]:last');
if (el != null) {
el_num = Number(el.get(0).name.replace(el_prefix, ''));
}
el_num++;
fieldCount++; // 필드 수 증가
// 새 입력 필드 추가
wrapper.append(`
<div class="input_list">
<input type="text" name="wr_${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>