We Keep Coding

if and else condition

I am making a conditional script with js; if I select the partial option, it does half the amount, but I have incorporated "else" code so, when I select complete option, it's not showing the whole amount.
Here is the code:
var qty1 = $('#payamount').val();
if (qty1 = 'Partial') {
$('#quantity').change(function() {
var qty2 = $('#quantity').val();
var qty3 = qty2 / 2;
$("#totalprice").val(qty3);
});
} else if (qty1 = 'Complete') {
$('#quantity').change(function() {
var qty2 = $('#quantity').val();
var qty3 = qty2;
$("#totalprice").val(qty3);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />
<select id="payamount">
<option value="Partial">Partial</option>
<option value="Complete">Complete</option>
</select>
Quantity:
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
pay: Total: $
<input type="text" id="totalprice" value="" readonly/>
</div>

You need ONE event handler
$('#payamount').on("change", onchange)
$('#quantity').on("change", onchange).change(); // initialise
function onchange() {
var qty2 = $('#quantity').val();
var qty1 = $('#payamount').val();
var qty3 = qty2;
if (qty1 === 'Partial') {
qty3 /= 2;
}
$("#totalprice").val(qty3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />
<select id="payamount">
<option value="Partial">Partial</option>
<option value="Complete">Complete</option>
</select>
Quantity:
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
pay: Total: $
<input type="text" id="totalprice" value="" readonly/>
</div>

Number precision change on select option

When I select option to 3 for example round number by 3 after comma. Can someone help me?
function LengthConverter(valNum) {
document.getElementById("outputMeters").innerHTML = (valNum * 1.8) + 32;
}
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)">
<td class="precision">Precision:
<select name="precision" id="opt" size="1" onchange="update()">
<option value="1">0</option>
<option value="10">1</option>
<option value="100">2</option>
<option selected="selected" value="1000">3</option>
<option value="10000">4</option>
<option value="100000">5</option>
<option value="1000000">6</option>
<option value="10000000">7</option>
<option value="100000000">8</option>
<option value="1000000000">9</option>
<option value="1000000000000">12</option>
<option value="1000000000000000">15</option>
<option value="1000000000000000000">18</option>
</select>
</td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>

toFixed() is your friend. It will also handle rounding. Though do note that it returns a string.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

See this helper function
function round(x, n) {
return parseFloat(Math.round(x * Math.pow(10, n)) / Math.pow(10, n)).toFixed(n);
}
It is a combination of Math.round and toFixed() which fills up zeros.
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter()" onchange="LengthConverter()">
<td class="precision">Precision: <select name="precision" id="opt" size="1" onchange="LengthConverter()">
<option value="1">0</option>
<option value="10">1</option>
<option value="100">2</option>
<option selected="selected" value="1000">3</option>
<option value="10000">4</option>
<option value="100000">5</option>
<option value="1000000">6</option>
<option value="10000000">7</option>
<option value="100000000">8</option>
<option value="1000000000">9</option>
<option value="1000000000000">12</option>
<option value="1000000000000000">15</option>
<option value="1000000000000000000">18</option>
</select></td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>
<script>
function LengthConverter() {
var inputFeet = document.getElementById("inputFeet").value;
var opt = document.getElementById("opt").value.length;
document.getElementById("outputMeters").innerHTML = round((inputFeet * 1.8) + 32, --opt);
}
function round(x, n) {
return parseFloat(Math.round(x * Math.pow(10, n)) / Math.pow(10, n)).toFixed(n);
}
</script>

Your precision selector is calling an update function that isn't created, so you can get rid of the onchange="update()" . As people are saying use toFixed(), bellow is how you can implement it.
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)">
<td class="precision">Precision: <select name="precision" id="opt" size="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="12">12</option>
<option value="15">15</option>
<option value="18">18</option>
</select></td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>
<script>
function LengthConverter(valNum) {
var percision = percision = document.getElementById("opt").value
var fahrenheitValue = (valNum*1.8)+32;
var stringWithPercision = fahrenheitValue.toFixed(percision);
document.getElementById("outputMeters").innerHTML=stringWithPercision;
}
</script>

The toFixed() method converts a number into a string, keeping a specified number of decimals.
const n = 4.8768;
const res = n.toFixed(2); // res is a string
console.log(res);
console.log(typeof(res));
Celsius in Fahrenheit:
F = (C x 1.8) + 32
Add event listeners to the <input> (keyup) and to the <select></select> (change).
Example
let celsius = document.getElementById("celsius");
let precision = document.getElementById("precision");
let fahrenheit = document.getElementById("fahrenheit");
function celsiusToFahrenheit(val) {
// F = (C x 1.8) + 32
return (val * 1.8) + 32;
}
function getResult(precision, val) {
return celsiusToFahrenheit(val).toFixed(precision);
}
celsius.addEventListener("keyup", function() {
let selectedValue = precision.options[precision.selectedIndex].value;
fahrenheit.innerHTML = getResult(selectedValue, this.value);
})
precision.addEventListener("change", function() {
let selectedValue = this.options[this.selectedIndex].value;
if (celsius.value) {
fahrenheit.innerHTML = getResult(selectedValue, celsius.value);
}
})
<section>
<span>Celsius:</span><input id="celsius" type="text"><span>Precision:</span>
<select name="" id="precision">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</section>
<section>
<span>Fahrenheit:</span><span id="fahrenheit"></span>
</section>

Getting javascript to output calculation to HTML

Hey im having trouble getting my javascript to ouput my calculations into my html...
if you can please check my code and see where i might be going wrong thatd be great
var doorDesign_Prices= new Array();
doorDesign_Prices["None"]=0;
doorDesign_Prices["PRP15"]=8.10;
doorDesign_Prices["PRP15 Deluxe"]=12.30;
doorDesign_Prices["PRP15 R"]=11.05;
doorDesign_Prices["PRP25"]=11.30;
doorDesign_Prices["PRP2525"]=13.35;
doorDesign_Prices["PRP35"]=11.30;
doorDesign_Prices["PRP45"]=13.90;
doorDesign_Prices["PRP55"]=17.85;
doorDesign_Prices["PRP5555"]=26.75;
doorDesign_Prices["PRP65"]=11.30;
doorDesign_Prices["PRP6565"]=13.60;
doorDesign_Prices["PRP85"]=17.75;
doorDesign_Prices["PRP95"]=11.30;
doorDesign_Prices["PRP9595"]=13.35;
doorDesign_Prices["PRP100"]=23.20;
doorDesign_Prices["PRP105"]=31.75;
doorDesign_Prices["PRP110"]=30.75;
doorDesign_Prices["PRP110110"]=35.75;
doorDesign_Prices["PRP181"]=21.75;
doorDesign_Prices["PRP185"]=21.75;
doorDesign_Prices["PRP190"]=10.10;
doorDesign_Prices["PRP200M"]=20.75;
doorDesign_Prices["PRP201M"]=20.75;
doorDesign_Prices["PRP201MT"]=20.75;
function getDoorDesign() {
var doorDesignSelect = document.getElementById('doorDesign');
return doorDesign_Prices[doorDesignSelect.value];
}
var woodType_Prices= new Array();
woodType_Prices["None"]=10.01;
woodType_Prices["C. Pine"]=14.60;
woodType_Prices["Cherry"]=7.00;
woodType_Prices["Hickory"]=5.40;
woodType_Prices["K Pine"]=24.00;
woodType_Prices["Mahogany"]=12.51;
woodType_Prices["Maple"]=7.46;
woodType_Prices["Pt. Grade"]=18.16;
woodType_Prices["R. Birch"]=9.18;
woodType_Prices["Red Oak"]=13.12;
woodType_Prices["Sapele"]=7.03;
woodType_Prices["W. Ash"]=12.04;
woodType_Prices["W. Oak"]=8.05;
woodType_Prices["Walnut"]=11.05;
function getWoodType() {
var woodTypeSelect = document.getElementById('woodType');
return woodType_Prices[woodTypeSelect.value];
}
var lipType_Prices= new Array();
lipType_Prices["A"]=0.95;
lipType_Prices["B"]=0.95;
lipType_Prices["C"]=1.90;
lipType_Prices["D"]=0.95;
lipType_Prices["E"]=0.95;
lipType_Prices["F"]=0.95;
lipType_Prices["I"]=0.95;
lipType_Prices["L"]=0.95;
lipType_Prices["M"]=0.95;
lipType_Prices["R"]=0.95;
lipType_Prices["S"]=0.95;
lipType_Prices["T"]=0.95;
lipType_Prices["Z"]=0.95;
function getLipType() {
var lipTypeSelect = document.getElementById('lipType');
//alert(filling_prices[cakeSelect.value]);
return lipType_Prices[lipTypeSelect.value];
}
var mouldType_Prices= new Array();
mouldType_Prices["4/4"]=0;
mouldType_Prices["5/4"]=0;
mouldType_Prices["Deluxe"]=0;
mouldType_Prices["M"]=0;
mouldType_Prices["P"]=0;
mouldType_Prices["S"]=0;
mouldType_Prices["T"]=0;
mouldType_Prices["A"]=0;
mouldType_Prices["V"]=0;
mouldType_Prices["228"]=0;
mouldType_Prices["MT"]=0;
function getMouldType() {
var mouldTypeSelect = document.getElementById('mouldType');
return mouldType_Prices[mouldTypeSelect.value];
}
var panelType_Prices= new Array();
panelType_Prices["A"]=0;
panelType_Prices["B"]=0;
panelType_Prices["C"]=0;
panelType_Prices["D"]=0;
panelType_Prices["E"]=0;
panelType_Prices["F"]=0;
panelType_Prices["M"]=0;
panelType_Prices["O"]=0;
panelType_Prices["Q"]=0;
panelType_Prices["R"]=0;
panelType_Prices["S"]=0;
panelType_Prices["T"]=0;
panelType_Prices["V"]=0;
panelType_Prices["Rev C"]=0;
panelType_Prices["Rev F"]=0;
panelType_Prices["Bead"]=0;
function getPanelType() {
var panelTypeSelect = document.getElementById('panelType');
return panelType_Prices[panelTypeSelect.value];
}
var gradeAndThickness_Prices= new Array();
gradeAndThickness_Prices["None"]=0;
gradeAndThickness_Prices["4/4 Standard"]=13.12;
gradeAndThickness_Prices["4/4 Select"]=17.06;
gradeAndThickness_Prices["5/4 Standard"]=17.06;
gradeAndThickness_Prices["5/4 Select"]=22.17;
function getGradeAndThickness() {
var gradeAndThicknessSelect = document.getElementById('gradeAndThickness');
return gradeAndThickness_Prices[gradeAndThicknessSelect.value];
}
var doorOptions_Prices= new Array();
doorOptions_Prices["None"]=0;
doorOptions_Prices["Finger Pulls"]=2.00;
doorOptions_Prices["Hinge Holes"]=5.00;
doorOptions_Prices["Lip As Pair"]=2.00;
function getDoorOptions() {
var doorOptionsSelect = document.getElementById('doorOptions');
return doorOptions_Prices[doorOptionsSelect.value];
}
function calculateTotal() {
var total = getDoorDesign() + getWoodType() + getMouldType() + getPanelType() + getGradeAndThickness + getFinish + getDoorOptions;
var totalEl = document.getElementById('totalPrice');
document.getElementById('totalPrice').innerHTML = "Your Total is: $" + total;
}
function hideTotal() {
var totalEl = document.getElementById('totalPrice');
totalEl.style.display = 'none';
}
<HEAD>
<script src="OrderForm.js"></script>
</HEAD>
<body onload='hideTotal()'>
<div id="wrap">
<form action="" id="orderForm" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<table align=center border=0 width=300 cellpadding="1">
<tr>
<td>
<select id="doorDesign" name='doorDesign' onchange="calculateTotal()">
<option>Door Design</option>
<option value="PRP15">PRP15</option>
<option value="PRP15 DELUXE">PRP15 DELUXE</option>
<option value="PRP 15 R">PRP15 R</option>
<option value="PRP25">PRP25</option>
<option value="PRP2525">PRP2525</option>
<option value="PRP35">PRP35</option>
<option value="PRP45">PRP45</option>
<option value="PRP55">PRP55</option>
<option value="PRP5555">PRP5555</option>
<option value="PRP65">PRP65</option>
<option value="PRP6565">PRP6565</option>
<option value="PRP85">PRP85</option>
<option value="PRP95">PRP95</option>
<option value="PRP9595">PRP9595</option>
<option value="PRP100">PRP100</option>
<option value="PRP105">PRP105</option>
<option value="PRP110">PRP110</option>
<option value="PRP110110">PRP110110</option>
<option value="PRP181">PRP181</option>
<option value="PRP185">PRP185</option>
<option value="PRP190">PRP190</option>
<option value="PRP200M">PRP200M</option>
<option value="PRP201M">PRP201M</option>
<option value="PRP201MT">PRP201MT</option>
</select>
</td>
<td>
<select id="woodType" name='woodType' onchange="calculateTotal()">
<option>Wood Type</option>
<option value="C. Pine">C. Pine</option>
<option value="Cherry">Cherry</option>
<option value="Hickory">Hickory</option>
<option value="K. Pine">K. Pine</option>
<option value="Mahogany">Mahogany</option>
<option value="Maple">Maple</option>
<option value="Pt. Grade">Pt. Grade</option>
<option value="R. Birch">R. Birch</option>
<option value="Red Oak">Red Oak</option>
<option value="Sapele">Sapele</option>
<option value="W. Ash">W. Ash</option>
<option value="W. Birch">W. Birch</option>
<option value="W. Oak">W. Oak</option>
<option value="Walnut">Walnut</option>
</select>
</td>
<td>
<select id="lipType" name='lipType' onchange="calculateTotal()">
<option>Lip Type</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="I">I</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="Z">Z</option>
</select>
</td>
<td>
<select id="mouldType" name='mouldType' onchange="calculateTotal()">
<option>Mould Type</option>
<option value="4/4">4/4</option>
<option value="5/4">5/4</option>
<option value="Delue">Deluxe</option>
<option value="M">M</option>
<option value="P">P</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="A">A</option>
<option value="V">V</option>
<option value="228">228</option>
<option value="MT">MT</option>
</select>
</td>
<td>
<select id="panelType" name='panelType' onchange="calculateTotal()">
<option>Panel Type</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="M">M</option>
<option value="O">O</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="V">V</option>
<option value="Rev C">Rev C</option>
<option value="Rev F">Rev F</option>
<option value="Bead">Bead</option>
</select>
</td>
<td>
<select id="gradeAndThickness" name='gradeAndThickness' onchange="calculateTotal()">
<option>Grade and Thickness</option>
<option value="4/4 Standard">4/4 Standard</option>
<option value="4/4 Select">4/4 Select</option>
<option value="5/4 Standard">5/4 Standard</option>
<option value="5/4 Select">5/4 Select</option>
</select>
</td>
<td>
<select id="finish" name='finish' onchange="calculateTotal()">
<option>Finish</option>
<option value="Clear">Clear</option>
<option value="Wheat">Wheat</option>
<option value="Fruitwood">Fruitwood</option>
<option value="Heartwood">Heartwood</option>
<option value="White Stain">White Stain</option>
<option value="Cinnamon">Cinnamon</option>
<option value="W. Prime">W. Prime</option>
</select>
</td>
<td>
<select id="doorOptions" name='doorOptions' onchange="calculateTotal()">
<option>Options</option>
<option value="Finger Pulls">Finger Pulls</option>
<option value="Hinge Holes">Hinge Holes</option>
<option value="Lip As Pair">Lip As Pair</option>
</select>
</td>
</tr>
</table>
</div>
<div id="totalPrice"></div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div>
</div>
</body>
</html>
For now I just want to be able to output the calculations into my HTML before I make this form any more complicated.

the variable getFinish is not declare at function calculateTotal(). so you should declare this variable or function before using it.

in tag remove onload='hideTotal()' it will output your javascript calculations into my html

Forcing multiple selects (dropdowns) to have unique values

On my page, there are select dropdown which need to be validated in certain way before I submit the page.
Here is how those selects looks like:-
HTML
<select name="first_select_0" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_1" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_2" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_3" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_4" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_5" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_6" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Rules:-
What I want is as follows:-
All the selects would be defaulted to Blank Value (-1)
Value of 1, 2 and 3 will be uniquely selected for all selects. This means that there would be only one select with a value of "1", only one select with a value of "2" and only one select with a value of "3".
All the remaining should have the value of "0".
What I did is below in JS. It's basically not much helpful :-(
JS
$("#submit-selection").click(function(e){
var count_selects = $(".select_style").length;
if (count_selects >=5 ) {
alert(count_selects + "is >=5");
}
else {
alert(count_selects + "is <5");
}
e.preventDefault();
});
My JsFiddle is
JSFiddle Link

If i clearly understood your problem, here is solution:
Add attribute selected="selected" to each tag "option" with value="-1".
Here is JS:
$(document).ready(function(){
$("#submit-selection").click(function(e){
var uniqueVals = [1,2,3];
var selectedVals = [];
var inputs = $(".select_style");
inputs.each(function(){
if(this.value == -1){
this.value = 0;
}
var intVal = parseInt(this.value)
if(uniqueVals.indexOf(intVal) != -1){
if(selectedVals.indexOf(intVal) != -1){
alert('validation is not passed');
return 0;
}else{
selectedVals.push(intVal);
}
}
});
e.preventDefault();
});
});
Fiddle: http://jsfiddle.net/weeklyTea/L9JEK/

This is a bit dirty, but i think is what you want:
HTML:
<form method="post" class="my-form" id="form-1" action="">
<select name="first_select_0" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_1" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_2" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_3" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_4" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_5" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_6" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" name="submit" id="submit-selection" value="Submit" class="submit-button btn btn-lg btn-primary" />
</form>
JS:
$(document).ready(function(){
$("#submit-selection").click(function(e){
var count_selects = $(".select_style").length;
var correct = true;
if($(".select_style option[value='1']:selected").length != 1){ correct = false; }
if($(".select_style option[value='2']:selected").length != 1){ correct = false; }
if($(".select_style option[value='3']:selected").length != 1){ correct = false; }
if($(".select_style option[value='0']:selected").length != count_selects-3){ correct = false; }
alert(correct);
e.preventDefault();
});
});
FIDDLE:
http://jsfiddle.net/frikinside/8wcp6/4/

Sum of values from select fields to display in another text field (javascript)

I'm currently developing a form that needs to sum the values of select fields (integer values) and the result should be displayed in another input field. The layout is that of a scoring sheet, with multiple row, showing partial totals and grand totals and the sum of scores has to be done in stages (or rows). So, all the scores of a single row will have a partial total for that row only.
The problem I have, not being very good at javascript, is that I found a script that is somehow working, but is adding the results of ALL rows into the partial total field of the first row (please see image below).
Link to image: http://postimg.org/image/77fxwl2db/
The right way for the form to work would be that the scores selected in the select fields in a single row will show a partial total in the light grey field of the same row, and that field only, while the dark grey (black) field will show the sum of the previous partial total PLUS the one of that row as well. (please see image below)
Link to image: http://postimg.org/image/ddolwjfft/
Hopefully that will make sense... As for the code, this is what I'm using:
<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>
The code above represents one single row, but several rows will be required. As for the javascript used, this is the code:
<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;
}
Please any help regarding this would be appreciated. I have looked for some options but I haven't been able to find anything that matches this specific situation!

I have developed a solution for you , extending your problem to that of two rows. Have made various changes in your original source which had many bugs. Have added comments which hopes makes the solution self explanatory.
The respective total of each column is shown next to the select fields, and the overall total of each row is shown in the input field below,
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>
Fiddle:-http://jsfiddle.net/TRV4f/3/
Edit 1:- added comments in source
Edit 2:- As pointed out by user made changes to the previous source, which had bugs.

The function OnChange is using the global variable row to know which row is being modified. Your problems are:
You have several rows and row is always 1.
You have only a global variable (sum), but you'll need one for each row.
I suggest you to add a second paratemer to the function OnChange to let it know which the row is (just remove the global variable and add it as a parameter) and avoid the variable sum, using the current value of the fields when adding any amount:
function OnChange(value, row) {
var sum= document.getElementById('total_row_'+ row).value + new Number(value);
document.getElementById('total_row_'+ row).value = sum;
}
NOTE: Notice that this logic works when you set the value for the first time, but if there was a previous value, it won't be subtracted before the sum.
Then you can create a loop to calculate the sum of all previous rows, but I'd add an id to that text field to access it easily.