여분필드에 글쓰기에서 인풋에 숫자 순서대로 저장 되게 하는 방법 문의
본문
<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 에서 확인해 보셈...
제가 찾던 내용이네요 감사합니다.~^^
아 ~ 혹시 생성 되는 인풋을 옆으로 2개나 4개로 생성이 가능 할까요?
<input type="text" name="wr_${100+fieldCount}" vlaue="1" > 해당에 아무 클래스를 하나 추가하시고
$('.클래스').length 식으로 하셔서 갯수에서 +1을 하셔서 넣어주시면 될거 같습니다.
<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>
답변을 작성하시기 전에 로그인 해주세요.
