인풋 관련해서 다시 질문 드립니다. 채택완료

달료라 1년 전 조회 4,001

위 코드는 필드 추가 되는 소스 인데, 추가 버튼을 누르면 필드 계속 추가가 되는데, 처음 wr_31은 정상 저장이 되고, 추가 했을 때 나오는 인풋이 wr_32 입니다. 이렇게 해서 2개만 하면 저장이 정상 되는데 ,

여기서 추가 버튼 누를때 마다 wr_31 이후 wr_32~wr_39 까지 생기가 하려면 어떤방식으로 수정을 해아 할까요. 아주 잘 알고 계신 고수님들 있을까요?~~

#그누보드 #인풋

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

답변 1개

정렬:

채택된 답변

+20 포인트

배르만

1년 전

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

</p>

<p><script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>

<div class="input_wrap">

        <div class="input_list">

            <input type="text" name="wr_31" placeholder="입력해주세요." />

        </div>

    </div>

    <button class="add_field">추가하기</button></p>

<p><script>

const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택

const addButton = $('.add_field'); // 추가 버튼 선택

const maxFields = 10; // 최대 입력 필드 수 설정

let fieldCount = 1; // 현재 입력 필드 수</p>

<p>// '추가하기' 버튼 클릭 시 이벤트

addButton.click(function(e) {

    e.preventDefault(); // 페이지 리로드 방지

    if (fieldCount < maxFields) { // 최대 필드 수 체크</p>

<p>        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++;</p>

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

        `);

    }

});</p>

<p>// '삭제' 링크 클릭 시 이벤트

wrapper.on('click', '.remove_field', function(e) {

    e.preventDefault(); // 페이지 리로드 방지

    $(this).parent('.input_list').remove(); // 필드 제거

    fieldCount--; // 필드 수 감소

});</p>

<p></script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

�

달료라

1년 전

답변 감사합니다. .. 적용을 해봤는데, 실질적으로 wr_31만 저장이 되네요. 추가를 해도ㅠㅠ

�

배르만

1년 전

문제가 있다고 판단되는 경우
다음 소스로 임의의 페이지 구성을 하고 테스트 해볼수 있습니다.

[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]

문제가 있다고 판단되는 경우
다음 소스로 임의의 페이지 구성을 하고 테스트 해볼수 있습니다.

[code]
<?php
if (empty($_POST) == false) {
    print_r($_POST);
}
?>

</form>

// '추가하기' 버튼 클릭 시 이벤트
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]

�

달료라

1년 전

도베르만님 ~ 혹시 필드 삭제를 할때 삭제버튼은 제일 마지막에 추가 된 input에만 나오게 해서 그

마지막 꺼만 지워지게 할 수 있는 방법이 있을까요?

�

배르만

1년 전

[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]

[code]
<?php
if (empty($_POST) == false) {
    print_r($_POST);
}
?>

</form>

const delButton = '<a href="javascript:void(0);" class="remove_field">삭제</a>';

// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
    e.preventDefault(); // 페이지 리로드 방지
    if (fieldCount < maxFields) { // 최대 필드 수 체크

fieldCount++; // 필드 수 증가
        // 새 입력 필드 추가
        wrapper.append(`
            <div class="input_list">
                <input type="text" name="wr_${el_num}" placeholder="입력해주세요." />
                ${delButton}
            </div>
        `);

$('.remove_field').not(':last').remove();
    }
});

if ($('.input_list').length > 1) {
        $('.input_list:last').append(delButton);
    }
});

</script>
[/code]

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

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

로그인

인풋 관련해서 다시 질문 드립니다. 채택완료

답변 1개

답변에 대한 댓글 4개

공유하기