Google Apps 脚本 JQuery 表单
[英]Google Apps Script JQuery Form
问题描述
我有一个要在 Google 表格中弹出的表单。 我正在使用脚本编辑器来实现这一点，但由于某种原因，这不起作用
<html>
<body>
<form action="">
<input id='DP' type="text" class="form-control formBlock" name="maxDP" placeholder="Max DP Amount . . ." required/><br />
<input id='cost' type="text" class="form-control formBlock" name="cost" placeholder="Cost . . ." required/><br />
<input id='finFee' type="text" class="form-control formBlock" name="financeFee" placeholder="Finance Fee . . ." required/><br />
<input id='rqComm' type="hidden" class="form-control formBlock" name="rqComm" placeholder="RQ Commission . . ." required/><br />
<br /><br />
Total GP: <span id="total_gp"></span>
<br />
</form>
<script>
$('input').keyup(function(){
var maxDP = Number($('#DP').val());
var rqComm = Number($('130').val());
var cost = Number($('#cost').val());
var financeFee = Number($('#finFee').val());
$('#total_gp').html(maxDP + rqComm - cost - financeFee);
});
</script>
</body>
</html>
以上不输出任何数据。 根据我对 JS 的理解，它应该适用于 keyup。
这个javascript似乎有什么问题？
我能够弄清楚如何让它发挥作用。 我已将 JS 中的一行更改为 130。这试图调用该字段，但破坏了我的脚本。 我向表单添加了一个值并更改了 JS 以反映这一点，现在一切正常。 下面是我的脚本工作脚本
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<input id='dpMax' type="text" class="form-control formBlock" name="bus_ticket" placeholder="DP Max..." required/>
<input id='cost' type="text" class="form-control formBlock" name="plane_ticket" placeholder="Cost..." required/>
<input id='fee' type="text" class="form-control formBlock" name="hotel_expenses" placeholder="5% Fee..." required/>
<input id='rqComm' type="hidden" class="form-control formBlock" name="eating_expenses" value="130" placeholder="RQ Commisson..." required/>
<br />
Total: <span id="total_expenses1"></span>
<br /><br />
</body>
<script>
$('input').keyup(function(){
var dpMax = Number($('#dpMax').val());
var cost = Number($('#cost').val());
var fee = Number($('#fee').val());
var rqComm = Number($('#rqComm').val());
$('#total_expenses1').html(dpMax + cost + fee + rqComm); // add them and output it
document.getElementById('total_expenses2').value = dpMax + cost + fee + rqComm; });
</script>
</html>
2 个解决方案
解决方案1
0 2019-12-05 15:49:57
未加载 jQuery 库。 添加 smth 像：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"></script>
在使用 jQuery 的脚本之前。
PS 总是检查浏览器控制台是否有错误。
解决方案2
0 2019-12-05 16:17:56
我已经通过修复线路解决了我的问题
var rqComm = Number($('130').val());
这是试图找到不存在的表单输入 130。
完整的工作脚本
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<input id='dpMax' type="text" class="form-control formBlock" name="bus_ticket" placeholder="DP Max..." required/>
<input id='cost' type="text" class="form-control formBlock" name="plane_ticket" placeholder="Cost..." required/>
<input id='fee' type="text" class="form-control formBlock" name="hotel_expenses" placeholder="5% Fee..." required/>
<input id='rqComm' type="hidden" class="form-control formBlock" name="eating_expenses" value="130" placeholder="RQ Commisson..." required/>
<br />
Total: <span id="total_expenses1"></span>
<br /><br />
</body>
<script>
$('input').keyup(function(){
var dpMax = Number($('#dpMax').val());
var cost = Number($('#cost').val());
var fee = Number($('#fee').val());
var rqComm = Number($('#rqComm').val());
$('#total_expenses1').html(dpMax + cost + fee + rqComm); // add them and output it
document.getElementById('total_expenses2').value = dpMax + cost + fee + rqComm; });
</script>
</html>
由于其中一个答案，我还将 jquery 库添加到了头部，这也纠正了我的一些问题。
Google Apps 脚本 HTML 表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.