input에 계산된값 넣기 질문드립니다.
본문
안녕하세요.
소스중 컬러 표기된 input 에 자동 계산된 값을 넣으려합니다.
바로 윗줄 <span>에 자동 값이 나오는데 input에도 넣고자합니다.
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="">
<tbody>
<tr height="30">
<td style="text-align:center;padding:5 0 0 10; background-color:#DFDFDF"><strong>금액
계산기</strong> ?? 가로사이즈의 최대값은 240cm 입니다.</td>
</tr>
<tr height="30">
<td valign="top" style=" vertical-align:middle;text-align:center;border-bottom-width:1; border-bottom-style:solid; background-color:#cccccc"">
가로 :
<input type="number" min="1" id="grr" name="grr" style="width:50px;text-align:center;" value=""> cm X
세로 :
<input type="number" min="1" id="srr" name="srr" style="width:50px;text-align:center;" value=""> cm
<!-- 면적 <input type = 'text' id = 'size_total' name = 'size_total' style = 'width:35px;text-align:center;' value = '1.50' readonly> m² -->
</td>
</tr>
<tr id="arr" style="display:none" height="30">
<td id="err" valign="top" style=" vertical-align:middle;text-align:center;">
??
</td>
</tr>
<tr height="30">
<td valign="middle" style="text-align:center;padding:0 0 5 5;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" style=" width: 200px;padding:0 0 0 15px;vertical-align:middle;">
<div style="padding-top:3;float:left;font-size:14px; font-weight:bold;">
수량 : <input type="number" name="spinner" id="spinner" size="2" value="1" style="text-align:right;"
step="1" min="1" max="999"></div>
<div style="padding-top:3; float:left;font-size:14px; font-weight:bold;">개</div>
</td>
<td style="text-align:right; width: 200px;padding:0 10px 0 0;">
<div style="text-align:right">
<b>
<span style="font-size:14px">총 상품금액 :</span>
<span id="ct_price_size" style="color:#F36;font-size:14px;">0원</span>
<input id="ct_price_size" type="text" /> <---이부분에 계산된 값을 넣으려합니다.
<div id="sit_tot_price"></div>
</b>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script>
</script>
<script>
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").slice(0, -1) + '0';
}
var rs
var d = {
a: {
heavy: 1500
},
l: {
heavy: 2000
},
h: {
heavy: 1000
}
}
var total = 1
var price = 0
function size() {
}
function ct(n) {
total += n
}
function hh() {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
var sl = $("#selc").val()
switch (sl) {
case 'a':
if ($("#grr").val() * ($("#srr").val()) < 1500) {
$("#err").text("?? 원목/우드의 기본헤비는 1.5m² 입니다")
//$("#arr").show()
$("#ct_price_size").text(numberWithCommas(30000) + "원")
rs = 30000
return 30000
} else {
$("#arr").hide()
return false
}
break
case 'l':
if ($("#grr").val() < 150 || ($("#srr").val()) < 150) {
$("#ct_price_size").text(numberWithCommas(40000) +"원")
rs= 40000
return 40000
} else {
$("#arr").hide()
return false
}
if ($("#grr").val() * ($("#srr").val()) < 2000) {
$("#err").text("?? 롤/콤비/트리플의 기본헤비는 2m² 입니다")
//$("#arr").show()
$("#ct_price_size").text(numberWithCommas(40000) +"원")
rs= 40000
return 40000
} else {
$("#arr").hide()
return false
}
break
case 'h':
if ($("#grr").val() * ($("#srr").val()) < 1000) {
$("#err").text("?? 허니콤의 기본헤비는 1m² 입니다")
//$("#arr").show()
$("#ct_price_size").text(numberWithCommas(20000) +"원")
rs = 20000
return 20000
} else {
$("#arr").hide()
return false
}
break
default:
}
}
$("#selc").on("change", function () {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
var tva = $('#spinner').val()
if (hh()) {
rs = hh()
} else {
rs = Math.round((parseInt($("#grr").val()) * parseInt($("#srr").val())) / 10000 * 10000 * 2) * tva
if ($("#selc").val() === 'a') {
rs = rs < 30000 ? 30000 :rs
} else if (($("#selc").val() === 'l')) {
rs = rs < 40000 ? 40000 :rs
} else {
rs = rs < 20000 ? 20000 :rs
}
}
$("#ct_price_size").text(numberWithCommas(rs*tva) + "원")
})
$("#spinner").on("input change paste keyup", function () {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
var tva = $('#spinner').val()
if ($(this).val() < 0) {
alert('최소 구매수량은 1개 입니다')
$(this).val(1)
}
if (hh()) {
rs = hh()
} else {
rs = Math.round((parseInt($("#grr").val()) * parseInt($("#srr").val())) / 10000 * 10000 * 2) * tva
if ($("#selc").val() === 'a') {
rs = rs < 30000 ? 30000 :rs
} else if (($("#selc").val() === 'l')) {
rs = rs < 40000 ? 40000 :rs
} else {
rs = rs < 20000 ? 20000 :rs
}
}
$("#ct_price_size").text(numberWithCommas(rs*tva) + "원")
})
$("#grr").on("input change paste keyup", function () {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
hh()
var tva = $('#spinner').val()
var rs = Math.round((parseInt($("#grr").val()) * parseInt($("#srr").val())) / 10000 * 10000 * 2) * tva
if ($("#selc").val() === 'a') {
rs = rs < 30000 ? 30000 :rs
} else if (($("#selc").val() === 'l')) {
rs = rs < 40000 ? 40000 :rs
} else {
rs = rs < 20000 ? 20000 :rs
}
$("#ct_price_size").text(numberWithCommas(rs*tva) + "원")
})
$("#srr").on("input change paste keyup", function () {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
hh()
var tva = $('#spinner').val()
console.log(tva)
var rs = Math.round((parseInt($("#grr").val()) * parseInt($("#srr").val())) / 10000 * 10000 * 2) * tva
if ($("#selc").val() === 'a') {
rs = rs < 30000 ? 30000 :rs
} else if (($("#selc").val() === 'l')) {
rs = rs < 40000 ? 40000 :rs
} else {
rs = rs < 20000 ? 20000 :rs
}
$("#ct_price_size").text(numberWithCommas(rs*tva) + "원")
})
$("#grr").on("input change paste keyup", function () {
if ($(this).val() > 240) {
alert('최대 입력가능한 가로사이즈는 240Cm 입니다')
$(this).val(240)
}
})
</script>
답변 1
아래 빨간 부분 수정하고 추가해보세요.
input 에는 숫자만 나타나게 했습니다.
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="">
<tbody>
<tr height="30">
<td style="text-align:center;padding:5 0 0 10; background-color:#DFDFDF"><strong>금액
계산기</strong> ?? 가로사이즈의 최대값은 240cm 입니다.</td>
</tr>
<tr height="30">
<td valign="top" style=" vertical-align:middle;text-align:center;border-bottom-width:1; border-bottom-style:solid; background-color:#cccccc"">
가로 :
<input type="number" min="1" id="grr" name="grr" style="width:50px;text-align:center;" value=""> cm X
세로 :
<input type="number" min="1" id="srr" name="srr" style="width:50px;text-align:center;" value=""> cm
<!-- 면적 <input type = 'text' id = 'size_total' name = 'size_total' style = 'width:35px;text-align:center;' value = '1.50' readonly> m² -->
</td>
</tr>
<tr id="arr" style="display:none" height="30">
<td id="err" valign="top" style=" vertical-align:middle;text-align:center;">
??
</td>
</tr>
<tr height="30">
<td valign="middle" style="text-align:center;padding:0 0 5 5;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" style=" width: 200px;padding:0 0 0 15px;vertical-align:middle;">
<div style="padding-top:3;float:left;font-size:14px; font-weight:bold;">
수량 : <input type="number" name="spinner" id="spinner" size="2" value="1" style="text-align:right;"
step="1" min="1" max="999"></div>
<div style="padding-top:3; float:left;font-size:14px; font-weight:bold;">개</div>
</td>
<td style="text-align:right; width: 200px;padding:0 10px 0 0;">
<div style="text-align:right">
<b>
<span style="font-size:14px">총 상품금액 :</span>
<span id="ct_price_size" style="color:#F36;font-size:14px;">0원</span>
<input id="ct_price_size2" type="text" /> <---이부분에 계산된 값을 넣으려합니다.
<div id="sit_tot_price"></div>
</b>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script>
</script>
<script>
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",").slice(0, -1) + '0';
}
var rs
var d = {
a: {
heavy: 1500
},
l: {
heavy: 2000
},
h: {
heavy: 1000
}
}
var total = 1
var price = 0
function size() {
}
function ct(n) {
total += n
}
function hh() {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
var sl = $("#selc").val()
switch (sl) {
case 'a':
if ($("#grr").val() * ($("#srr").val()) < 1500) {
$("#err").text("?? 원목/우드의 기본헤비는 1.5m² 입니다")
//$("#arr").show()
$("#ct_price_size").text(numberWithCommas(30000) + "원")
rs = 30000
return 30000
} else {
$("#arr").hide()
return false
}
break
case 'l':
if ($("#grr").val() < 150 || ($("#srr").val()) < 150) {
$("#ct_price_size").text(numberWithCommas(40000) +"원")
rs= 40000
return 40000
} else {
$("#arr").hide()
return false
}
if ($("#grr").val() * ($("#srr").val()) < 2000) {
$("#err").text("?? 롤/콤비/트리플의 기본헤비는 2m² 입니다")
//$("#arr").show()
$("#ct_price_size").text(numberWithCommas(40000) +"원")
rs= 40000
return 40000
} else {
$("#arr").hide()
return false
}
break
case 'h':
if ($("#grr").val() * ($("#srr").val()) < 1000) {
$("#err").text("?? 허니콤의 기본헤비는 1m² 입니다")
//$("#arr").show()
$("#ct_price_size").text(numberWithCommas(20000) +"원")
rs = 20000
return 20000
} else {
$("#arr").hide()
return false
}
break
default:
}
}
$("#selc").on("change", function () {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
var tva = $('#spinner').val()
if (hh()) {
rs = hh()
} else {
rs = Math.round((parseInt($("#grr").val()) * parseInt($("#srr").val())) / 10000 * 10000 * 2) * tva
if ($("#selc").val() === 'a') {
rs = rs < 30000 ? 30000 :rs
} else if (($("#selc").val() === 'l')) {
rs = rs < 40000 ? 40000 :rs
} else {
rs = rs < 20000 ? 20000 :rs
}
}
$("#ct_price_size").text(numberWithCommas(rs*tva) + "원")
$("#ct_price_size2").val(rs*tva);
})
$("#spinner").on("input change paste keyup", function () {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
var tva = $('#spinner').val()
if ($(this).val() < 0) {
alert('최소 구매수량은 1개 입니다')
$(this).val(1)
}
if (hh()) {
rs = hh()
} else {
rs = Math.round((parseInt($("#grr").val()) * parseInt($("#srr").val())) / 10000 * 10000 * 2) * tva
if ($("#selc").val() === 'a') {
rs = rs < 30000 ? 30000 :rs
} else if (($("#selc").val() === 'l')) {
rs = rs < 40000 ? 40000 :rs
} else {
rs = rs < 20000 ? 20000 :rs
}
}
$("#ct_price_size").text(numberWithCommas(rs*tva) + "원")
$("#ct_price_size2").val(rs*tva);
})
$("#grr").on("input change paste keyup", function () {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
hh()
var tva = $('#spinner').val()
var rs = Math.round((parseInt($("#grr").val()) * parseInt($("#srr").val())) / 10000 * 10000 * 2) * tva
if ($("#selc").val() === 'a') {
rs = rs < 30000 ? 30000 :rs
} else if (($("#selc").val() === 'l')) {
rs = rs < 40000 ? 40000 :rs
} else {
rs = rs < 20000 ? 20000 :rs
}
$("#ct_price_size").text(numberWithCommas(rs*tva) + "원")
$("#ct_price_size2").val(rs*tva);
})
$("#srr").on("input change paste keyup", function () {
if (!($("#grr").val()) || !($("#srr").val())) {
return
}
hh()
var tva = $('#spinner').val()
console.log(tva)
var rs = Math.round((parseInt($("#grr").val()) * parseInt($("#srr").val())) / 10000 * 10000 * 2) * tva
if ($("#selc").val() === 'a') {
rs = rs < 30000 ? 30000 :rs
} else if (($("#selc").val() === 'l')) {
rs = rs < 40000 ? 40000 :rs
} else {
rs = rs < 20000 ? 20000 :rs
}
$("#ct_price_size").text(numberWithCommas(rs*tva) + "원")
$("#ct_price_size2").val(rs*tva);
})
$("#grr").on("input change paste keyup", function () {
if ($(this).val() > 240) {
alert('최대 입력가능한 가로사이즈는 240Cm 입니다')
$(this).val(240)
}
})
</script>
감사합니다. ^^
