셀렉트박스를 이용한 계산식 질문드립니다ㅠ
본문
<?php
$price = "";
?>
<select name="item" id="item">
<option value="">-품목-</option>
<option value="1000">오이</option>
<option value="3000">호박</option>
</select>
<select name="count" id="count">
<option value="">-수량-</option>
<option value="1">1개</option>
<option value="2">2개</option>
<option value="3">3개</option>
</select>
<?=$price?>원
셀렉트박스 선택을 통해 $price값을 구하려는데,
계산값은 품목 x 수량으로 나오게 하고싶습니다ㅜ
완전 쌩초보라, 어떻게 해야할지 모르겠네요
아시는분 답변 부탁드립니다ㅜㅜ
답변 3
<select name="item" id="item" onchange="price_value()">
<option value="">-품목-</option>
<option value="1000">오이</option>
<option value="3000">호박</option>
</select>
<select name="count" id="count" onchange="price_value()">
<option value="">-수량-</option>
<option value="1">1개</option>
<option value="2">2개</option>
<option value="3">3개</option>
</select>
가격 <span id='price'></span>
<script>
function price_value(){
itemk = document.getElementById('item').value;
valuek =document.getElementById('count').value;
if(itemk && valuek){ vv = itemk * valuek;
document.getElementById('price').innerText =vv.toLocaleString();
}
}
</script>
코드를 그런식으로 구성해서는 기대하는대로 절대 동작하지 않습니다.
<?php ... ?>
<?=...?>
<? ... ?>
들은 서버에서 먼저 실행되고 난후
나머지 부분들과 합쳐져 사용자 브라우저에 전달됩니다.
사용자 브라우저에 코드가 전달된 이후인 만큼 그 시점에서는
서버와의 연결은 종료된 상태이고
<?php ... ?>
<?=...?>
<? ... ?>
부분은 존재하지 않으며 컨트롤 할수 없다고 생각하셔야 합니다.
즉시즉시 하려면 이런 방식으로 해야 합니다.
<select name="item" id="item">
<option value="">-품목-</option>
<option value="1000">오이</option>
<option value="3000">호박</option>
</select>
<select name="count" id="count">
<option value="">-수량-</option>
<option value="1">1개</option>
<option value="2">2개</option>
<option value="3">3개</option>
</select>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
var item = $('#item');
var count = $('#count');
function calc_price() {
item_value = Number(item.val());
count_value = Number(count.val());
alert(item_value + ' * ' + count_value + ' = ' + (item_value * count_value));
}
item.change(calc_price);
count.change(calc_price);
});
</script>
답변을 작성하시기 전에 로그인 해주세요.