javascript - 使用 Jquery 从输入中获取值
问题描述
我找到了很多这类问题的答案,但没有一个能解决问题。我什至有一段非常相似的代码。但是,这不断给出一个NaN
. 我已将其范围缩小到无法获得
var or = parseFloat($(this).siblings("input[name='or']").val());
这就是我所拥有的。任何帮助是极大的赞赏!
<tbody>
{% for i in t %}
<tr class="hotlines">
<td><strong>{{i.owner}}</strong><br>{{i.owner_id}}</td>
<td>
<li>{{i.tot_itm}}</li>
<li>Per Piece Profit: {{"${:,.2f}".format(i.item_prof)}}</li>
</td>
<td>
<li>Payable Hotlines <br><input type="text" name="hln" maxlength="4" value=""></li>
<li>Per Hotline Profit: {{"${:,.2f}".format(i.hotline_prof)}}</li>
<input type="text" name="or" value="{{i.hotline_prof}}">
</td>
<td>
<li>Total Backpack Profit: {{"${:,.2f}".format(i.tot_prof)}}</li>
<li>Total Hotline Profit: <input type="text" name="hlnt" readonly /></li>
</td>
</tr>
<!-- Total items sent from db -->
<input class="hidden" type="text" name="it" value="{{i.tot_itm}}">
<!-- per hotline override from db -->
<!-- profit from all items * per item override sent from server -->
<input class="hidden" type="text" name="bp" value="{{i.tot_prof}}">
<!-- total proffit from items and hotlines -->
<input class="hidden" type="text" name="th">
<!-- per item override from db -->
<input class="hidden" type="text" name="or_it" value="{{i.item_prof}}">
<!-- total proffit from hotlines -->
<input class="hidden" type="text" name="hl" value="0">
<!-- organization ID -->
<input class="hidden" type="text" name="o" value="{{org.organization_ID}}">
<input class="hidden" type="text" name="owner_n" value="{{i.owner}}">
<input class="hidden" type="text" name="owner_id" value="{{i.id}}">
{% endfor %}
<td><button type="submit" class="btn btn-link btn-xs btn-block">Submit Report</button></td>
</tbody>
和
$(document).on("keyup", "[name='hln']", function () {
$this = $(this);
//var or = 0
var pro = 0
//using native dom Element.closest() method
//https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
let parent = $(this.closest('.hotlines'));
//or using jQuery's closest();
//let parent = $this.closest('.hotlines');
var value = parseFloat($this.val());
var or = parseFloat($(this).siblings("input[name='or']").val());
var bp = parseFloat($(this).siblings("input[name='bp']").val());
//var other = parseFloat($(this).siblings("input[name='amt']").val());
pro = (value * or);
var total = (pro + bp);
//use find() to find the child element
parent.find('input[name="hlnt"]').val("$" + pro.toFixed(2));
parent.find('input[name="total"]').val("$" + total.toFixed(2));
parent.find('input[name="th"]').val(total);
parent.find('input[name="hl"]').val(pro);
});
解决方案
在 Tyler Roper 的指导下,这是一个与 Javascript 无关的简单修复。我很累并测试了一些东西,并试图快速将页面转换为表格。可怕的 HTML 是原因。为了解决它,我只是更改为:
<form action="/weekly_reports/" method="POST">
<table id="office_weekly" class="table table-hover table-striped">
<thead>
<th>Office</th>
<th>Backpacks</th>
<th>Hotlines</th>
<th>Total</th>
</thead>
<tbody>
{% for i in t %}
<tr class="hotlines">
<td><strong>{{i.owner}}</strong><br>{{i.owner_id}}</td>
<td>
{{i.tot_itm}}<br>
Per Piece Profit: {{"${:,.2f}".format(i.item_prof)}}
</td>
<td>
Payable Hotlines <br><input type="text" name="hln" maxlength="4" value=""><br>
Per Hotline Profit: {{"${:,.2f}".format(i.hotline_prof)}}<br>
<input type="hidden" name="or" value="{{i.hotline_prof}}">
</td>
<td>
Total Backpack Profit: {{"${:,.2f}".format(i.tot_prof)}}
</td>
<td>Total Hotline Profit: <input type="text" name="hlnt" readonly /></td>
</tr>
{% endfor %}
<td><button type="submit" class="btn btn-link btn-xs btn-block">Submit Report</button></td>
</tbody>
</table>
</form>
推荐阅读
- wordpress - 如何在 Wordpress 中为每个网站页面添加单独的分析
- sql-server - 创建具有列年龄类别的表(18-34、35-49、50-64、65+)
- python - 将 python 2.7 中的 im_class 转换为 python 3.8
- sql - 如何获取每个客户的询问列
- html - 侧面菜单中的 Angular 页面导航
- git - git push 覆盖远程存储库上的更改
- javascript - 是否有替代图像映射能够更改图像上特定 div 区域的背景颜色的方法?
- haskell - 当我尝试执行以下操作时,我总是在 Haskell 中遇到此错误:load Rpn.hs
- ios - 线程组 atomic_uint 的初始值是否为零?
- vuetify.js - 如何将内容与 v-col 内的内容对齐?