使用表单数据执行计算并将其解析回表单
Perform a calculation with form data and parse them back to the form
我是一个完全的javascript菜鸟,但我有一个很好的问题要解决。
我有一个从数据库接收数据的表单。
我写了一个非常简单的javascript,它本身执行我想要的计算。但是我怎样才能将计算值恢复到表单中。我想使用 onkeyup 以便在发送表单之前更新数据。
目前我只有表单和单独的javascript。但我不知道如何让它们一起工作。我知道 javascript 中的 document.write
语句在表单中不起作用。这个,我只是用来构建和检查我的计算器。
一旦填写了impru_rest
值,就必须开始计算。并且它必须将impru_dobanda
和/或impru_sold
的新值发送回表单。
有什么想法吗?
这是表单的一部分
<?php
// create form according to existing loan/interest
echo '<td><div align="center"><input type="text" size="11" name="impru_acc" value = '.$impru_acc.'></div></td>';
echo '<td><div align="center"><input type="text" size="11" name="impru_rest" onkeyup= value = ""></div></td>';
echo '<td><div align="center"><input type="text" size="11" name="impru_sold" value = '.$impru_sold.'></div></td>';
echo '<td><div align="center"><input type="text" size="11" name="impru_dobanda" value = '.$impru_dobanda.'></div></td>';
>?
这是计算
<script type='"text/javascript'">
var impru_acc = ".$impru_acc.";
var impru_dobanda = ".$impru_dobanda.";
var impru_rest = ".$impru_rest.";
var impru_sold = ".$impru_sold.";
if (impru_dobanda>0) {
var difference = impru_dobanda-impru_rest;
} else {
var difference = 0;
}
if (difference > 0) {
impru_dobanda = impru_dobanda - impru_rest;
document.write(impru_sold);
document.write(impru_dobanda);
}
if (difference < 0) {
impru_sold = difference + impru_sold;
impru_dobanda = 0;
document.write(impru_sold);
document.write(impru_dobanda);
}
if (difference == 0) {
impru_dobanda = 0;
var impru_sold=impru_sold-impru_rest;
document.write(impru_sold);
document.write(impru_dobanda);
}
</script>
在Allen123和tinyByte的帮助下,我得到了这个,但它没有任何作用:
我现在在我的标题中添加了 jquery 注释。
我可能在函数中犯了错误,但现在似乎什么都没有发生。我想脚本无法影响表单中的值这就是我所拥有的。我做错了什么?
<?php
// create form according to existing loan/interetest
echo '<td><div align="center"><input type="text" size="11" name="impru_acc" value = '.$impru_acc.'></div></td>';
echo '<td><div align="center"><input type="text" size="11" name="impru_rest" onkeyup=calculateAll(); value = ""></div></td>';
echo '<td><div align="center"><input type="text" size="11" name="impru_sold" value = '.$impru_sold.'></div></td>';
echo '<td><div align="center"><input type="text" size="11" name="impru_dobanda" value = '.$impru_dobanda.'></div></td>';
?>
<script>
function calculateAll(){
var impru_acc = $('input[name="impru_acc"]').val();
var impru_dobanda = $('input[name="impru_dobanda"]').val();
var impru_rest = $('input[name="impru_rest"]').val();
var impru_sold = $('input[name="impru_sold"]').val();
if (impru_dobanda>0) {
var difference = impru_dobanda-impru_rest;
} else {
var difference = 0;
}
if (difference > 0) {
impru_dobanda = impru_dobanda - impru_rest;
}
if (difference < 0) {
impru_sold = difference + impru_sold;
impru_dobanda = 0;
}
if (difference == 0) {
impru_dobanda = 0;
var impru_sold=impru_sold-impru_rest;
}
}
$(document).ready(function(){
$('input').change(function(){
calculateAll();
});
});
计算写入函数并在焦点或更改时触发它,如下所示:
$('input').change(function(){
calculateAll();
});
更新:集合 1:在标头中包含缩小的 jQuery,例如:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
然后在脚本 tag(( 中使用上面的代码。最好把它放在 html 标记的末尾。
不要忘记将所有jQuery代码放入:
<script>
function calculateAll(){
//implement your logic here
var value1 = $('input[name="somename"]').val();
.
.
.
}
$(document).ready(function(){
$('input').change(function(){
calculateAll();
});
});
</script>
<script type='"text/javascript'">
$('input').blur(function()
{
doCalculations();
});
function doCalculations()
{
var impru_acc = ".$impru_acc.";
var impru_dobanda = ".$impru_dobanda.";
var impru_rest = ".$impru_rest.";
var impru_sold = ".$impru_sold.";
if (impru_dobanda>0) {
var difference = impru_dobanda-impru_rest;
} else {
var difference = 0;
}
if (difference > 0) {
impru_dobanda = impru_dobanda - impru_rest;
document.write(impru_sold);
document.write(impru_dobanda);
}
if (difference < 0) {
impru_sold = difference + impru_sold;
impru_dobanda = 0;
document.write(impru_sold);
document.write(impru_dobanda);
}
if (difference == 0) {
impru_dobanda = 0;
var impru_sold=impru_sold-impru_rest;
document.write(impru_sold);
document.write(impru_dobanda);
}
}
</script>
希望这对您有所帮助...
总而言之,我找到了一种不错的工作方式。在发布我的问题和这个答案之间的这段时间里,我开始学习JavaScript。还不太远,但它给了我一些尤里卡时刻。
表单现在包含以下代码,并从数据库中获取其值:
echo '<input type="text" size="11" name="impru_acc" id="impru_acc" value = '.$impru_acc.'>';
echo '<input type="text" size="11" name="impru_rest" id="impru_rest" onchange="calculateAll(this.value)" value = "">';
echo '<input type="text" size="11" name="impru_sold" id="impru_sold" value = '.$impru_sold.'>';
echo '<input type="text" size="11" name="impru_dobanda" id="impru_dobanda" value = '.$impru_dobanda.'>';
我制作了一个单独的 calculateAll.js 文件,并在我的 header.html 文件中调用它。
计算All.js基于我的问题中的脚本,但现在已完成,包括将值解析回表单。该代码包括:
function calculateAll(){
var form = document.forms["fisa"];
var impruDobandaValue = form.elements["impru_dobanda"];
var impruRestValue = form.elements["impru_rest"];
var impruSoldValue = form.elements["impru_sold"];
var impruDobanda = parseInt(impruDobandaValue.value);
var impruRest = parseInt(impruRestValue.value);
var impruSold = parseInt(impruSoldValue.value);
if (impruDobanda > 0) {
var difference = impruDobanda - impruRest;
} else {
var difference = 0;
}
if (difference > 0) {
impruDobanda = impruDobanda - impruRest;
return theForm.elements["impru_dobanda"].value = impruDobanda;
} else if (difference < 0) {
impruSold = difference + impruSold;
impruDobanda = 0;
return form.elements["impru_dobanda"].value = impruDobanda,
form.elements["impru_sold"].value = impruSold;
} else if (difference == 0) {
impruDobanda = 0;
var impruSold = impruSold - impruRest;
return form.elements["impru_dobanda"].value = impruDobanda,
form.elements["impru_sold"].value = impruSold;
}
}
但我遇到了一个小问题。当您犯错误时,表单没有使用其原始值,而是根据更改的值重新计算。这是合乎逻辑的。为了解决此问题,我为表单中的impru_rest字段创建了一个重置按钮。它将重置该字段并恢复表单中impru_sold和impru_dobanda值的原始值。之后可以进行更正。我认为最好用PHP编写代码
<?php echo "<input type='"button'" value='"Reset'" onclick='"var reset = this.form.elements['impru_rest']; reset.value = reset.defaultValue; this.form.impru_dobanda.value=".$impru_dobanda."; this.form.impru_sold.value=".$impru_sold.";'">"
?>
总而言之,我花了一点时间,但我想与你分享我的发现。
所有回复的人,感谢您的帮助!
话筒
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 对表单输入执行计算
- 两个功能合二为一 - 计算和提交表单
- 使用 JavaScript 计算并添加表单输入的值
- 如何将我通过JavaScript计算的自定义金额作为金额发送到PHP表单
- 使用javascript和html表单进行计算
- 使用HTML中的表单来计算总价
- 从HTML表单中获取计算得到的JavaScript数据,并将其作为新元素添加到相同的表单操作中以使用PHP保存
- 按类计算表单值
- onchange使用PHP和jQuery对动态表单输入进行计算
- 点击可选复选框时如何计算价格(使用贝宝支付表单)
- 将javascript计算结果自动放入HTML表单中
- onKeyUp 事件计算不适用于 PHP 生成的表单中的以下行,除了第一行
- HTML表单计算
- 使用JavaScript进行表单计算
- 为什么这些javascript表单计算在Safari和Firefox中不起作用,但在Chrome中却起作用
- Ubuntu PDF表单计算
- 新页面中的Html/Javascript表单计算和验证
- 如何在php中进行表单计算
- Html/ javascript表单计算问题