자바스트립트와 php 소스 혼용 시 변수관련

자바스트립트와 php 소스 혼용 시 변수관련

QA

자바스트립트와 php 소스 혼용 시 변수관련

본문

여분필드를 활용해 추가 입력폼 작업을 하고 있습니다.

입력폼이 많아 각 항목별로 여분필드에 배열로 넣고있는데

 

특정 항목은 가변적이라 스크립트를 이용해 폼을 추가, 삭제 하는 것을 구현했습니다.

 

아래 스크립트는 대충 table의 상단 항목중 + 버튼을 누르면 아래로 

<td><input>입력폼이 늘어나 원하는 만큼 데이터를 넣을 수 있는 소스입니다.

 

문제는 수정 시 기존 항목을 불러와 수정을 해야 하는데

그럴려면 입력당시의 input 만큼 i 값을 처리 해야 하는데

+ 버튼으로 스크립트 소스가 늘어날때 i를 1씩 늘어나게 하려면 어떻게 해야 할까요?

수정시에 필요한 부분이라 input의 value안의 변수만 증가하면 됩니다. 

실제<?php echo wr_1[$i];?> 요부분에 변수i 대신 0부터1씩 늘려서 그냥 넣으면 해당 값을 불러오긴 합니다. 

 

 

 

<table id="item_table">

<th>구분</th>

<th>내용</th>

<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>

</table>

 

<script>

$(document).ready(function(){

   $(document).on('click', '.add', function(){

      var html = '';

      html += '<tr align=center>';

      html += "<td >이름</td>";

      html += "<td ><input type='text' name='wr_1[]'  value='<?php echo wr_1[$i];?>' id='wr_1'  class='form-control input-sm' size='50' maxlength='255'></td>";

      html += '<td ><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';

      html += '</tr>';

      $('#item_table').append(html);

   });

   $(document).on('click', '.remove', function(){

      $(this).closest('tr').remove();

   });

});

</script>

이 질문에 댓글 쓰기 :

답변 2

아래와 같이 하시면 됩니다.


var wr_num = <?php echo wr_1[$i];?>;
$(document).ready(function(){
   $(document).on('click', '.add', function(){
      wr_num++;
      var html = '';
      html += '<tr align=center>';
      html += "<td >이름</td>";
      html += "<td ><input type='text' name='wr_1[]'  value='"+wr_num+"' id='wr_1'  class='form-control input-sm' size='50' maxlength='255'></td>";
      html += '<td ><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
      html += '</tr>';
      $('#item_table').append(html);
   });
   $(document).on('click', '.remove', function(){
      $(this).closest('tr').remove();
   });
});

 

이게 맞는지는 모르겠네요

 


var wr_1 = <?php echo json_encode(wr_1); ?>;
$(document).on('click', '.add', function(){
    for (var i = 0; i < 10; i++) {
        var html = '';
        html += '<tr align=center>';
        html += "<td >이름</td>";
        html += "<td ><input type='text' name='wr_1[]'  value='" + wr_1[i] + "' id='wr_1'  class='form-control input-sm' size='50' maxlength='255'></td>";
        html += '<td ><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        html += '</tr>';
        $('#item_table').append(html);
    }
});
 
답변을 작성하시기 전에 로그인 해주세요.
전체 4

회원로그인

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