채택완료
버튼 클릭 시 input 자동추가에 의한 name 지정 문의드립니다.
Copy
<!-- 이메일 버튼 추가 영역 -->
<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개 / 댓글 3개
채택된 답변
+20 포인트
추가형 input을 만들 경우 name 값을 하나로 해서 배열로 보내주고 update 쪽에서 받은 배열을 나누어서 DB에 입력하는 방식으로 가는 방법도 있습니다.
한번 생각해 본 코드입니다. 잘 될지는 모르겠습니다. (잘 되었으면 좋겠습니다.)
Copy
<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>jquery로 제작해 사용하고 있는 것을 wr_2 부분 숫자 늘어 나고 생성된 요소
삭제할 수도 있는 소스입니다.
참조하셔 잘 사용해 보세요.
Copy
<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>답변을 작성하려면 로그인이 필요합니다.