SIR
목록으로

여분필드에 입력을 하면 2개의 필드 값이 바로 계산되어 보여지는 ,., 채택완료

달달료라
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 4,716
답변 1
목록

Copy 
<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'; ?>"> 입고유무
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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개

채택된 답변
+20 포인트

아래의 코드를 한번 참고를 해보세요..

 

 

<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>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

정말 좋은 답변 감사합니다. 덕분에 잘 해결 되었습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고