버튼 클릭 시 input 자동추가에 의한 name 지정 문의드립니다.
본문
<!-- 이메일 버튼 추가 영역 -->
<div class="bo_w_select write_div" id ="input_field" style="display: none;">
<input type="text" name="wr_2" value="<?php echo $wr_2 ?>" id="wr_mail" required class="frm_input full_input" size="50" maxlength="255" placeholder="Email" style="margin-bottom: 10px;">
<a class="btn btn-default btn_add" onclick="add_input()"><i class="fas fa-plus"></i></a>
</div>
<!-- 이메일 버튼 추가 영역 -->
<div id ="field" class="bo_w_select write_div">
</div>
<script type="text/javascript">
function add_input(){
var div = document.createElement('div');
div.innerHTML = document.getElementById('input_field').innerHTML;
document.getElementById('field').appendChild(div);
}
현재 버튼을 클릭시에 input이 추가되는 소스입니다. 여기서
기존의 name의 값이 wr_2인데 wr_3~부터 자동으로 +1씩 추가되어서 변경해서 추가되는 input name에 넣고싶은데 for문을 돌리고 해봐도 제대로 값이 들어가지가 않습니다 ㅜ
다른 좋은 방법이 있으신 고수분들 도움 부탁드리겠습니다 ㅜ
답변 3
추가형 input을 만들 경우 name 값을 하나로 해서 배열로 보내주고 update 쪽에서 받은 배열을 나누어서 DB에 입력하는 방식으로 가는 방법도 있습니다.
오호..배열 괜찮은 방법인거 같아요! 감사드립니다.
jquery로 제작해 사용하고 있는 것을 wr_2 부분 숫자 늘어 나고 생성된 요소
삭제할 수도 있는 소스입니다.
참조하셔 잘 사용해 보세요.
<ul id="url_input">
<li><input type="text" name="wr_2" class="tm_form_text_m"/></li>
</ul>
<span id="addinput">추가 : <img src="./img/btn_file_add.gif" alt="인풋추가버튼" title="인풋추가" /></span>
<script>
$(document).ready(function() {
var max_fields = 10; //최대 추가 갯수
var add_button = $("#addinput");
var wr = 2;
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++; wr++;
$("#url_input").append('<li><input type="text" name="wr_'+wr+'" class="tm_form_text_m"/> <img src="./img/btn_file_void.gif" alt="파일삭제" title="삭제" class="btn_delete" /></li>');
}
});
$("#url_input").on('click','.btn_delete',function(){
$(this).parent('li').remove(); x--; wr--;
})
});
</script>
답변 감사드립니다. 테스트 결과 잘 진행이 되지만 삭제하는 부분에서 순서대로 삭제하는 것이 아닌 띄엄 띄엄 삭제한 뒤다시 추가버튼을 누르면 name의 값이 중복이 되어서 출력이 되는 것을 확인을 하여 이부분 또한 방법을 찾아야 할꺼같습니다 ㅜ
한번 생각해 본 코드입니다. 잘 될지는 모르겠습니다. (잘 되었으면 좋겠습니다.)
<script>
var num = 2;
function add_input() {
num = num + 1;
$('#field').append('<br /><input type="text" name="wr_' + num + '" class="frm_input full_input" size="50" maxlength="255" placeholder="Email" style="margin-bottom: 10px;"');
}
</script>
안되네영 ㅜㅜ 답변 감사드립니다!