当前位置：文江博客话题详情

Javascript/Ajax/Jquery 动态计算表单变化

发布于 2024-10-17 14:18:14 字数 325 浏览 2 评论 0原文

我有一个小表单，将由 Mysql 和人工输入填充。我想做的是根据其他字段填充其他 3 个字段。

示例：

总零件（Mysql）

劳动力（用户）

杂项（用户）

小计（上述动态总计）

税收（上述动态计算 - sub * 13％）

总计（子+税）

我已经搜索过但无法完全找到我正在寻找什么，而且我在 Javascript/Ajax/Jquery 方面的技能为零，所以我无法修改任何东西来工作，尽管我尝试得很惨。

有人可以帮助我解决这个问题，或者向我指出一个可能适合我需要的脚本。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开柳相依 2024-10-24 14:18:14

好吧，抱歉，我以为您正在寻找一些复杂的代码。这是您正在寻找的内容的一个简单示例。

<html>
<head>
</head>
<body>
<script>
function doMath() {
    var totalparts = parseInt(document.getElementById('parts_input').value);
    var labor = parseInt(document.getElementById('labor_input').value);
    var misc = parseInt(document.getElementById('misc_input').value);
    var subtotal = totalparts + labor + misc;
    var tax = subtotal * .13;
    var total = subtotal + tax;

    document.getElementById('subtotal_input').value = subtotal;
    document.getElementById('tax_input').value = tax;
    document.getElementById('total_input').value = total;
}
</script>

<div>Total Parts: <input type="text" id="parts_input" value="1" readonly="true" /></div>
<div>Labor: <input type="text" id="labor_input" onBlur="doMath();" /></div>
<div>Misc: <input type="text" id="misc_input" onBlur="doMath();" /></div>
<div>Sub Total: <input type="text" id="subtotal_input" readonly="true" /></div>
<div>Tax: <input type="text" id="tax_input" readonly="true" /></div>
<div>Total: <input type="text" id="total_input" readonly="true" /></div>
</body>
</html>

显然这并没有从数据库中获取动态值。如果您使用 PHP，您可以将这一行：换成

<div>Total Parts: <input type="text" id="parts_input" value="1" readonly="true" /></div>

这样的：

<div>Total Parts: <input type="text" id="parts_input" value="<?PHP include('getTotalParts.php'); ?>" readonly="true" /></div>

其中 getTotalParts.php 是您为获取数据库信息而创建的文件。它可以简单地获取信息并执行“echo $totalParts;”

Alright sorry, I thought you were looking for some complex code. Here is a simple example of exactly what you're looking for.

<html>
<head>
</head>
<body>
<script>
function doMath() {
    var totalparts = parseInt(document.getElementById('parts_input').value);
    var labor = parseInt(document.getElementById('labor_input').value);
    var misc = parseInt(document.getElementById('misc_input').value);
    var subtotal = totalparts + labor + misc;
    var tax = subtotal * .13;
    var total = subtotal + tax;

    document.getElementById('subtotal_input').value = subtotal;
    document.getElementById('tax_input').value = tax;
    document.getElementById('total_input').value = total;
}
</script>

<div>Total Parts: <input type="text" id="parts_input" value="1" readonly="true" /></div>
<div>Labor: <input type="text" id="labor_input" onBlur="doMath();" /></div>
<div>Misc: <input type="text" id="misc_input" onBlur="doMath();" /></div>
<div>Sub Total: <input type="text" id="subtotal_input" readonly="true" /></div>
<div>Tax: <input type="text" id="tax_input" readonly="true" /></div>
<div>Total: <input type="text" id="total_input" readonly="true" /></div>
</body>
</html>

Obviously this doesn't grab the dynamic value from a database. If you use PHP you can swap this line:

<div>Total Parts: <input type="text" id="parts_input" value="1" readonly="true" /></div>

for one like this:

<div>Total Parts: <input type="text" id="parts_input" value="<?PHP include('getTotalParts.php'); ?>" readonly="true" /></div>

Where the getTotalParts.php is a file you make to get your database information. It can simply grab the information and do a "echo $totalParts;"

回复收藏 0 原文

瞳孔里扚悲伤 2024-10-24 14:18:14

您可以仅使用 onblur （当用户离开每个输入字段时激活）来计算字段。

...<input name="labour" id=total onblur="$('#total').val($('#sub').val() + $('#tax').va())">

您没有提供足够的信息来对“零件总数”字段发表评论。

You can just use onblur (activated when a user leaves each of the input fields) to calcuate the fields.

...<input name="labour" id=total onblur="$('#total').val($('#sub').val() + $('#tax').va())">

You haven't provided enough information to comment on the "Total Parts" field.

回复收藏 0 原文

~没有更多了~

关于作者

好久不见√

暂无简介

0 文章

0 评论

23 人气

关注发私信

linfzu01

文章 0 评论 0

关注

§对你不离不弃

文章 0 评论 0

关注

可遇━不可求

文章 0 评论 0

关注

枕梦

文章 0 评论 0

关注

qq_3LFa8Q

文章 0 评论 0

关注

JP

文章 0 评论 0

友情链接

文江博客

Javascript/Ajax/Jquery 动态计算表单变化

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

Javascript/Ajax/Jquery 动态计算表单变化

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。