存储总数并在提交时累积
Posted
技术标签:
【中文标题】存储总数并在提交时累积【英文标题】：Store the total and have it cumulate on submit 【发布时间】：2019-12-01 17:40:24 【问题描述】：您如何存储总数并在每次用户点击提交时累积？
例如，Cumulative Total = # 会在用户每次提交信息时将第 3 列的总数相加。
<body ng-app="Test">
<section style="margin-top:80px">
<h3>Plastic Calculator Form</h3>
<div ng-controller="TestController as test" >
<p>To date, <strong><u># of people who pledged</u></strong> Earthlings have pledged to reduce their single-use plastic waste from <strong><u> test.approve | sumByColumn: 'amount' </u></strong> Items per year to <strong><u>(test.approve | sumByColumn: 'amount') - (test.approve | sumByColumn4: 'reducedTotal')</u></strong>. That's a reduction of <strong><u> test.approve | sumByColumn4: 'reducedTotal' </u></strong> per year! Do your part. Make a pledge!</p>
<table class="table">
<tr>
<th>Single-Use Plastic Items</th>
<th>Enter the Number You Use Per Week</th>
<th>The Number You Use Per Year is:</th>
<th>How Many Less Can You Use Per Week?</th>
<th>Your Reduced Usage Per Year Would Be:</th>
</tr>
<tr ng-repeat="x in test.approve">
<td> x.name </td>
<td> <input class="qty form-control" type="number" ng-model="x.number" ng-change="sumByColumn3()" min="0" restrict-to="[0-9]"/> </td>
<td> x.number*x.amount </td>
<td> <input class="qty form-control" type="number" ng-model="x.reducedAmount" ng-change="sumByColumn2()" min="0" restrict-to="[0-9]"/> </td>
<td> x.reducedAmount*x.reducedTotal </td>
</tr>
<tr>
<td>TOTALS</td>
<td> test.approve | sumByColumn3: 'number' </td>
<td> test.approve | sumByColumn: 'amount' </td>
<td> test.approve | sumByColumn2: 'reducedAmount' </td>
<td> test.approve | sumByColumn4: 'reducedTotal' </td>
</tr>
<tr>
<td colspan="2">Total difference = (test.approve | sumByColumn: 'amount') - (test.approve | sumByColumn4: 'reducedTotal')</td>
<td colspan="3">
<strong>Cumulative Total = #</strong>
</td>
</tr>
</table>
<form>
<div class="col-sm-4">
<div class="form-group">
<label for="full-name">Name</label>
<input type="text" class="form-control" id="full-name" placeholder="Enter Full Name">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="email-address">Email</label>
<input type="email" class="form-control" id="email-address" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary" style="margin-top:25px">Submit</button>
</div>
</form>
</div>
</section>
</body>
Link to Pen
我不确定是否最好使用 window.localStorage 或 sessionStorage 或使用 php。我现在正在试验这个。
您的帮助将是金子。
【问题讨论】：
【参考方案1】：我不确定是否最好使用 window.localStorage 或 sessionStorage 或者也许用 PHP 来做。我正在试验这个 现在。
解决这个问题很简单。方法如下：
1.) 这些数字（总和）是否与您的后端数据有关？您是否需要某种服务器代码或功能来执行此操作？如果是：使用 php。
2.) 如果 1 对您来说是假的，您是否希望您的用户在他们再次回来时能够再次获得数字或总和？您希望它持久吗？然后使用：localStorage
3.) 如果 2 为假，则使用 sessionStorage。它不是持久的，并且在当前会话终止后立即清除。即：用户关闭选项卡或浏览器。
现在，如果您在代码方面需要一些帮助，请修改您的问题以包含这些详细信息或打开一个新问题，或者只是对我的这个答案发表评论。我会尽力帮助你。快乐编码！
【讨论】：
感谢您提供这些要点，非常有帮助。我的目标是在用户提交数据后保存并显示总数。所以当另一个人访问表单时，他们会看到Cumulative Total = # 比以前更大了。我试过localStorage 方法，但它似乎只保存在本地，只有我能看到，其他人看不到。所以方法＃1可能是要走的路，我会看看我能想出什么。
@Tam 当然。听起来很好。我想建议您同时使用它们以获得更好的用户体验。示例：将您从服务器获得的最后一个总值保存到 localStorage 中，这样即使用户离线或无法连接，他/她仍然能够看到最近的有意义的东西。同样，如果您共享一些代码，我可能会以更具体的方式为您提供帮助，尤其是在 localStorage 以及客户端保存和解释数据方面。
感谢您的提示，因为这个应用程序将在 WordPress 环境中运行，我已经使用一个名为 Running Totals for Gravity Forms 的插件来累积总数。问题已解决。以上是关于存储总数并在提交时累积的主要内容，如果未能解决你的问题，请参考以下文章