HTML Help

Joeyeti · Joined: 21 Nov 2008 Posts: 5

Hi,

I am creating a simple webpage with an image in the background and multiple comboboxes (<select> tag) for the user to select values. Here is one of the comboboxes:

Code: <select style="position:absolute; left:919px; top:288px; background-color: blue; color: white;" id="cze us" class="us">
<option selected>0 <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11
</select>

I need to work with these selected values further and as I am quite a noob in HTML/Web programming, I have these questions:

1. How could I add values in multiple comboboxes selected, e.g. 1,3,2,6,0 together to a sum value with a button click?

2. Or would it be possible to make the addition interactive - e.g. once the user selects a different value in a combobox, the sum would be adjusted?

3. How could I store the current selections in multiple comboboxes in a txt file on the server and then recall it later?

Thx!

Joe

nikki · Joined: 24 Nov 2008 Posts: 61

<select style="position:absolute; left:919px; top:288px; background-color: blue; color: white;" id="czeus1" class="us" onchange="addValues();">
<option selected>0 <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11
</select> <br/>

<select style="position:absolute; left:959px; top:288px; background-color: blue; color: white;" id="czeus2" class="us" onchange="addValues();">
<option selected>0 <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11
</select><br/>

<select style="position:absolute; left:999px; top:288px; background-color: blue; color: white;" id="czeus3" class="us" onchange="addValues();">
<option selected>0 <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11
</select><br/>

<select style="position:absolute; left:1039px; top:288px; background-color: blue; color: white;" id="czeus4" class="us" onchange="addValues();">
<option selected>0 <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11
</select>

<input type="text" id="sum" value="" />

add this in head tag
<script>
function addValues(){

var val1 = document.getElementById("czeus1").value;
var val2 = document.getElementById("czeus2").value;
var val3 = document.getElementById("czeus3").value;
var val4 = document.getElementById("czeus4").value;
var sum = parseInt(val1)+ parseInt(val2)+ parseInt(val3) + parseInt(val4);
document.getElementById("sum").value = sum;
}

Joeyeti · Joined: 21 Nov 2008 Posts: 5

Thx nikki! This looks promising and just what I needed! Will try it out...

What would be the code for displaying the "sum" into a textbox (preferably non-writtable), positioned somewhere around the background?

nikki · Joined: 24 Nov 2008 Posts: 61

the javascript function addValues(), calculates the sum of all the values from dropdown
var total = parseInt(val1)+ parseInt(val2)+ parseInt(val3) + parseInt(val4);

to display the sum of these values
document.getElementById("sum").value = total;
the HTML code for the text box looks like this <input type="text" id="sum" value="" />

Joeyeti · Joined: 21 Nov 2008 Posts: 5

Hi nikki,

This all is working under Opera 9.52, but in Internet Explorer 7 the textbox for the sum gives me a "NaN" value...

What could be wrong?

nikki · Joined: 24 Nov 2008 Posts: 61

Try using parseInt(val1,10) ;

Joeyeti · Joined: 21 Nov 2008 Posts: 5

Tried to adapt the above for my needs and trying to get the following code working... no success yet, so I suspect a formal error in the code somewhere.

Code:
<html>

<head>
<script>
var czUspresence as int
var czUscontrol as int
var czUssrpresence as int
var czUssrcontrol as int

function euGetstatus(){
var czUs = document.getElementById("cze_us").value;
var czUssr = document.getElementById("cze_ussr").value;
var sumCz = parseInt(czUs,10) - parseInt(czUssr,10)

if (sumCz < -2)
{czUssrcontrol = 1 ;
czUscontrol = 0;
czUssrpresence = 1;
   if (czUs > 0)
   {czUspresence = 1;
   }
}
else if (sumCz > 2)
{czUscontrol = 1;
czUssrcontrol = 0;
czUspresence = 1;
   if (czUssr > 0)
   {czUssrpresence = 1;
   }
}
else if (sumCz <> 0)
   {if (czUs>czUssr)
   {czUspresence = 1;
   }
   else
   czUssrpresence = 1;
   }
}

document.getElementById("euUsregular").value = sumUspresence;
document.getElementById("euUsbattleground").value = czUscontrol;
document.getElementById("euUssrregular").value = czUssrpresence;
document.getElementById("euUssrbattleground").value = czUssrcontrol;
}

</script>
</head>

<body>

<select style="position:absolute; left:919px; top:286px; background-color: blue; color: white;" id="cze_us" class="us" onchange="euGetstatus();">
<option selected>0 <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11
</select>

<select style="position:absolute; left:956px; top:286px; background-color: red; color: white;" id="cze_ussr" class="ussr" onchange="euGetstatus();">
<option selected>0 <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11
</select>

<input type="text" id="euUsregular" style="position:absolute; left:550px; top:150px; background-color: cyan; color: black" readonly=true size="2" value="" align="center"/>
<input type="text" id="euUsbattleground" style="position:absolute; left:550px; top:180px; background-color: cyan; color: black" readonly=true size="2" value="" align="center"/>
<input type="text" id="euUssrregular" style="position:absolute; left:600px; top:150px; background-color: pink; color: black" readonly=true size="2" value="" align="center"/>
<input type="text" id="euUssrbattleground" style="position:absolute; left:600px; top:180px; background-color: pink; color: black" readonly=true size="2" value="" align="center"/>

</body>
</html>

Can someone help with finding the error and/or correcting any mistake in there?

What I am trying to do is to check the two values (cze_us and cze_ussr) to see, which one is bigger and also their difference. One of the breaking points is (-)3, where the respective country would get cz****control and also cz****presence equal to 1.

When the difference is less then 3 and a country has more than 0 (cze_us or cze_ussr), that country gets only cz****presence equal to 1.

If a country has its cze_us(sr) value equal to 0, it does not get any cz****presence or control.

Hope I am clear ;)

nikki · Joined: 24 Nov 2008 Posts: 61

sumUspresence is not declared and also (sumCz <> 0) doesnt work for me
Use either (sumCz != 0) or if( (sumCz < 0) || (sumCz > 0) )

Joeyeti · Joined: 21 Nov 2008 Posts: 5

Thx nikki!

I played a little with that function and got it working now (there were unneeded declarations before and also some other wrong things), here is the final code.

I will continue and put my further questions here if needed ;)

Code: function euGetstatus(){

var czUs = document.getElementById("cze_us").value;
var czUssr = document.getElementById("cze_ussr").value;
var sumCz = parseInt(czUs) - parseInt(czUssr);

if (sumCz < -2)
{czUssrcontrol = 1 ;
}
else
{czUssrcontrol = 0;
}

if (sumCz > 2)
{czUscontrol = 1 ;
}
else
{czUscontrol = 0;
}

if (czUs > 0)
{czUspresence = 1 ;
}
else
{czUspresence = 0;
}

if (czUssr > 0)
{czUssrpresence = 1 ;
}
else
{czUssrpresence = 0;
}

document.getElementById("euUsregular").value = czUspresence;
document.getElementById("euUsbattleground").value = czUscontrol;
document.getElementById("euUssrregular").value = czUssrpresence;
document.getElementById("euUssrbattleground").value = czUssrcontrol;
}