2014-06-16 38 views
0

我目前正在開發一個表單,需要總結選擇字段的值(整數值),並且結果應顯示在另一個輸入字段中。佈局是一個評分表格,有多行,顯示部分總數和總計,總分必須分階段(或行)完成。因此,一行中的所有分數只有該行的部分總數。從另一個文本字段中顯示的選擇字段的值的總和(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; 
} 

請對此的任何幫助,將不勝感激。我尋找過一些選擇,但我一直沒能找到任何符合這個特定情況的東西!

回答

1

我爲您開發了一個解決方案,將問題擴展到兩行。已經對你的原始資料做過各種修改,這些修改有很多錯誤。已添加評論,希望使解決方案自我解釋。

各個總的每一列被示出下一個到選擇字段,並且每個行的整體總在下面的輸入字段中示出,

使用Javascript: -

function OnChange(node) { 
var row=1; 
var sum = 0; 

    if(node.parentNode.className=="scores_row_1"){row=1;} //Row selector 
    if(node.parentNode.className=="scores_row_2"){row=2;} 

    var value=node.value; 
    if(value=="X"){ 
    value=10; //dont know what you intend to do with X value, for me i have set it as 10,make your changes in the if condition accordingly 
    } 
    if(value=="M"){ 
    value=0; //for option M 
    } 
    //made changes to previous source, now added loop to loop through the select elements, note that you have to assign a default value to the select tags like M 
    for(var i=1;i<7;i++) 
    { //sum is total of select elements, get each by their unique name attribute 
sum+=parseInt(document.getElementsByName("score_"+row+"_"+i)[0].value); 
} 

    document.getElementById('total_row_'+ row).value = sum; //assign sum to the input element 


} 

function OnChangeFinal() { 
    //function keeps calling on mousemove and sums total of both rows input fields and assignto the final input field. You can change the event type i just used this for demo 
    document.getElementById('final_row').value= parseInt(document.getElementById('total_row_1').value) + parseInt(document.getElementById('total_row_2').value); 
    } 

HTML: -

<form method="post" action="#" onmousemove="OnChangeFinal()"> <!--assigned event to the form to call OnChangeFinal()--> 
    <fieldset class="scores_row_1"> 
    <select class="input1" onchange="OnChange(this)" name="score_1_1">//assign names as score_rowNumber_scoreNumber to uniquely identify each element. 
     <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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_1_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_1_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_1_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_1_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_1_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" selected="selected">M</option> 
    </select> 


    <span class="spacer"></span> 
     <input type="text" maxlength="2" class="input2" value="0" id="total_row_1" /><!--assigned default value 0 and id--> 

</fieldset> 
    <fieldset class="scores_row_2"> 
    <select class="input1" onchange="OnChange(this)" name="score_2_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_2_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_2_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_2_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_2_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" selected="selected">M</option> 
    </select> 
    <select class="input1" onchange="OnChange(this)" name="score_2_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" selected="selected">M</option> 
    </select> 


    <span class="spacer"></span> 
    <input type="text" maxlength="2" class="input2" value="0" id="total_row_2" /><!--assigned default value 0 and id--> 
     <input type="text" maxlength="2" class="input3" value="0" id="final_row"/><!--The grand total appears here--> 
</fieldset> 

</form> 

小提琴: - http://jsfiddle.net/TRV4f/3/

編輯1: - 在源代碼中添加註釋

編輯2: - 正如用戶對上一個源代碼所做的更改,其中包含錯誤。

+0

嗨穆斯塔法,謝謝你的回答。您的解決方案實際上效果很好,但是,我唯一擔心的是我需要每行不同的功能,並且在某些情況下,一些評分表可能需要多達12個。我不知道是否有更通用的方式來實現這個在JavaScript?我正在閱讀上面提到的巴勃羅提出的選項,它似乎解決了這個問題,但我不知道如何在JavaScript中解決這個問題。 – user3354949

+0

第二個問題是,如果有人在一個字段中犯了一個錯誤,然後糾正它,表單只是不斷添加!不用糾正,所以你可以得到一個令人難以置信的巨大結果,僅僅因爲有人在從田間選擇結果時犯了幾個錯誤!這可以排序嗎? – user3354949

+0

我不認爲你理解我提出的解決方案。不管你有多少行,你總是隻需要兩個函數,第一個函數OnChange(節點)用於計算每行的總數,第二個函數OnChangeFinal()用於計算最終文本框中的總和。即使你有12行,也只會有2個函數,而OnChange(節點)函數的變化很小。關於這個錯誤是的,謝謝你的注意,我會對源代碼進行修改。 –

0

函數OnChange正在使用全局變量row來知道哪一行正在被修改。你的問題是:

  • 你有幾個行和row始終爲1
  • 你只有一個全局變量(sum),但你需要每行一個。

我建議你到第二paratemer添加到功能OnChange讓它知道是該行(只是刪除全局變量,並將其添加爲參數),避免可變sum,使用的電流值添加任何量時域:

function OnChange(value, row) { 
    var sum= document.getElementById('total_row_'+ row).value + new Number(value); 
    document.getElementById('total_row_'+ row).value = sum; 
} 

注意:請注意,當您設置的第一次價值,但如果有一個以前的值,它不會被總和減去之前這個邏輯工作。

然後,您可以創建一個循環來計算所有以前的行的總和,但我會添加一個id到該文本字段以輕鬆訪問它。

相關問題