(e-mail address removed) wrote:
Hello,
Being an absolute beginner, I wasn't able to take your code clips and
put it into a usable .html file. This doesn't mean I can't! I just
haven't figured it out yet.
It still looks like you were able to calculate the result as you wished,
so you may not be really that far from the solution.
In this case, I was able to change the amount of dropdowns by editing
the value "5" under the "buildselects" area, but again, you are way out
of my league. Because the drop downs are all created identically, I
wasn't able to assign a "name" value or add a text label to each.
When creating mass data, one usually considers three different methods:
[1] The first method consists in manually writing the content in the
file, either in the HTML file directly or using some automated method on
a server (like a loop in server pages like ASP, PHP or JSP). The
advantage is that users deprived from javascript on their browser will
still see some content, which will be validated on the server. Although
this method increases the network load, this is the safest one and most
employed in business sites.
[2] The second one consists in writing the mass HTML in a javascript
variable, then document.writing the content of this variable on the
document. Users whose user agent does not have javascript enabled will
see nothing, though. This method is generally compatible with all kind
of javascript-enabled browsers.
[3] The last one consists in using DOM (Document Object Model) methods.
Basically, your document is like a tree of elements (representing the
HTML structure), with parents and siblings. New elements can be created
and inserted into the tree. This is an advanced method of populating
data into a HTML page and I used it in the example since I thought this
could be the one teaching you most. As for method 2, users without
javascript see nothing.
Your not being a web developer means I should have used solution 2; the
example has therefore been changed and should be easier to use (if you
use server pages, just plug in the validating part, keeping on eye on
SELECT event handlers).
If I can restate what the end solution should look like:
Dropdown 1 has [select name="1"] and values = [0% to 100%]
Dropdown 2 has [select name="2"] and values = [0% to 100%]
Dropdown 3 (etc)
TextBox 1: [Total of All Dropdowns]
Idealy though, "Textbox 1" would remain "red" or something until the
value = 100. Or even a line of text next to it that said "this doesn't
equal 100% yet". An alert box won't work because I don't want alerts
coming up while end-users are still selecting dropdowns.
Thanks for your example, it gives a nice hint about what you really
want. To specify a background color, your need to retrieve a pointer to
the element you want to color, then apply the color using
pointer.style.backgroundColor="colorCode". Also, you do not need to use
a timer to have the thing calculated (I guess you did that to solve
cross-browsers issues, however using events work fine).
HTH, and have a nice day.
---
<style type="text/css">
#info {font-size:0.8em;}
input,select {margin:0 10px;border:1px solid #ddd}
</style>
<script type="text/javascript">
// Generating part
var buffer=[];
buffer.push("<form>");
buffer.push("<table>");
buffer.push("<tbody>");
buffer.push(getSelectLine("Label 1", "percBox1"));
buffer.push(getSelectLine("Label 2", "percBox2"));
buffer.push(getSelectLine("Label 3", "percBox3"));
buffer.push(getSelectLine("Label 4", "percBox4"));
buffer.push(getSelectLine("Label 5", "percBox5"));
buffer.push(getResultLine("Total :", "percBoxX"));
buffer.push("<\/tbody>");
buffer.push("<\/table>");
buffer.push("<\/form>");
document.write(buffer.join(""));
function getSelectLine(label, selectName) {
var buffer=[];
buffer.push("<tr>");
buffer.push("<td>");
buffer.push(label);
buffer.push("<\/td>");
buffer.push("<td>");
buffer.push(getSelectHTML(selectName));
buffer.push("<\/td>");
buffer.push("<\/tr>");
return buffer.join("");
}
function getResultLine(label, name) {
var buffer=[];
buffer.push("<tr>");
buffer.push("<td>");
buffer.push(label);
buffer.push("<\/td>");
buffer.push("<td>");
buffer.push("<input type='text' name='"+name+"' size='3' readOnly>");
buffer.push("<span id='info'><\/span>");
buffer.push("<\/td>");
buffer.push("<\/tr>");
return buffer.join("");
}
function getSelectHTML(selectName){
var buffer=[];
buffer.push("<select name='"+selectName+"' "+
"onchange='calculate()' onkeyup='calculate()'>");
for(var ii=0; ii<=100; ii++)
buffer.push("<option value='"+ii+"'>"+ii+"%<\/option>")
buffer.push("<\/select>");
return buffer.join("");
}
// validating part
// make sure names are the ones used in the generating part
function calculate(){
var frm=document.forms[0];
var sum= +frm.percBox1.value +
+frm.percBox2.value +
+frm.percBox3.value +
+frm.percBox4.value +
+frm.percBox5.value ;
frm.percBoxX.value = sum;
if(sum==100) {
frm.percBoxX.style.backgroundColor="#5c5";
document.getElementById("info").innerHTML="";
} else {
frm.percBoxX.style.backgroundColor="#c55"
document.getElementById("info").innerHTML="Total should be 100%!";
}
}
</script>
---
