I have a very basic html document with two drop downs. When specific values in the drop down menus are selected I would like it to display a certain price in a text area below.
I have the drop downs setup, but I can't find a way to show specific prices for the drop down selections.
Any hints or tips would be greatly appreciated!
Here is my html.
<div class="form-group">
<label class="col-md-4 control-label" for="current">select</label>
<div class="col-md-5">
<select id="current" name="current" class="form-control">
<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>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="desired">select</label>
<div class="col-md-5">
<select id="desired" name="desired" class="form-control">
<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>
</select>
</div>
</div>
create text field with id is price
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#current").on('change',function(){
$("#price").val($(this).val());
// you can see values in console also
console.log("Price :"+$(this).val());
});
});
try this one
Related
How can I make all chosen options disabled in all three options? Its only working when the first one is selected.
$(".selectClass").change(function() {
$("select option").prop("disabled", false);
$(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="selectClass">
<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>
</select>
<select class="selectClass">
<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>
</select>
<select class="selectClass">
<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>
</select>
http://jsfiddle.net/84w50z2v/1/
So far i understood you correctly you just need to set disabled to the HTML elements.
your fiddle:
http://jsfiddle.net/84w50z2v/2/
<select class="selectClass">
<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>
</select>
<select class="selectClass">
<option value="1" disabled>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>
</select>
<select class="selectClass">
<option value="1" disabled>1</option>
...
greetings
For really disabling in all 3 option lists, you need to use this-
var selectedValues = [];
$(".selectClass").change(function () {
selectedValues.push($(this).val());
$.each(selectedValues,function(i,el){
$(".selectClass").not($(this)).find("option[value='" + el + "']").prop("disabled", true);
});
});
Here's jsfiddle.
I ask for your help to improve the form I created, keeping in mind that I am not a great expert in javascript programming.
I need to create a hotel search engine, with the possibility to choose the total number of rooms. Depending on the number of rooms selected, as many hidden form fields will be displayed, containing additional selection fields.
To make the idea of what I have created better, I attach a screen.
To view the hidden fields in relation to the number of rooms chosen, I used this javascript code, repeated 5 times (maximum number of rooms).
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("room1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("pax_room_1").style.display = "block";
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
}
else{
document.getElementById("pax_room_1").style.display = "none";
}
To realize the options for choosing each room, I used this javascript code repetition in proportion to the room number. That is: 1 room -> entered code 1 once; 2 rooms -> entered the code 2 times; etc.
function childSelect(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("child1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild1").style.display = "block";
}
else{
document.getElementById("agechild1").style.display = "none";
}
}
else{
document.getElementById("agechild1").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child2").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild2").style.display = "block";
}
else{
document.getElementById("agechild2").style.display = "none";
}
}
else{
document.getElementById("agechild2").style.display = "none";
}
if(nameSelect){
admOptionValue = document.getElementById("child3").value;
if(admOptionValue == nameSelect.value){
document.getElementById("agechild3").style.display = "block";
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
else{
document.getElementById("agechild3").style.display = "none";
}
}
$(function(){
$(':submit').click(function(){
$('select').each(function(){
if ( $(this).val() == '' )
{
$(this).remove(); // or
$(this).attr('disabled','disabled');
}
});
});
});
While, I used this html code repeated the same way.
<div class="container_hidden">
<div id="pax_room_1" style="display:none;" class="row_hidden">
<div class="nrRoom" style="width: 100px;background: #f5a445;font-size: 15px;text-align: center;height: 30px; padding-top: 5px; border-radius: 10px 10px 0px 0px;"><font color="#000"><img src="images/family-room.png" alt="Icon Family Room" style="width: 19px;" /> Room 1</font></div>
<div class="column"><font color="#000">Adult (18+)</font>
<select id="adulti" name="nrAdult">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000">Children (0-17)</font>
<select id="nrchild" name="nrChild" onchange="childSelect(this);">
<option value="">-</option>
<option id="child1" value="1">1</option>
<option id="child2" value="2">2</option>
<option id="child3" value="3">3</option>
</select>
</div>
<!-- Select Bambino 1 -->
<div id="agechild1" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
</select>
</div>
</div>
<!-- Select Bambino 1-2 -->
<div id="agechild2" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</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>
</select>
</div>
</div>
<!-- Select Bambino 1-2-3 -->
<div id="agechild3" style="display:none;" class="row_hidden">
<div class="column"><font color="#000"> Child Age 1 </font>
<select id="child1" name="ageChild1">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 2 </font>
<select id="child2" name="ageChild2">
<option value="">-</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>
</select>
</div>
<div class="column"><font color="#000"> Child Age 3 </font>
<select id="child3" name="ageChild3">
<option value="">-</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>
</select>
</div>
</div>
</div>
I realize that it is too laborious, even if it works. This is why I ask you if there is a way to lighten the code.
You can use the data-* attribute to dynamically choose the relations in the html.
e.g.
(function() {
const hiders = document.getElementsByClassName('hider');
// const is ES6 syntax, you can use var, although you might want to read up on that
for (let i = 0; i < hiders.length; ++i) {
const hider = hiders[i];
hider.onchange = function() {
const hideTarget = hider.dataset.hideTarget; // this reads the value of data-hide-target
if (hideTarget == null)
return; // no target set (else we would potentially get an TypeError, when data-hide-target wasn't set. Still happens with an invalid value though, but there you want an error
if (hider.value !== '')
document.getElementById(hideTarget).style.display = "block";
else
document.getElementById(hideTarget).style.display = "none";
// you might also want to take a look at .setAttribute("aria-hidden", "true") and .style.visibility = "hidden"
};
}
})()
<select id="adulti" name="nrAdult" class="hider" data-hide-target="hideme1">
<option value="">-</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>
</select>
<div id="hideme1" style="display: none;">
Hide me 1
</div>
<select id="adulti2" name="nrAdult" class="hider" data-hide-target="hideme2">
<option value="">-</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>
</select>
<div id="hideme2" style="display: none;">
Hide me 2
</div>
I think this snippet is rather easy to understand, but if you want me to elaborate a bit further, feel free to ask.
FYI, this can also be used for convenience in this example:
(function(){
function makeOption(val) {
const option = document.createElement('option');
option.value = val;
option.innerText = val;
return option;
}
const simpleSelects = document.getElementsByClassName('simpleSelect');
for(let i = 0; i < simpleSelects.length; ++i){
const simpleSelect = simpleSelects[i];
const min = simpleSelect.dataset.from;
const max = simpleSelect.dataset.to;
if(min == null || max == null)
return;
simpleSelect.appendChild(makeOption('-'));
for (let j = min; j <= max; ++j) {
simpleSelect.appendChild(makeOption(j));
}
}
})()
<select name="nrAdult" class="simpleSelect" data-from="0" data-to="5"></select>
<select name="nrChildren" class="simpleSelect" data-from="0" data-to="10"></select>
And I also just realised that you were using the same id multiple times, which is not only not allowed, but also doesn't work.
(And yes I am aware that what this does is quite different from what you want, but it is the same principle and I didn't want to give you an out-of-the-box solution.)
I've six fields on a form for showing the start time and end time in Hour: Minutes AM/PM format as follows :
<div class="block-time-term" style="padding-bottom:10px;">
<label>Starts at :</label>
<select name="hours_start" id="hours_start">
<option value="">hh</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>
</select>
<select name="minutes_start" id="minutes_start">
<option value="">mm</option>
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_start" id="am_pm_start">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<br><br>
<label>Ends at :</label>
<select name="hours_end" id="hours_end">
<option value="">hh</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>
</select>
<select name="minutes_end" id="minutes_end">
<option value="">mm</option>
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am_pm_end" id="am_pm_end">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
Now there are two hidden fields present on the form as follows :
<input type="hidden" name="val[start_time]" id="start_time" value=""/>
<input type="hidden" name="val[end_time]" id="end_time" value=""/>
Now what I want to do is when user selects all the values from the respective drop downs only then the selected values should get combined and should be stored in respecive hidden fields.
For example if user selects Start Time as follows 2 from Hour, 30 from Minutes and PM then the string to be formed and to be stored should be 02:35 PM. Same should be applicable to end date.
If anything is missing proper alert message should appear. How should I achieve this using jQuery/Javascript?
Thanks.
I have created a JSFiddle for you. I made the hidden text boxes visible for you to check the output. It's better to replace the alert messages with a DIV in production. Hope this helps.
http://jsfiddle.net/su8898/m5r140cy/4/
I have a drop down for Number of guests and then need to show another drop down which will have age for each guest. Lets say if some one select 2 from number of guests then 2 other drop down will show to select their age from. This far I have done using following code but the problem is if some body first selects 2 by mistake and goes back to one, the displayed drop down remains there, instead one drop down should hide. Please refer to the code below:
CSS:
#kidsage40, #kidsage41, #kidsage42
{
display:none;
}
HTML:
<select name="kids4" onChange="showroom4kidsage(this.value);">
<option value="0">Kids</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="kidsage40" id="kidsage40">
<option value="0">Kids Age</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>
</select>
<select name="kidsage41" id="kidsage41">
<option value="0">Kids Age</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>
</select>
<select name="kidsage42" id="kidsage42">
<option value="0">Kids Age</option>
<option value="1">1</option>
<option value="3">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>
</select>
JAVASCRIPT:
function showroom4kidsage(value)
{
for(i=0;i<value;i++)
{
kidsage = 'kidsage1'+i;
document.getElementById(kidsage).style.display = "block";
}
}
The easiest way is to just hide them all first, then your loop will show the correct number of drowns after.
function showroom4kidsage(value){
for(i=0;i<3;i++){
document.getElementById('kidsage4' + i).style.display = "none";
}
for(i=0;i<value;i++){
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}
Or adding a classname to make accessing these inputs easier:
<select class="foo" id="kidsage41>...</select>
<select class="foo" id="kidsage42>...</select>
and then you can:
function showroom4kidsage(value){
document.getElementByClassName('foo').style.display = "none";
for(i=0;i<value;i++){
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}
Simply add a class onto the selectboxes, say "kidsageselect" and then have your javascript do this:
function showroom4kidsage(value) {
var elems = document.getElementsByClassName('kidsageselect');
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = 'none';
}
for(var i = 0; i < value; i++) {
kidsage = 'kidsage4'+i;
document.getElementById(kidsage).style.display = "block";
}
}
you have to set all SELECTS to display:none before
Give all those select ONE class="randomclass" and set all elements in that class display:none
or set em one by one via loop or ony by one to display:none like
document.getElementById('kidsage42').style.display = "none";
that would hide the last select f.E.
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.