자바스트립트와 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);
}
});
제가 예시를 조금 잘못들어 조금 헤매이긴 했지만
덕분에 배워 갑니다. Min아빠님걸로 먼저 적용해서 채택을 아빠님을 해드렸네요
다시 한 번 감사드립니다.
