Javascript/Ajax/Jquery在更改时动态计算表单
Javascript/Ajax/Jquery Dynamically calculation form on change
我有一个小表单,它将从Mysql数据库和人工输入中填充。我想做的是在其他字段的基础上计算另外两个字段。
示例形式:
- 指标(MySQL)(下拉列表)
- 小时当量(MySQL)
- 等效SKS(MySQL)
- 金额(用户)
- 小时总计(金额*小时当量)
- SKS总额(金额*SKS等价物)
- 提交(保存到表格的按钮)
这是我试图解决的计算操作的一个例子
- 指示器=A
- 小时当量=20
- SKS当量=15
- 数量=2
- 小时总数(金额*小时当量)=40
- SKS总额(金额*SKS等价物)=30
我四处寻找并尝试了一些解决方案,但我找不到我想要的东西,而且我在Javascript/Ajax/Jquery中的技能也不太好,所以我无法做任何工作,尽管我尝试得很糟糕。
怎么做?
这是HTML表单
<form>
<fieldset>
<legend>PSC Achievement</legend>
<!-- Button Drop Down -->
<div class="form-group">
<label for="buttondropdown">Indicator</label>
<button type="button" data-toggle="dropdown">
Choose
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
</ul>
</div>
<label for="txtsks">SKS Equivalent</label>
<input id="txtsks" name="txtSks" type="text">
<label for="txtjam">Hour Equivalent </label>
<input id="txtjam" name="txtHour"type="text">
<label for="textjml">Amount</label>
<input id="textjml" name="txtAmount" type="text">
<label for="Totalhour">Hour Total</label>
<input id="Totalhour" name="Totalhour" type="text">
<label for="Totalsks">SKS Total</label>
<input id="Totalsks" name="Totalsks" type="text">
<label for="btn_submit"></label>
<button id="btn_submit" name="btn_submit">Submit</button>
</fieldset>
</form>
您的解决方案如下:https://jsfiddle.net/tv94prmu/。Calc函数是更改事件的结果。结果将在其中一个字段填写后显示
$(function(){
$('#txtsks,#txtjam,#textjml').change(function(){
calc();
})
function calc(){
$('#Totalhour').val(parseInt($('#txtjam').val())*parseInt($('#textjml').val()))
$('#Totalsks').val(parseInt($('#txtsks').val())*parseInt($('#textjml').val()))
}
})
此外,您还需要在页面中包含jquery库。
如果我答对了你的答案。
你需要提供更多关于你的代码的信息,但是,据我所知。。您需要为表单添加事件处理程序(如下所示)。
-
请注意,您已经用大写字母设置了一些元素的id,用camelCase设置了一些。这是不好的做法,为了更好的做法,决定你正在工作的模式。
当您将来返回到您的代码时,它将更容易处理。
txtsks.addEventListener("blur", function( event ) {
/* call SKS Equivalent function */
}, true);
txtjam.addEventListener("blur", function( event ) {
/* call Hour Equivalent function */
}, true);
textjml.addEventListener("blur", function( event ) {
/* call Amount (User) function */
}, true);
Totalhour.addEventListener("blur", function( event ) {
/* call Hour Total (Amount*Hour Equivalent) function */
}, true);
Totalsks.addEventListener("blur", function( event ) {
/* call SKS Total (Amount*SKS Equivalent) function */
}, true);
btn_submit.addEventListener("click", function ( event ) {
/* call Submit(Button to save into table) function */
});
<form>
<fieldset>
<legend>PSC Achievement</legend>
<!-- Button Drop Down -->
<div class="form-group">
<label for="buttondropdown">Indicator</label>
<button type="button" data-toggle="dropdown">
Choose
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
</ul>
</div>
<label for="txtsks">SKS Equivalent</label>
<input id="txtsks" name="txtSks" type="text">
<label for="txtjam">Hour Equivalent </label>
<input id="txtjam" name="txtHour"type="text">
<label for="textjml">Amount</label>
<input id="textjml" name="txtAmount" type="text">
<label for="Totalhour">Hour Total</label>
<input id="Totalhour" name="Totalhour" type="text">
<label for="Totalsks">SKS Total</label>
<input id="Totalsks" name="Totalsks" type="text">
<label for="btn_submit"></label>
<button id="btn_submit" name="btn_submit">Submit</button>
</fieldset>
</form>
相关文章:
- jQuery动态表单显示在select选项上
- 使用AJAX在Rails中提交动态表单的最佳方式是什么
- Small Javascript从动态表单中删除多个元素的问题
- Php,Javascript-动态表单id's和动态验证
- 在动态表单的可见部分中,如何使用javascript生成所需的某些字段
- AngularJS中的动态表单验证 - 是否有更好的解决方案/方法
- 如何添加动态表单元素但保留其值(JS)
- jquery在动态表单输入上验证插件不起作用
- Angularjs在js中绑定动态表单构建
- 正在使用ng消息验证动态表单
- 将动态表单元素限制为最多10个记录
- onchange使用PHP和jQuery对动态表单输入进行计算
- 如何将动态表单保存到数据库/编辑回表单
- 生成动态表单输入字段,并在angularJS中以数组形式收集字段数据
- 基于select选项的javascript动态表单生成
- 具有大型动态表单的主干js
- 如何在Struts1中映射和读取我的动态表单条目
- 如何在java框架(JSF)中基于URL的json响应生成动态表单
- Handlebar.js模板,使用Undercore.js-Zendesk应用程序进行动态表单输入
- 如何针对生成的所有动态表单的Input元素