버튼 클릭 시 input 자동추가에 의한 name 지정 문의드립니다.

버튼 클릭 시 input 자동추가에 의한 name 지정 문의드립니다.

QA

버튼 클릭 시 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>
답변을 작성하시기 전에 로그인 해주세요.
전체 177
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT