動態生成的AJAX/JS計算器表格

我正在嘗試生成一個基於加權輸入生成值的表單。例如，如果我們有數據庫動態生成的AJAX/JS計算器表格

**Item** _|_**Weight** 
sink  | 1.5 
toilet  | 2.5 
shower  | 3

而且看起來像這樣的形式下，從數據庫爲基礎，使用AJAX（必須使用AJAX來構建，因爲輸入的名稱和數量輸入取決於用戶選擇的形式的前一節）

<form id="calculator"> 
...There are several field sets here... 
    <fieldset id="myFields"> 
     <input type="text" class="iteminput" data-weight="1.5" name="sink" id="sink"> 
     <input type="text" class="iteminput" data-weight="2.5" name="toilet" id="toilet"> 
     <input type="text" class="iteminput" data-weight="3" name="shower" id="shower"> 
    </fieldset> 
</form>

中如果用戶將在他們有X片，Y廁所和Z陣雨，我想自動計算總「價值」他們的管道系統，在這種情況下，X * 1.5 + Y * 2.5 + Z * 3。

我掛斷的是如何獲得每個輸入的價值。我想要做的就是遍歷#myFields中的所有輸入，獲取字段的值以及data-weight屬性的值，將它們相乘，然後將它們添加到運行總數中。我想在每個輸入的onKeyUp事件中附加一個函數來完成所有這些。

任何幫助表示讚賞，如有必要可提供更多信息。

僅Javascript解決方案將是最好的，但我不反對使用jQuery，如果它大大簡化了答案。

來源

2013-06-18 EWelsh

我最終使用純JavaScript方法。一旦它功能完整，我會發布它。 – EWelsh

這裏是一個jQuery例如：

你應該能夠得到一個模糊函數的輸入值。然後通過在輸入上運行每個函數來更新這些值。事情是這樣的......

<ul> 
    <li> 
     <label>Number of X</label> 
     <input type="text" value="" id="x"/> 
    </li> 
    <li> 
     <label>Number of Y</label> 
     <input type="text" value="" id="y"/> 
    </li> 
    <li> 
     <label>Number of Z</label> 
     <input type="text" value="" id="z"/> 
    </li> 
</ul> 

<p>Total is: <span class="total"></span>

的jQuery：

$('input').blur(function() { 
    var total = 0; 
    $('input').each(function() { 
     total += Number($(this).val()); 
    }); 

    $('.total').text(total); 
});

DEMO：

http://jsfiddle.net/DYzsR/1/

來源

2013-06-18 21:22:34

這是我落得這樣做。

function calcFixtures() 
{ 
    var elements = []; 
    var total = 0; 
    elements = document.getElementsByClassName('fixtureinput'); 
    for (var i=0; i<elements.length; i++) { 
     total += elements[i].value * elements[i].getAttribute("data-weight"); 
    } 
}

邏輯之中，獲得與某一類，環的所有元素通過它們，並且對於每個元件，獲取數據量屬性的值，並通過該元件的電流值的形式相乘。感謝@Kris的想法是將其作爲運行總量而不是單個計算。那真是個突破點。

來源

2013-06-20 20:24:41 EWelsh

動態生成的AJAX/JS計算器表格

回答

相關問題