여분필드에 글쓰기에서 인풋에 숫자 순서대로 저장 되게 하는 방법 문의

여분필드에 글쓰기에서 인풋에 숫자 순서대로 저장 되게 하는 방법 문의

QA

여분필드에 글쓰기에서 인풋에 숫자 순서대로 저장 되게 하는 방법 문의

본문


<script>
const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
const addButton = $('.add_field'); // 추가 버튼 선택
const maxFields = 15; // 최대 입력 필드 수 설정 
let fieldCount = 0; // 현재 입력 필드 수
// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
    e.preventDefault(); // 페이지 리로드 방지
    if (fieldCount < maxFields) { // 최대 필드 수 체크
        fieldCount++; // 필드 수 증가
        // 새 입력 필드 추가
        wrapper.append(`
            <div class="input_list">
 
<input type="text" name="wr_${100+fieldCount}" vlaue="1" >
 

이렇게 wr_101은 기본값이 1 이라고 할때,  추가하기를 해서 wr_102에 기본값 2, wr_103에는 기본값 3  

이렇게 해서 생성된 인폿 개숫에 따라 1씩 증가 되게 하는 방법이 있을까요?

 

 

이 질문에 댓글 쓰기 :

답변 3

정확하게 무엇을 구현하려고 하시는지 잘 모르겠으나. 대충 바닐라 스크립트로 한다면 아래처럼요.

 


<style>
#myDiv input { display:block; }
</style>
 
<div id="myDiv">
    <button id="btn_1" type="button" style="cursor:pointer">추가하기</button>
    <button id="btn_2" type="button" style="cursor:pointer">삭제하기</button>
    <input type="text" name="wr_101" value="1">
</div>
 
<script>
wrNumber = 101;
myNumber = 1;
btn_1.onclick = function() {
    wrNumber += 1;
    myNumber += 1;
    myDiv.insertAdjacentHTML("beforeend", "<input type='text' name='wr_" + wrNumber + "' value='" + myNumber + "'>");
}
btn_2.onclick = function() {
    if (myNumber > 1) {
        myDiv.querySelector("input[name='wr_" + wrNumber + "']").remove();
        wrNumber -= 1;
        myNumber -= 1;
    }
    else alert("더 이상 삭제할 수 없음");
}
</script>

 

https://wittazzurri.com/editor/html_editor.php 에서 확인해 보셈...

<input type="text" name="wr_${100+fieldCount}" vlaue="1" > 해당에 아무 클래스를 하나 추가하시고 
$('.클래스').length 식으로 하셔서 갯수에서 +1을 하셔서 넣어주시면 될거 같습니다.

thumb-978180634_1725256303.72_730x507.png


<script>
        $(document).ready(function(){
            const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
            const addButton = $('.add_field'); // 추가 버튼 선택
            const maxFields = 15; // 최대 입력 필드 수 설정
            let fieldCount = 0; // 현재 입력 필드 수
 
            // '추가하기' 버튼 클릭 시 이벤트
            addButton.click(function(e) {
                e.preventDefault(); // 페이지 리로드 방지
                if (fieldCount < maxFields) { // 최대 필드 수 체크
                    fieldCount++; // 필드 수 증가
                    // 새 입력 필드 추가
                    wrapper.append(`
                        <div class="input_list">
                            <input type="text" name="wr_${100+fieldCount}" value="1">
                        </div>
                    `);
                }
            });
        });
    </script>
답변을 작성하시기 전에 로그인 해주세요.
전체 282
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT