使用 Jquery 從輸入中獲取值

Question

我找到了很多這類問題的答案，但沒有一個能解決問題。 我什至有一段非常相似的代碼可以工作。 但是，這不斷給出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);
});

Answer 1

在 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>