채택완료

인풋 관련해서 다시 질문 드립니다.

<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개 / 댓글 4개

채택된 답변
+20 포인트

다음 코드가 도움이 될지 모르겠습니다.

 

Copy
<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>

답변에 대한 댓글 4개

답변 감사합니다. .. 적용을 해봤는데, 실질적으로 wr_31만 저장이 되네요. 추가를 해도ㅠㅠ
문제가 있다고 판단되는 경우
다음 소스로 임의의 페이지 구성을 하고 테스트 해볼수 있습니다.

[code]
<?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>
[/code]
도베르만님 ~ 혹시 필드 삭제를 할때 삭제버튼은 제일 마지막에 추가 된 input에만 나오게 해서 그

마지막 꺼만 지워지게 할 수 있는 방법이 있을까요?
[code]
<?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>
[/code]

답변을 작성하려면 로그인이 필요합니다.