Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

How to get checkboxes and not dropdown



8:30 pm on Sep 22, 2013 (gmt 0)

5+ Year Member


I'm trying to create checkboxes and not dropdown options in this calculator. Can anyone help please?


<form name="calTable"> 
<select name="select1">
<option name="interview" value="11">Interview</option>
<option name="focus" value="12">Focus</option>
<select name="select2">
<option name="normal" value="21">Normal</option>
<option name="priority" value="22">Priority</option>
<span>Total No. of Minutes</span>
<input type="text" name="num" placeholder="enter valid no" value="">
function calc(){
var sel1 = document.calTable.select1.value;
var sel2= document.calTable.select2.value;
var num=document.calTable.num.value;

if(sel1==11 && sel2==21){var val=num*1.10;}
if(sel1==11 && sel2==22){var val=num*1.30;}
if(sel1==12 && sel2==21){var val=num*1.30;}
if(sel1==12 && sel2==22){var val=num*1.50;}

document.getElementById("output").innerHTML = val;
<input type="button" onclick="calc();" value="calculate Total cost" >
&nbsp &nbsp &nbsp<div id="output"> Total Cost</div>


10:17 pm on Sep 22, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Heh. It's the rarely seen Too Little Information.

My first reaction was "If you want checkboxes, why does the code call for 'select', which means dropdowns?" My second reaction was: How can you use checkboxes if each category has two or more mutually exclusive options? For that you'd need radio buttons if you want something visible. (Yes, technically you could use checkboxes, but then you'd also need a bunch of extra code to ensure that the user has selected exactly one item in each category.)

That takes us to answer #3: You gotta give us a hint. How much about forms do you already know? Is this an existing form of your own that you want to tweak, or something you found online and you have no idea what part does what?

The quoted form is done within javascript. But this is the /html/ forum. Does that mean it's fundamentally an HTML question-- which it easily could be-- or that you goofed when clicking New Topic?


8:13 am on Sep 23, 2013 (gmt 0)

5+ Year Member

Yeah, sorry. It's been a long time since I posted on a forum like this.

One of my team has created this calculator. However, between us, we don't know how to get radio buttons.

I'm not sure if this is an html question or java.

Thanks again for you help.


9:19 am on Sep 23, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Well, the horse's mouth is here
but frankly their html pages scare me to death. (The css pages are fine.)

Quick cut-and-paste from the nearest form I've got handy:

<input type = "radio" name = "keepdate" value = "fulldate">Full Date<br>
<input type = "radio" name = "keepdate" value = "divider" checked = "checked">Divider<br>
<input type = "radio" name = "keepdate" value = "none">Nothing


<input type = "checkbox" name = "keepline" value = "opt_ip">IP<br>
<input type = "checkbox" name = "keepline" value = "opt_mth">Method<br>
<input type = "checkbox" name = "keepline" value = "opt_page">Page<br>

Note the name of each item. Forms are one of the few places the name attribute is still used. To keep radio buttons together, they all have to have the same name.

Featured Threads

Hot Threads This Week

Hot Threads This Month