SIR
목록으로

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

달달료라
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 25,831
답변 3
목록

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

채택된 답변
+20 포인트

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

 

Copy 
<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 에서 확인해 보셈...

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

답변에 대한 댓글 2개

제가 찾던 내용이네요 감사합니다.~^^
아 ~ 혹시 생성 되는 인풋을 옆으로 2개나 4개로 생성이 가능 할까요?

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

thumb-978180634_1725256303.72_730x507.png

Copy 
<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>
로그인 후 평가할 수 있습니다

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

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

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

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

로그인
🐛 버그신고