Auto Submit / Dynamic List

[cbaird82]

Hello, I am very new to these forums, so I apologize if this question is either in the wrong location, or impossible to accomplish.

I am very new to HTML editing. While I have got the basics down, I have been tasked with creating a website for one of my friend's business. I have been "attempting" to finish this task, but I seem to come across a road block.

What I would like to do is create a form with several checkboxes. Each checkbox would be assigned a numeric value. Below the form field, data that is displayed would change based on the combined values of the checkboxes.

I will try to clarify.


For example.


Say you have 6 checkboxes. The number in parenthesis is the value.

[ ] (1)
[ ] (2)
[ ] (1)
[ ] (4)
[ ] (3)
[ ] (7)


Now say that two of the boxes are checked.

[ ] (1)
[ ] (2)
[x] (1)
[ ] (4)
[x] (3)
[ ] (7)


Their total value is four [(1) and (3)]. Now what would be displayed, in either an iFrame, or on the page itself if it is possible, would be dependent on the total value, say 0<=4 would be one set of information; 5<=8 would be another; 9+ a third set.

Also, this form would have to update on every click. No submit button.

I believe you can understand my dilemma. I have been searching the web for an answer to both of these problems, both together and separate.

Please, anything will be helpful and appreciated, even if not an answer, a point in the right direction. Thanks.

[Pegasus]

You can't do that with HTML. That much I do know. I'm just not sure if it can be done with Javascript alone. I'll move the thread to Client-side Scripting for you and someone there will know more.

[rangana]

Their total value is four [(1) and (3)]. Now what would be displayed, in either an iFrame, or on the page itself if it is possible, would be dependent on the total value, say 0<=4 would be one set of information; 5<=8 would be another; 9+ a third set.


I'm confused (nothing new) :P

When you say "one set of information", what do you mean by that :confused:

...also, will the checkbox only limit up to two checkboxes when checked :confused:

Where did you get 0 and 4 on "0<=4", 5 and 8 on "5<=8"... :confused:

[cbaird82]

I will try to clarify.


First, any number of checkboxes would be selectable.

Each checkbox has an individual value.

Once any checkbox is selected (or deselected) the total value of all checkboxes would be immediately calculated.

If the total value is greater than or equal to zero, but less than four, one set of predetermined information would be displayed.

If the total value is greater than or equal to four, but less than eight, a set of information that is different from the first set would be displayed.

If the total value is greater than or equal to eight, a third set of information would be displayed instead of the first two.


So say three checkboxes are selected; one with a value of three, and two with a value of two. The total value would be seven, which is greater or equal to four, but less than eight. So the second set of information would be displayed, instead of the first or third set.

I'm not really sure on the values I want to use for this, but I believe once I have the coding for this problem, changing the values shouldn't be incredibly difficult, but I have been wrong before.

I hope that clears up any misunderstandings.

[rangana]

<script type="text/javascript">
window.addEventListener?window.addEventListener('load',function()
{
ray.reset(); // Hide the 3 element's ID as specified in infos method of ray object
ray.trig('hold','trig'); // Call the trig method and pass the ID that holds the checkboxes and the ID of the element that triggers
},false):
window.attachEvent('onload',function()
{
ray.reset(); // Hide the 3 element's ID as specified in infos method of ray object
ray.trig('hold','trig'); // Call the trig method and pass the ID that holds the checkboxes and the ID of the element that triggers
}); // FF : IE

var ray=
{
infos:['info1','info2','info3'], // ID of the divs that will correspond to the if-else statement
trig:function(id,func)
{
this.getID(func).onclick=function()
{
ray.sum(id,func); // Call the sum method
} // End of the onclick event
}, // End of the trig method

sum:function(id,func)
{
var inpsArr = this.getID(id).getElementsByTagName('input'); // Get input elements on the element with ID passed
var sum=0; // Initiate sum variable
for (var i = 0; i < inpsArr.length; i++) // Loop through all the elements
{
if(inpsArr[i].getAttribute('type')=='checkbox'&&inpsArr[i].checked) // If it's a checkbox and is checked
sum += Number(inpsArr[i].value); // Add the total value of the checked checkbox and assign to sum variable
}; // End of the for loop
this.reset();
sum>=0&&sum<4?this.showEL(this.infos[0]): // If total value is greater than or equal to 0 and lesser than 4
sum>=4&&sum<8?this.showEL(this.infos[1]): // If total value is greater than or equal to 4 and lesser than 8
sum>=8?this.showEL(this.infos[2]): // If totalvalue is greater than or equal to 8
alert('Error occurred.'); // Otherwise, an error occured.
}, // End of sum method

showEL:function(el){this.getID(el).style.display='';}, // Show the element as defined in the passed argument

getID:function(el){return document.getElementById(el);}, // Get element's ID

reset:function()
{
for ( var i = 0 ; i < this.infos.length ; i++) // Loop through all the indeces of info array
this.getID(this.infos[i]).style.display='none'; // Hide the element with ID specified in infos array (method)
} // End of reset method
} // End of ray object
</script>

<p id="hold">
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
<input type="checkbox" value="6">6
<input type="checkbox" value="7">7
<input type="checkbox" value="8">8
<input type="checkbox" value="9">9
</p>
<input type="button" value="Show Info!" id="trig">
<p id="info1">Info 1</p>
<p id="info2">Info 2</p>
<p id="info3">Info 3</p>