將jquery選擇限制爲特定形式

我有一個頁面上有多個表單&我很難從每個表中獲取值以提供總計。 HTML是動態生成的&我無法修改它。以下是各形式的樣子（但他們會每次運行它的時候有不同的行數....將jquery選擇限制爲特定形式

<form> 
<input type=number class="entries" onchange="addTotal();"> 
<input type=number class="entries" onchange="addTotal();"> 
<input type=number class="totals"> 
</form>

這裏是我不得不添加各種形式&把總計功能在「總計」框。這對於第一種形式的偉大工程，但問題是無論哪個形成我輸入值，它總計一切都在最佳狀態「總計」。

function addTotal() { 
    var entry = $('.entries').get(); 
    var total = 0; 
    for (var i = 0; i < entry.length; i++) { 
     if(Number(entry[i].value)) 
      total += Number(entry[i].value); 
    } 
    $('.totals').value = total; 
    };

我也試圖擺脫的onchange動作&試圖將每個表單稱爲'this'，但我似乎無法抓住所有的值這種方式，我只得到一個數組...

$(.entries').change(function() { 
var entry = ($(this.form).get()); 
    console.log(entry); 
});

我敢肯定，可能有一些明顯的我失蹤，但我似乎無法得到我需要的東西。任何建議，將不勝感激！！

來源

2015-02-11 heat222

修訂現在將任意數量的字段這裏的工作是一個小提琴：http://jsfiddle.net/vx403ax0/6/

$(document).ready(function() { 
    $(".entries").change(function() { 
     $("form").each(function() { 
      var result = 0; 
      $(this).find(".entries").each(function(i, el){ 
       result += parseInt(el.value); 
      }); 
      if(isNaN(result)){ 
      return; 
      } else{ 
      $(this).find(".totals").val(result); 
      } 
     }); 
    }); 
});

來源

2015-02-11 14:58:49 ChrisJ

感謝您的快速反應。不幸的是，我每次都會有不明數量的輸入字段。（抱歉，忘記在我的問題中包含該部分）。由於它是生成的，因此每次都會返回不同數量的行，具體取決於數據庫信息。我試圖修改你的建議，以適應，但沒有任何運氣。 – heat222 2015-02-11 16:34:37

固定。應該很好去 – ChrisJ 2015-02-11 17:00:02

完美的作品:)再次感謝！ – heat222 2015-02-11 19:38:08

這可能是inefficent，但得到完成任務。

$(document).ready(function() { 
    $(".entries").change(function() { 
     $("form").each(function() { 
      $form = $(this); 
      $val = 0; 
      $form.find('input:not(.totals)').each(function (i, el) { 
       if ($(el).val() !== '') { 
        $val += parseInt($(el).val()); 
       } 
      }); 
      $form.find(".totals").val($val); 
     }); 
    }); 
});

下面是基於ChrisJ評論小提琴：http://jsfiddle.net/d9boLc13/

來源

2015-02-11 16:48:50 WGibzzz

一旦我發現它必須每次都容納不同數量的字段，我們採取了非常類似的方法。不錯的工作。 – ChrisJ 2015-02-11 17:12:19

這工作得很好。我選擇Chris J作爲解決方案的唯一原因是因爲當我輸入小數時，這給了我一個NaN結果。我將parseInt更改爲Number，認爲應該修復它，但無法讓該部分根據需要正常工作。否則，它是完美的，非常感謝！ – heat222 2015-02-11 18:57:08

謝謝你的小提琴！它真的幫助我瞭解我所做的努力，以便能夠玩弄它並且不會冒險破壞我的應用程序:) – heat222 2015-02-11 19:03:36

將jquery選擇限制爲特定形式

回答

相關問題