newbie in javascript

@nalvinrOct 06.2007

i have a form that has 3 select box and an input type text that determines the no of selected item, if the user selects ‘N/A’ it is considered not selected

for example

item 1 = 4
item 2 = N/A
item 3 = 3

no of items selected = 2

if the item 1 has been changed to ‘N/A’, the no of items selected = 1 and if the user again changed the item 2 to 5, the no of items selected will be back to 2,

how will i code this in javascript, i know that i should use the onChange property of the select box, here is my sample html, i hope someone could help me, thanks in advance…

<html>
<HEAD>
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY>
<H2>Determine the no of items</H2>
<select name=option1 onChange=”go()”>
<option value=”>— Select —
<option value=”0″>N/A
<option value=”1″>1
<option value=”2″>2
<option value=”3″>3
<option value=”4″>4
<option value=”5″>5
</select>
<br />
<select name=option2 onChange=”go()”>
<option value=”>— Select —
<option value=”0″>N/A
<option value=”1″>1
<option value=”2″>2
<option value=”3″>3
<option value=”4″>4
<option value=”5″>5
</select>
<br />
<select name=option3 onChange=”go()”>
<option value=”>— Select —
<option value=”0″>N/A
<option value=”1″>1
<option value=”2″>2
<option value=”3″>3
<option value=”4″>4
<option value=”5″>5
</select>
<br>
<input type=”text” id=”no_of_items” name=”no_of_items” value=”0″ readonly>
</form>

</BODY>
</HTML>

to post a comment

JavaScript

7 Comments(s) _↴

@Declan1991Oct 06.2007 — #Javascript:

[code=php]
 function go() {
 if (!document.getElementById) {
 return;
 }
 var items = 0;
 for (var i = 1; i <= 3; i++) {
 if (document.getElementById('option'+i).value != 0) {
 items++;
 }
 }
 document.getElementById('no_of_items').value = items;
 }
 [/code]

and all names need to be changed to ids.

@nalvinrauthorOct 06.2007 — #thanks declan, that works but what if the select box names would be optionA,optionB,optionC instead of option1,option2,option3? how would i solve the problem.

thanks in advance

@bals28mjkOct 06.2007 — #Try something like this:

[CODE]<html>
 <HEAD>
 <TITLE>JavaScript</TITLE>
 <script type="text/javascript">
 function func()
 { 
 var l=document.forms[0].elements.length
 var v=l
 for(var i=0;i<l;i++)
 {
 var si=document.forms[0].elements[i].selectedIndex
 if(document.forms[0].elements[i].options[si].value==0)
 {
 v--;
 }
 }
 document.getElementById("no_of_items").value=v
 }
 </script>
 </HEAD>
 <BODY>
 <H2>Determine the no of items</H2>
 <form>
 <select name="option1" onChange="func()">
 <option value=''>--- Select ---
 <option value="0">N/A
 <option value="1">1
 <option value="2">2
 <option value="3">3
 <option value="4">4
 <option value="5">5
 </select>
 <br />
 <select name="option2" onChange="func()">
 <option value=''>--- Select ---
 <option value="0">N/A
 <option value="1">1
 <option value="2">2
 <option value="3">3
 <option value="4">4
 <option value="5">5
 </select>
 <br />
 <select name="option3" onChange="func()">
 <option value=''>--- Select ---
 <option value="0">N/A
 <option value="1">1
 <option value="2">2
 <option value="3">3
 <option value="4">4
 <option value="5">5
 </select>
 </form>
 <br>
 <input type="text" id="no_of_items" name="no_of_items" value="0" readonly>
 </form>
 
 </BODY>
 </HTML>[/CODE]

ps It's best that you put all properties in the proper quotes e.g name="thename".

@Declan1991Oct 06.2007 — #javascript:

[code=php]
 var optionnames = new Array("optiona","optionb","optionc");
 function go() {
 if (!document.getElementById) {
 return;
 }
 var items = 0;
 for (var i = 1; i <= optionnames.length; i++) {
 if (document.getElementById(optionnames[i]).value != 0) {
 items++;
 }
 }
 document.getElementById('no_of_items').value = items;
 }
 [/code]

Simply change the values of optionsnames array to whatever you want, and if you need to add more, you don't need to alter the loop.

Edit:

If you want it to be more automatic and unobtrusive you could always do this:

Javascript:

[code=php]
 window.onload=function(){
 prep();
 }
 function prep() {
 if (document.getElementById && document.getElementsByTagName) {
 var selects = document.getElementById('form1').getElementsByTagName("select");
 for (var i = 0; i < selects.length; i++) {
 selects[i].onchange = go;
 }
 }
 }
 function go() {
 var amount = 0;
 if (document.getElementById && document.getElementsByTagName) {
 var selects = document.getElementById('form1').getElementsByTagName("select");
 for (var i = 0; i < selects.length; i++) {
 if (selects[i].value != 0) {
 amount++;
 }
 }
 document.getElementById('no_of_items').value = amount;
 }
 }[/code]

[code=html]
 <form id="form1">
 <select name="option1">
 <option value="">--- Select ---</option>
 <option value="0">N/A</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>
 </select>
 <br />
 <select name="option2">
 <option value="">--- Select ---</option>
 <option value="0">N/A</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>
 </select>
 <br />
 <select name="option3">
 <option value="">--- Select ---</option>
 <option value="0">N/A</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>
 </select>
 <br />
 <input type="text" id="no_of_items" name="no_of_items" value="0" readonly="readonly" />
 </form>
 [/code]

The number of selects or their ids or names are irrelevant, and you don't need to add event handlers to the selects.

@nalvinrauthorOct 07.2007 — #thanks again declan1991, will try this later.

@nalvinrauthorOct 07.2007 — #another question, what if i add a new input text box to get the sum of the selected box

ex. Option A = 5

Option B = N/A

Option C = 2

 Total = 7
   No of items selected = 2

thanks in advance

@nalvinrauthorOct 07.2007 — #never mind i got it, but thanks to those who help....

Also in #JavaScript _↴

Need script---new here [RESOLVED] CSS manipulation Dropdown menu doesn't work when I publish the page

Success!

Help @nalvinr spread the word by sharing this article on Twitter...

Tweet This

newbie in javascript

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

newbie in javascript

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴