여분필드에 글쓰기에서 인풋에 숫자 순서대로 저장 되게 하는 방법 문의 채택완료
달료라
1년 전
조회 25,451
</p>
<p><script>
const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택
const addButton = $('.add_field'); // 추가 버튼 선택
const maxFields = 15; // 최대 입력 필드 수 설정
let fieldCount = 0; // 현재 입력 필드 수</p>
<p>// '추가하기' 버튼 클릭 시 이벤트
addButton.click(function(e) {
e.preventDefault(); // 페이지 리로드 방지
if (fieldCount < maxFields) { // 최대 필드 수 체크
fieldCount++; // 필드 수 증가
// 새 입력 필드 추가
wrapper.append(`
<div class="input_list"></p>
<p> </p>
<p><input type="text" name="wr_${100+fieldCount}" vlaue="1" ></p>
<p> </p>
<p>이렇게 wr_101은 기본값이 1 이라고 할때, 추가하기를 해서 wr_102에 기본값 2, wr_103에는 기본값 3
이렇게 해서 생성된 인폿 개숫에 따라 1씩 증가 되게 하는 방법이 있을까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
1년 전
정확하게 무엇을 구현하려고 하시는지 잘 모르겠으나. 대충 바닐라 스크립트로 한다면 아래처럼요.
</p>
<p><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></p>
<p>
https://wittazzurri.com/editor/html_editor.php 에서 확인해 보셈...
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
달료라
1년 전
제가 찾던 내용이네요 감사합니다.~^^
�
달료라
1년 전
아 ~ 혹시 생성 되는 인풋을 옆으로 2개나 4개로 생성이 가능 할까요?
댓글을 작성하려면 로그인이 필요합니다.
미니님a
Expert
1년 전
</p>
<p><script></p>
<p> $(document).ready(function(){</p>
<p> const wrapper = $('.input_wrap'); // 입력 필드를 포함하는 컨테이너 선택</p>
<p> const addButton = $('.add_field'); // 추가 버튼 선택</p>
<p> const maxFields = 15; // 최대 입력 필드 수 설정</p>
<p> let fieldCount = 0; // 현재 입력 필드 수</p>
<p> </p>
<p> // '추가하기' 버튼 클릭 시 이벤트</p>
<p> addButton.click(function(e) {</p>
<p> e.preventDefault(); // 페이지 리로드 방지</p>
<p> if (fieldCount < maxFields) { // 최대 필드 수 체크</p>
<p> fieldCount++; // 필드 수 증가</p>
<p> // 새 입력 필드 추가</p>
<p> wrapper.append(`</p>
<p> <div class="input_list"></p>
<p> <input type="text" name="wr_${100+fieldCount}" value="1"></p>
<p> </div></p>
<p> `);</p>
<p> }</p>
<p> });</p>
<p> });</p>
<p> </script></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인