여분필드에 입력을 하면 2개의 필드 값이 바로 계산되어 보여지는 ,.,
본문
<table id="table1" cellspacing="0" cellpadding="0" width=100%>
<tr class="sound_only">
<th>구분</th>
</tr>
<?php
$wr31_cnt = count($wr_31x);
if(!$wr31_cnt){
$wr31_cnt = 1;
}
for ($i = 0; $i < $wr31_cnt; $i++) {
?>
<tr>
<td style="border:hidden;" align="center">
<table id="table10" width=100% align="center">
<tr><td style="padding:20px 0 20px 20px; border-bottom:2px solid #8A0808;">
<p><input type="text" id="input1" name="wr_31x[]" value="상품명" style="border:hidden;" readonly><input type="text" id="input2" name="wr_32x[]" id="wr_32" value="<?=$wr_32x[$i]?>">
<input type="text" id="input1" name="wr_33x[]" value="상품URL" style="border:hidden; padding:0 0 0 25px;" readonly><input type="text" id="input2" name="wr_34x[]" id="wr_34" value="<?=$wr_34x[$i]?>"></p>
<br>
<p><input type="text" id="input1" name="wr_35x[]" value="가격" style="border:hidden;" readonly><input type="text" id="input2" name="wr_36x[]" value="<?=$wr_36x[$i]?>" onkeyup="this.value=this.value.replace(/[^.0-9]/g,'')";>
<input type="text" id="input1" name="wr_37x[]" value="수량" style="border:hidden; padding:0 0 0 25px;" readonly><input type="text" id="input2" name="wr_38x[]" value="<?=$wr_38x[$i]?>" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')";></p>
<br>
<p><input type="text" id="input1" name="wr_39x[]" value="옵션" style="border:hidden;" readonly><input type="text" id="input3" name="wr_40x[]" value="<?=$wr_40x[$i]?>">
<input type="button" class="btn btn-danger" value="삭제" class="tabledel_btn" onclick="ob_adRows.delRow(this)"/> </p>
<?php $admin10 = $is_admin || $member['mb_level'] == 10; ?>
<div style="display:<?php echo $admin10 ? 'block' : 'none'; ?>"> 입고유무
<select name="wr_41x[]" style="width:400px;height:30px;">
<option value="미입고"<?=($wr_41x[$i] == "미입고")? "selected" : "";?>>미입고</option>
<option value="입고"<?=($wr_41x[$i] == "입고")? "selected" : "";?>>입고</option>
</select>
</div>
</td></tr></table>
</td>
</tr>
</div>
<?php } ?>
<table id="dyntbl1" cellspacing="0" cellpadding="0"></table>
<script>
function adRowsTable(id){
var table = document.getElementById(id);
var me = this;
if(document.getElementById(id)){
var row1 = table.rows[1].outerHTML;
function setIds(){
var tbl_id = document.querySelectorAll('#'+ id +' .tbl_id');
for(var i=0; i<tbl_id.length; i++) tbl_id[i].innerHTML = i+1;
}
me.addRow = function(btn){
btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1): table.insertAdjacentHTML('beforeend',row1);
setIds();
}
me.delRow = function(btn){
btn.parentNode.parentNode.outerHTML ='';
setIds();
}
}
}
var ob_adRows = new adRowsTable('table1');
</script>
<p><input style="float:left; margin: 5px 2px;" type="button" class="btn btn-primary" value="상품추가" onclick="ob_adRows.addRow()"/></p>
상품 정보 입력 및 추가 할 수 있는 내용입니다. 여기에 wr_36x[] 가격 & wr_38x[] 수량 입니다. 이 2개의 값이 작성하는 부분에서 입력이 되었을 때 실시간으로 계산 되어 보이게 할 수 있는 방법이 있을까요?
수량 옆에 2개의 계산된 값이 바로 보여지게 가능 할까요?
답변 1
아래의 코드를 한번 참고를 해보세요..
<p>
<input type="text" id="input1" name="wr_35x[]" value="가격" style="border:hidden;" readonly>
<input type="text" id="input2" name="wr_36x[]" value="<?=$wr_36x[$i]?>" onkeyup="this.value=this.value.replace(/[^.0-9]/g,''); calculateTotal(this);">
<input type="text" id="input1" name="wr_37x[]" value="수량" style="border:hidden; padding:0 0 0 25px;" readonly>
<input type="text" id="input2" name="wr_38x[]" value="<?=$wr_38x[$i]?>" onkeyup="this.value=this.value.replace(/[^0-9]/g,''); calculateTotal(this);">
<span class="total-price">합계: 0</span>
</p>
<script>
function calculateTotal(input) {
var row = input.closest('p');
var price = parseFloat(row.querySelector('input[name="wr_36x[]"]').value) || 0;
var quantity = parseInt(row.querySelector('input[name="wr_38x[]"]').value) || 0;
var total = price * quantity;
row.querySelector('.total-price').textContent = '합계: ' + total.toFixed(2);
}
// 페이지 로드 시 기존 입력값에 대해 계산 실행
document.addEventListener('DOMContentLoaded', function() {
var priceInputs = document.querySelectorAll('input[name="wr_36x[]"]');
priceInputs.forEach(function(input) {
calculateTotal(input);
});
});
// 새 행 추가 시 이벤트 리스너 추가
function addEventListenersToNewRow(row) {
var priceInput = row.querySelector('input[name="wr_36x[]"]');
var quantityInput = row.querySelector('input[name="wr_38x[]"]');
priceInput.addEventListener('input', function() { calculateTotal(this); });
quantityInput.addEventListener('input', function() { calculateTotal(this); });
}
// 기존 addRow 함수 수정
var originalAddRow = ob_adRows.addRow;
ob_adRows.addRow = function(btn) {
originalAddRow.call(this, btn);
var newRow = btn ? btn.parentNode.parentNode.nextSibling : table.lastElementChild;
addEventListenersToNewRow(newRow);
};
// 기존 행에 이벤트 리스너 추가
document.querySelectorAll('#table1 tr').forEach(function(row) {
addEventListenersToNewRow(row);
});
</script>
정말 좋은 답변 감사합니다. 덕분에 잘 해결 되었습니다.