Google Apps 脚本 JQuery 表单
[英]Google Apps Script JQuery Form
问题描述
I have a form that I want to popup in Google Sheets.
我有一个要在 Google 表格中弹出的表单。 I am using the script editor to achieve this but for some reason this is not working我正在使用脚本编辑器来实现这一点，但由于某种原因，这不起作用
<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>
The above does not output any data.以上不输出任何数据。 It should work on keyup from my understanding of JS.根据我对 JS 的理解，它应该适用于 keyup。
What seems to be wrong with this javascript?这个javascript似乎有什么问题？
I was able to figure out how to get this to work.我能够弄清楚如何让它发挥作用。 I had changed one of the lines in the JS to 130. This was trying to call that field but broke my script.我已将 JS 中的一行更改为 130。这试图调用该字段，但破坏了我的脚本。 I added a value to the form and changed the JS to reflect this and all is working now.我向表单添加了一个值并更改了 JS 以反映这一点，现在一切正常。 Below is my script Working Script下面是我的脚本工作脚本
<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 library is not loaded.未加载 jQuery 库。 Add smth like:添加 smth 像：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"></script>
Prior to scripts utilizing jQuery.在使用 jQuery 的脚本之前。
PS always check browser console for errors. PS 总是检查浏览器控制台是否有错误。
解决方案2
0 2019-12-05 16:17:56
I have fixed my issue by fixing the line我已经通过修复线路解决了我的问题
var rqComm = Number($('130').val());
This was trying to find the form input 130 which did no exist.这是试图找到不存在的表单输入 130。
full working script完整的工作脚本
<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>
I also added the jquery library to the head which corrected some of my issue as well thanks to one of the answers.由于其中一个答案，我还将 jquery 库添加到了头部，这也纠正了我的一些问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.