FMJ.me

FMJ.me

一个靠自学的菜鸟,只会html+css,JavaScript是什么鬼?vue.js?php?学不动学不动...

工作室 联系QQ

冯美杰就是我。单纯的个人博客,只做记录,别无其他。

鄂ICP备15002105号

Powered By wordpress ,Theme By 天兴工作室

一个select改变input的值 并叠加上计算。。。

fmj 发布于 2016年09月08日 82 浏览 0 评论


最近在接的一个单子,需要做一个表单给网站访客填写信息提交。

这是一个不复杂的事情。

结果由于没仔细看表单中的逻辑,实际开始动手做的时候才懵逼了...

具体是这样:有多个具体产品,每一个产品对应显示不同的价格,填写需要订购的产品数量,会自动根据产品价格*产品数量得出产品总价。

所以一个select(产品名称),三个input(产品单价、产品数量、产品总价)。

折腾了老半天,分享下折腾好的代码。

select:

<select name="D1" id="D1"  onchange="a(this)">
    <option selected="selected" value="5">产品1</option>
    <option value="4">产品2</option>
    <option value="3.5">产品3</option>
    <option value="5">产品4</option>
</select>

input:

单价:<input type="text" name="D2" id="D2" class="text" value="1" size="3" tabindex="2" 
onkeyup="checkInt(this);" onpaste="checkInt(this);" oncut="checkInt(this);" ondrop="checkInt(this);" 
onchange="checkInt(this);">
数量:<input type="text" name="D4" id="D4" class="text" value="" size="28" tabindex="1"
 onkeyup="checkP(this);" onpaste="checkP(this);" oncut="checkP(this);" ondrop="checkP(this);" 
 onchange="checkP(this);"/>
总价:<input type="text" name="D5" id="D5" class="text" value="" size="28" tabindex="1" readonly/>

然后就是js部分:

//获取select的value值赋给单价的input
<SCRIPT LANGUAGE="JavaScript">
function a(obj)
{
document.getElementById("D2").value=obj.options[obj.selectedIndex].value;
}
</SCRIPT>
//计算,单价乘以数量
<script> 
function checkInt(o){ 
theV=isNaN(parseInt(o.value))?0:parseInt(o.value); 
if(theV!=o.value){o.value=theV;} 
D5.value=D2.value*D4.value; 
} 
function checkP(o){ 
theV=isNaN(parseFloat(o.value))?0:parseFloat(o.value); 
theV=parseInt(theV*100)/100; 
if(theV!=o.value){ 
theV=(theV*100).toString(); 
theV=theV.substring(0,theV.length-2)+"."+theV.substring(theV.length-2,theV.length) 
o.value=theV; 
} 
D5.value=D2.value*D4.value; 
} 
</script>

然后就没有然后了...折腾的蛋疼!

上一篇:

下一篇:

×
欢迎评论
冯美杰就是我。单纯的个人博客,只做记录,别无其他。

鄂ICP备15002105号

Powered By wordpress ,Theme By 天兴工作室

导航 关灯 背景 顶部

纯色背景

图片背景