我目前正在開發一個表單,需要總結選擇字段的值(整數值),並且結果應顯示在另一個輸入字段中。佈局是一個評分表格,有多行,顯示部分總數和總計,總分必須分階段(或行)完成。因此,一行中的所有分數只有該行的部分總數。從另一個文本字段中顯示的選擇字段的值的總和(javascript)
我有一個問題,不是非常擅長javascript,我發現一個腳本是以某種方式工作,但將所有行的結果添加到第一行的部分總字段中(請參閱下圖) 。
鏈接到圖像:http://postimg.org/image/77fxwl2db/
爲形式的工作將是在一個單一的行中的選擇字段選擇的得分將顯示部分總在同一行的淺灰色場的正確方法,只有該字段,而深灰色(黑色)字段將顯示先前的部分總數加上該行的總和。 (請參見下圖)
鏈接到圖片:http://postimg.org/image/ddolwjfft/
希望這將非常有意義。至於代碼,這是我使用的是什麼:
<form method="post" action="#" >
<fieldset class="scores_row_1">
<select class="input1" onchange="OnChange(this.value)" name="score_1">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_2">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_3">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_4">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_5">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_6">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<span class="spacer"></span>
<input type="text" maxlength="2" class="input2" id="total_row_1" />
<input type="text" maxlength="2" class="input3" />
</fieldset>
</form>
上面的代碼代表一行,但需要多行。至於使用的JavaScript,這是代碼:
<script type="text/javascript" language="javascript">
var row = 1;
var sum = 0;
function OnChange(value) {
sum += new Number(value);
document.getElementById('total_row_'+ row).value = sum;
}
請對此的任何幫助,將不勝感激。我尋找過一些選擇,但我一直沒能找到任何符合這個特定情況的東西!
嗨穆斯塔法,謝謝你的回答。您的解決方案實際上效果很好,但是,我唯一擔心的是我需要每行不同的功能,並且在某些情況下,一些評分表可能需要多達12個。我不知道是否有更通用的方式來實現這個在JavaScript?我正在閱讀上面提到的巴勃羅提出的選項,它似乎解決了這個問題,但我不知道如何在JavaScript中解決這個問題。 – user3354949
第二個問題是,如果有人在一個字段中犯了一個錯誤,然後糾正它,表單只是不斷添加!不用糾正,所以你可以得到一個令人難以置信的巨大結果,僅僅因爲有人在從田間選擇結果時犯了幾個錯誤!這可以排序嗎? – user3354949
我不認爲你理解我提出的解決方案。不管你有多少行,你總是隻需要兩個函數,第一個函數OnChange(節點)用於計算每行的總數,第二個函數OnChangeFinal()用於計算最終文本框中的總和。即使你有12行,也只會有2個函數,而OnChange(節點)函數的變化很小。關於這個錯誤是的,謝謝你的注意,我會對源代碼進行修改。 –