PDA

View Full Version : Checkbox Problem

junchronick
08-24-2011, 08:20 AM
Here, I'm having a problem with my homework, My Teacher asked me to do an Online Voting System. Here in Philippines, during election, we can only vote 1 President, 1 Vice President, 12 Senators 1 Mayor, 1 Congressman, 1 Vice Mayor and 6 Councilors at a time, I made up a code that when you choose more than 12 checkboxes under Senators, there will be a pop up saying that you can only vote 12 Senators. I passed it to my teacher but, He said that he wants that when he clicked a button, all of the checked checkboxes will appear together with the Candidate's name.

Note: I used Checkbox for Senators and Councilors while I used Radiobuttons for the rest. If someone could help me with it, I'll greatly appreciate it. I want to have simple codes that I can easily understand but if there is none, I will try hard to understand it. thanks in advance!

Here's my Code:

<html>

<script type="text/javascript">
<!--
//initial checkCount of zero
var checkCount=0

//maximum number of allowed checked boxes
var maxChecks=12

function setChecks(obj){
//increment/decrement checkCount
if(obj.checked){
checkCount=checkCount+1
}else{
checkCount=checkCount-1
}
//if they checked a 4th box, uncheck the box, then decrement checkcount and pop alert
if (checkCount>maxChecks){
obj.checked=false
checkCount=checkCount-1
alert('You can only vote '+maxChecks+' candidates for Senators')
}
}
//-->
</script>

<script type="text/javascript">

function countChoices(obj) {
max = 6; // max. number allowed at a time

box1 = obj.form.box1.checked; // your checkboxes here
box2 = obj.form.box2.checked;
box3 = obj.form.box3.checked; // add more if necessary
box4 = obj.form.box4.checked;
box5 = obj.form.box5.checked;
box6 = obj.form.box6.checked;
box7 = obj.form.box7.checked;
box8 = obj.form.box8.checked;
box9 = obj.form.box9.checked;
box10 = obj.form.box10.checked;
count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0) + (box4 ? 1 : 0) + (box5 ? 1 : 0)+ (box6 ? 1 : 0)
+ (box7 ? 1 : 0) + (box8 ? 1 : 0) + (box9 ? 1 : 0) + (box10 ? 1 : 0);
// If you have more checkboxes on your form
// add more (box_ ? 1 : 0) 's separated by '+'

if (count > max) {
alert("You can only vote 6 Councilors");
obj.checked = false;
}
}

</script>

<img src="comelec.jpg" align="middle">
<body>
<form name='sample' method=post
Action='mailto:abc@xxx.com'>
<h2 align="middle">Personal Information</h2><br/>
<b>Precint No.:&nbsp;<input type=text name='precintno' size=20>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<b>Pooling Station:&nbsp;<input type=text name='poolingstation' size=20><br/><br/>

<b>Last Name:&nbsp;<input type=text name='lastname' size=20>&nbsp;&nbsp;

<b>First Name:&nbsp;<input type=text name='firstname' size=20>&nbsp;&nbsp;

<b>Middle Name:&nbsp;<input type=text name='middlename' size=20><br/><br/>

<b>Date of Birth:&nbsp;<select><option value="-1">Month</option><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select>&nbsp;&nbsp;<select>

<option>Day</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><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>&nbsp;&nbsp;

<select><option>Year</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option><option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option><option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option><option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option><option value="1917">1917</option><option value="1916">1916</option><option value="1915">1915</option><option value="1914">1914</option><option value="1913">1913</option><option value="1912">1912</option><option value="1911">1911</option><option value="1910">1910</option><option value="1909">1909</option><option value="1908">1908</option><option value="1907">1907</option><option value="1906">1906</option><option value="1905">1905</option></select><br/><br/>

<h2 align="middle">Candidates</h2>
<h3 align="middle">President</h3>
<input type=radio name='president'>Benigno Aquino Jr. III<br/>

<input type=radio name='president'>John Carlos de los Reyes<br/><br/><br/>
<h3 align="middle">Vice President</h3>

<h3 align="middle">Senators</h3>

<body>
<form>
<input type="checkbox" id="check1" onclick="setChecks(this)">Bong Revilla Jr.<br/>
<input type="checkbox" id="check3" onclick="setChecks(this)">Miriam Defensor Santiago<br/>
<input type="checkbox" id="check4" onclick="setChecks(this)">Franklin Drilon<br/>
<input type="checkbox" id="check5" onclick="setChecks(this)">Juan Ponce Enrile <br/>
<input type="checkbox" id="check7" onclick="setChecks(this)">Pia Cayetano<br/>

<input type="checkbox" id="check8" onclick="setChecks(this)">Ferdinand Marcos Jr<br/>
<input type="checkbox" id="check9" onclick="setChecks(this)">Ralph Recto<br/>
<input type="checkbox" id="check10" onclick="setChecks(this)">Tito Sotto<br/>
<input type="checkbox" id="check11" onclick="setChecks(this)">Sergio Osmeņa III<br/>
<input type="checkbox" id="check12" onclick="setChecks(this)">Lito Lapid<br/>
<input type="checkbox" id="check13" onclick="setChecks(this)">Teofisto Guingona III<br/>

<input type="checkbox" id="check14" onclick="setChecks(this)">Risa Hontiveros-Baraquel<br/>
<input type="checkbox" id="check15" onclick="setChecks(this)">Ruffy Biazon<br/>
<input type="checkbox" id="check16" onclick="setChecks(this)">Joey de Venecia<br/>
<input type="checkbox" id="check17" onclick="setChecks(this)">Gilbert Remulla<br/>
<input type="checkbox" id="check18" onclick="setChecks(this)">Danilo Lim<br/>
<input type="checkbox" id="check19" onclick="setChecks(this)">Sonia Rocco<br/>

<input type="checkbox" id="check20" onclick="setChecks(this)">Ariel Querubin<br>
<input type="checkbox" id="check21" onclick="setChecks(this)">Liza Maza<br/>
<input type="checkbox" id="check22" onclick="setChecks(this)">Satur Ocampo<br/>
<input type="checkbox" id="check23" onclick="setChecks(this)">Gwendolyn Pimentel<br/>
<input type="checkbox" id="check24" onclick="setChecks(this)">Wilfredo Kuan

</form>
<h3 align="middle">Congressman</h3>

<h3 align="middle">Mayor</h3>

<h3 align="middle">Vice Mayor</h3>

<h3 align="middle">Councilor</h3>
Note:Vote Only 6 Councilors otherwise your vote will not be counted<br/><br/>

<input type=checkbox name=box1 onClick="countChoices(this)">Edgardo Bilog Jr<br/>
<input type=checkbox name=box2 onClick="countChoices(this)">Richard Carino<br/>

<input type=checkbox name=box3 onClick="countChoices(this)">Perlita Rondez<br/>
<input type=checkbox name=box4 onClick="countChoices(this)">Fred Bagbagen<br/>
<input type=checkbox name=box5 onClick="countChoices(this)">Philian Weygan<br/>
<input type=checkbox name=box6 onClick="countChoices(this)">Nicasio Palaganas<br/>
<input type=checkbox name=box7 onClick="countChoices(this)">Odell Aquino<br/>
<input type=checkbox name=box8 onClick="countChoices(this)">Anthony Araos<br/>
<input type=checkbox name=box9 onClick="countChoices(this)">Antonio Cortes Jr.<br/>
<input type=checkbox name=box10 onClick="countChoices(this)">Robin Coteng<br/>

</form>
<input type=RESET value="Reset and Vote Again">
<hr><br/>
</body>
</form>
</html>

Logic Ali
08-24-2011, 01:33 PM
all of the checked checkboxes will appear together with the Candidate's nameI don't understand this sentence. Appear where and under what circumstances?

webdev1958
08-24-2011, 01:38 PM
I don't understand this sentence. Appear where and under what circumstances?

I'm not sure either. But I think it means that when a button is clicked, the selected (checked) names are displayed :confused:

junchronick
08-25-2011, 12:17 AM
I'm not sure either. But I think it means that when a button is clicked, the selected (checked) names are displayed :confused:

Yes Sir, that's what I mean. I'm sorry for my poor english.

Old Pedant
08-25-2011, 01:05 AM
And what? All the other names disappear?

Or does the instructor want you to display all of the voter's choices on a separate web page?

Logic Ali
08-25-2011, 01:17 AM
Yes Sir, that's what I mean. I'm sorry for my poor english.Give each checkbox a value matching the candidate's name, then build a string from all the values, each separated by \n.

Old Pedant
08-25-2011, 02:14 AM
I would think that, if the instructor wants you to do this for the checkboxes, he would want you to do it for the radio button fields as well.

It's not hard, but we need to know more about how he wants it all presented: All on a single HTML page? Or the voting page posts data to a display page?

webdev1958
08-25-2011, 02:16 AM
Yes Sir, that's what I mean. I'm sorry for my poor english.

ok, there's a few ways you can do this.

One way to count the number of senators selected is to put all the checkboxes in a <fieldset> and then use getElementsByTagName() (http://reference.sitepoint.com/javascript/Document/getElementsByTagName) to collect them into a node list (which behaves like an array to some extent). Then check if the length of the node list is less than 12.

To display the names of the senators you could use an array of names but since this is homework, the easiest way is as Logic Ali suggests.

It's not hard, but we need to know more about how he wants it all presented:

If you go look at the op's original code you will see a mailto: in it.

@junchronick

btw - your html is invalid and should be tidied up. You have multiple body tags and a </form> below the last </body> amongst other errors. A handy resource for validating html is the W3C Validator (http://validator.w3.org/).

Old Pedant
08-25-2011, 03:12 AM
One way to count the number of senators selected is to put all the checkboxes in a <fieldset> and then use getElementsByTagName() to collect them into a node list (which behaves like an array to some extent). Then check if the length of the node list is less than 12.

Ummm...no. He has *MORE THAN 12* senators on the ballot. It is just that the voter may only select up to 12, no more. Counting the length from getElementsByTagName will give the number of checkboxes, not the number of votes.

In any case, he has code to count the checked checkboxes (not the best code, but it should work).

His mistake is that he gives each checkbox an ID--for no reason that I can discern--and omits giving them a name. *AND* omits giving them values. If he gives all the checkboxes the same name and gives them values, the code is trivial:

<input type="checkbox" name="senator" onclick="countSenators(this.form)" value="Bong Revilla Jr.">Bong Revilla Jr.<br/>
...
<input type="checkbox" name="senator" onclick="countSenators(this.form)" value="Wilfredo Kuan">Wilfredo Kuan
<br/><br/>
You voted for these senators:

And then:

function countSenators(form)
{
var senators = [ ];
var cbs = form.senator;
for ( var c = 0; c < cbs.length; ++c )
{
if ( cbs[c].checked )
{
senators.push[ cbs[c].value;
}
}
if ( senators.length > 12 )
{
alert("You can only vote for 12 senators");
senators = [];
}
}

I think that works. No?

webdev1958
08-25-2011, 03:28 AM
Ummm...no. He has *MORE THAN 12* senators on the ballot. It is just that the voter may only select up to 12, no more. Counting the length from getElementsByTagName will give the number of checkboxes, not the number of votes.

yes you're right. You would need to collect the checkboxes and then count how many are actually selected.

I was multi-tasking when I made that post and it's not my strong point :( - don't they say women are better at multi-tasking? :thumbsup:

Old Pedant
08-25-2011, 03:40 AM
Your post did make it occur to me that you *could* pull a cute trick:

<input type="checkbox" class="NOPE" name="senator" value="Joe Sixpack"
onclick="this.className=this.checked?'SENATOR':'NOPE';" />

And then you could do

var allSenators = document.getElementsByClassName("SENATOR");

Presto.

Old Pedant
08-25-2011, 03:41 AM
don't they say women are better at multi-tasking? :thumbsup:

Shhh...you aren't supposed to admit that!

junchronick
08-25-2011, 12:40 PM
waaa I'm really dizzy now, I'm new on Javascript coding, I tried this code it worked

<html>

<script type="text/javascript" src="finaljs.js"></script>

<center><img src="comelec.jpg"></center>

<body onsubmit="init()">

<div id="input">
<form action="#">
<p>
<label for="fName">Enter Firstname:</label>
<input type="text" id="fName">
<label for="lName">Enter Lastname:</label>
<input type="text" id="lName">
</p>

<p>
Gender:

<label for="male">Male</label>
<label for="female">Female</label>
</p>

<p>
For President:

<input type="radio" value="Benigno Aquino Jr. III" id="pres1" name="pres">
<label for="Benigno Aquino Jr. III">Benigno Aquino Jr. III</label>
<input type="radio" value="Manny Villar" id="pres2" name="pres">
<label for="Manny Villar">Manny Villar</label>
<input type="radio" value="Gilbert Teodoro" id="pres3" name="pres">
<label for="Gilbert Teodoro">Gilbert Teodoro</label>
<input type="radio" value="Eddie Villanueva" id="pres5" name="pres">
<label for="Eddie Villanueva">Eddie Villanueva</label>
<input type="radio" value="Richard Gordon" id="pres6" name="Richard Gordon">
<label for="Richard Gordon">Richard Gordon</label>
<input type="radio" value="Nicanor Perlas" id="pres7" name="Nicanor Perlas">
<label for="Nicanor Perlas">Nicanor Perlas</label>
<input type="radio" value="John Carlos de los Reyes" id="pres9" name="John Carlos de los Reyes">
<label for="John Carlos de los Reyes">John Carlos de los Reyes</label>

</p>

<p>
<input type="radio" value="Maunel Roxas" id="vicepres1" name="vicepres">
<label for="Maunel Roxas">Maunel Roxas</label>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

my finaljs.js'content is this

function init()
{

var gender;
var pres;
var vicepres;
if(male.checked)
{
gender = "male";
}
if(female.checked)
{
gender = "female";
}
if(pres1.checked)
{
pres = "Benigno Aquino Jr. III";
}

if(pres2.checked)
{
pres = "Manny Villar";
}
if(pres3.checked)
{
pres = "Gilbert Teodoro";
}
if(pres4.checked)
{
}
if(pres5.checked)
{
pres = "Eddie Villanueva";
}
if(pres6.checked)
{
pres = "Richard Gordon";
}
if(pres7.checked)
{
pres = "Nicanor Perlas";
}
if(pres8.checked)
{
}
if(pres9.checked)
{
pres = "John Carlos de los Reyes";
}

document.write(document.getElementById('fName').value+" "+document.getElementById('lName').value+"<br>");
document.write(gender+"<br />");
document.write(pres);

}

my problem is, when I click submit button, it won't show the vice pres' name instead, it will write "undefined".

junchronick
08-25-2011, 02:59 PM
after I figured it out, I encountered another problem.

The problem is, when I choose 12 Senators, after I clicked the Submit Button only 1 Senator Candidate that I chose is appearing :( Here's my Code

<html>

<script type="text/javascript" src="finaljs.js"></script>
<center><img src="comelec.jpg"></center>

<body onsubmit="init()">

<div id="input">
<form action="#">
<p>
<label for="fName">Enter Firstname:</label>
<input type="text" id="fName">
<label for="lName">Enter Lastname:</label>
<input type="text" id="lName">
</p>

<p>
Gender:

<label for="male">Male</label>
<label for="female">Female</label>
</p>

<p>
<h1><center>For President:</center></h1>

<input type="radio" value="Benigno Aquino Jr. III" id="pres1" name="pres">
<label for="Benigno Aquino Jr. III">Benigno Aquino Jr. III</label><br/>
<input type="radio" value="Manny Villar" id="pres2" name="pres">
<label for="Manny Villar">Manny Villar</label><br/>
<input type="radio" value="Gilbert Teodoro" id="pres3" name="pres">
<label for="Gilbert Teodoro">Gilbert Teodoro</label><br/>
<input type="radio" value="Eddie Villanueva" id="pres5" name="pres">
<label for="Eddie Villanueva">Eddie Villanueva</label><br/>
<input type="radio" value="Richard Gordon" id="pres6" name="Richard Gordon">
<label for="Richard Gordon">Richard Gordon</label><br/>
<input type="radio" value="Nicanor Perlas" id="pres7" name="Nicanor Perlas">
<label for="Nicanor Perlas">Nicanor Perlas</label><br/>
<input type="radio" value="John Carlos de los Reyes" id="pres9" name="John Carlos de los Reyes">
<label for="John Carlos de los Reyes">John Carlos de los Reyes</label><br/><br/><br/>

<h1><center>For Vice President</center></h1>

<input type="radio" value="Maunel Roxas" id="vicepres1" name="vicepres">
<label for="Maunel Roxas">Maunel Roxas</label><br/>
<input type="radio" value="Jejomar Binay" id="vicepres2" name="vicepres">
<label for "Jejomar Binay">Jejomar Binay</label><br/>
<input type="radio" value="Loren Legarda" id="vicepres3" name="vicepres">
<label for "Loren Legarda">Loren Legarda</label><br/>
<input type="radio" value="Bayani Fernando" id="vicepres4" name="vicepres">
<label for "Bayani Fernando">Bayani Fernando</label><br/>
<input type="radio" value="Edu Manzano" id="vicepres5" name="vicepres">
<label for "Edu Manzano">Edu Manzano</label><br/>
<input type="radio" value="Perfecto Yasay" id="vicepres6" name="vicepres">
<label for "Perfecto Yasay">Perfecto Yasay</label><br/>
<input type="radio" value="Jay Sonza" id="vicepres7" name="vicepres">
<label for "Jay Sonza">Jay Sonza</label><br/>

<h1><center>For Senator</center></h1>

<input type="checkbox" value="Bong Revilla Jr." id="senator1" name="senator">
<label for "Bong Revilla Jr.">Bong Revilla Jr.</label><br/>

<input type="checkbox" value="Jinggoy Estrada" id="senator2" name="senator">

<input type="checkbox" value="Miriam Defensor Santiago" id="senator3" name="senator">
<label for "Miriam Defensor Santiago">Miriam Defensor Santiago</label><br/>

<input type="checkbox" value="Franklin Drilon" id="senator4" name="senator">
<label for "Franklin Drilon">Franklin Drilon</label><br/>

<input type="checkbox" value="Juan Ponce Enrile" id="senator5" name="senator">
<label for "Juan Ponce Enrile">Juan Ponce Enrile</label><br/>

<input type="checkbox" value="Pia Cayetano" id="senator6" name="senator">
<label for "Pia Cayetano">Pia Cayetano</label><br/>

<input type="checkbox" value="Ferdinand Marcos Jr" id="senator7" name="senator">
<label for "Ferdinand Marcos Jr">Ferdinand Marcos Jr</label><br/>

<input type="checkbox" value="Ralph Recto" id="senator8" name="senator">
<label for "Ralph Recto">Ralph Recto</label><br/>

<input type="checkbox" value="Tito Sotto" id="senator9" name="senator">
<label for "Tito Sotto">Tito Sotto</label><br/>

<input type="checkbox" value="Sergio Osmeņa III" id="senator10" name="senator">
<label for "Sergio Osmeņa III">Sergio Osmeņa III</label><br/>

<input type="checkbox" value="Lito Lapid" id="senator11" name="senator">
<label for "Lito Lapid">Lito Lapid</label><br/>

<input type="checkbox" value="Teofisto Guingona III" id="senator12" name="senator">
<label for "Teofisto Guingona III">Teofisto Guingona III</label><br/>

<input type="checkbox" value="Risa Hontiveros-Baraquel" id="senator13" name="senator">
<label for "Risa Hontiveros-Baraquel">Risa Hontiveros-Baraquel</label><br/>

<input type="checkbox" value="Ruffy Biazon" id="senator14" name="senator">
<label for "Ruffy Biazon">Ruffy Biazon</label><br/>

<input type="checkbox" value="Joey de Venecia" id="senator15" name="senator">
<label for "Joey de Venecia">Joey de Venecia</label><br/>

<input type="checkbox" value="Gilbert Remulla" id="senator16" name="senator">
<label for "Gilbert Remulla">Gilbert Remulla</label><br/>

<input type="checkbox" value="Danilo Lim" id="senator17" name="senator">
<label for "Danilo Lim">Danilo Lim</label><br/>

<input type="checkbox" value="Sonia Rocco" id="senator18" name="senator">
<label for "Sonia Rocco">Sonia Rocco</label><br/>

<input type="checkbox" value="Satur Ocampo" id="senator19" name="senator">
<label for "Satur Ocampo">Satur Ocampo</label><br/>

<input type="checkbox" value="Wilfredo Kuan" id="senator20" name="senator">
<label for "Wilfredo Kuan">Wilfredo Kuan</label><br/>

</p>

<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

and my finaljs.js' code

function init()
{

var gender;
var pres;
var vicepres;
var senator;
if(male.checked)
{
gender = "male";
}
if(female.checked)
{
gender = "female";
}
if(pres1.checked)
{
pres = "Benigno Aquino Jr. III";
}

if(pres2.checked)
{
pres = "Manny Villar";
}
if(pres3.checked)
{
pres = "Gilbert Teodoro";
}
if(pres4.checked)
{
}
if(pres5.checked)
{
pres = "Eddie Villanueva";
}
if(pres6.checked)
{
pres = "Richard Gordon";
}
if(pres7.checked)
{
pres = "Nicanor Perlas";
}
if(pres8.checked)
{
}
if(pres9.checked)
{
pres = "John Carlos de los Reyes";
}
if(vicepres1.checked)
{
vicepres = "Maunel Roxas";
}
if(vicepres2.checked)
{
vicepres = "Jejomar Binay";
}
if(vicepres3.checked)
{
vicepres = "Loren Legarda";
}
if(vicepres4.checked)
{
vicepres = "Bayani Fernando";
}
if(vicepres5.checked)
{
vicepres = "Edu Manzano";
}
if(vicepres6.checked)
{
vicepres = "Perfecto Yasay";
}
if(vicepres7.checked)
{
vicepres = "Jay Sonza";
}
if(vicepres8.checked)
{
}
if(senator1.checked)
{
senator = "Bong Revilla Jr.";
}
if(senator2.checked)
{
}
if(senator3.checked)
{
senator = "Miriam Defensor Santiago";
}
if(senator4.checked)
{
senator = "Franklin Drilon";
}
if(senator5.checked)
{
senator = "Juan Ponce Enrile";
}
if(senator6.checked)
{
senator = "Pia Cayetano";
}
if(senator7.checked)
{
senator = "Ferdinand Marcos";
}
if(senator8.checked)
{
senator = "Ralph Recto";
}
if(senator9.checked)
{
senator = "Tito Sotto";
}
if(senator10.checked)
{
senator = "Sergio Osmeņa III";
}
if(senator11.checked)
{
senator = "Lito Lapit";
}
if(senator12.checked)
{
senator = "Teofisto Guingona III";
}
if(senator13.checked)
{
senator = "Risa Hontiveros-Baraquel";
}
if(senator14.checked)
{
senator = "Ruffy Biazon";
}
if(senator15.checked)
{
senator = "Joey de Venecia";
}
if(senator15.checked)
{
senator = "Gilbert Remulla";
}
if(senator16.checked)
{
senator = "Danilo Lim";
}
if(senator17.checked)
{
senator = "Sonia Rocco";
}
if(senator18.checked)
{
senator = "Ariel Querubin";
}
if(senator19.checked)
{
senator = "Liza Maza";
}
if(senator20.checked)
{
senator = "Wilfredo Kuan";
}
document.write(document.getElementById('fName').value+" "+document.getElementById('lName').value+"<br>");
document.write(gender+"<br />");
document.write("<h3>For President</h3>" + pres + "<br/>");
document.write("<h3>For Vice President</h3> " + vicepres + "<br/>");
document.write("<h3>For Senator</h3> " + senator + "<br/>");

}

Old Pedant
08-25-2011, 08:58 PM
Of course only one senator shows up. Your code only allows one, beause on each if you assign *ONE VALUE* to the variable senator.

You need to *ADD* each checked name to that variable.

Example, senator += ", Liza Maza";

But that's a really clumsy way to do it.

**********

You HTML for labels is all wrong.

<input type="checkbox" value="Wilfredo Kuan" id="senator20" name="senator">
<label for "Wilfredo Kuan">Wilfredo Kuan</label><br/>

The "for" of a label is suppose to refer to an *ID*, not to a value.

So you could write

<input type="checkbox" value="Wilfredo Kuan" id="senator20" name="senator">
<label for="senator20">Wilfredo Kuan</label><br/>

But an easier way that works just as well is this:

<label>
<input type="checkbox" value="Wilfredo Kuan" id="senator20" name="senator">
Wilfredo Kuan
</label><br/>

And then, if you'd look at some of the code we suggested for collecting multiple checkbox values, you could get rid of the ID in all those checkboxes.

junchronick
08-26-2011, 01:47 PM
I appreciate your great help. but I already figured out that + thingy lol but i came up to another problem AGAIN. the problem is I don't know how to combine my 3 scripts.
My 3 Scripts are:
1.the script that won't allow you to choose more than 12 checkboxes for senators.
2.the script that won't allow you to choose more than 6 checkboxes for councilors.
3.the script that when i press the submit button, the checked checkboxes and radiobutton will appear.

here's my code for my 1st and 2nd script:

<html>

<script type="text/javascript">

var checkCount=0

var maxChecks=12

function setChecks(obj){

if(obj.checked){
checkCount=checkCount+1
}else{
checkCount=checkCount-1
}

if (checkCount>maxChecks){
obj.checked=false
checkCount=checkCount-1
alert('You can only vote '+maxChecks+' candidates for Senators')
}
}

</script>

<script type="text/javascript">

function countChoices(obj) {
max = 6;

box1 = obj.form.box1.checked;
box2 = obj.form.box2.checked;
box3 = obj.form.box3.checked;
box4 = obj.form.box4.checked;
box5 = obj.form.box5.checked;
box6 = obj.form.box6.checked;
box7 = obj.form.box7.checked;
box8 = obj.form.box8.checked;
box9 = obj.form.box9.checked;
box10 = obj.form.box10.checked;
count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0) + (box4 ? 1 : 0) + (box5 ? 1 : 0)+ (box6 ? 1 : 0)
+ (box7 ? 1 : 0) + (box8 ? 1 : 0) + (box9 ? 1 : 0) + (box10 ? 1 : 0);

if (count > max) {
alert("You can only vote 6 Councilors");
obj.checked = false;
}
}

</script>

<center><img src="comelec.jpg"></center>
<body>
<form name='sample' method=post
Action='mailto:abc@xxx.com'>
<h2 align="middle">Personal Information</h2><br/>
<b>Precint No.:&nbsp;<input type=text name='precintno' size=20>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<b>Pooling Station:&nbsp;<input type=text name='poolingstation' size=20><br/><br/>

<b>Last Name:&nbsp;<input type=text name='lastname' size=20>&nbsp;&nbsp;

<b>First Name:&nbsp;<input type=text name='firstname' size=20>&nbsp;&nbsp;

<b>Middle Name:&nbsp;<input type=text name='middlename' size=20><br/><br/>

<b>Date of Birth:&nbsp;<select><option value="-1">Month</option><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select>&nbsp;&nbsp;<select>
<option>Day</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><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>&nbsp;&nbsp;
<select><option>Year</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option><option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option><option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option><option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option><option value="1917">1917</option><option value="1916">1916</option><option value="1915">1915</option><option value="1914">1914</option><option value="1913">1913</option><option value="1912">1912</option><option value="1911">1911</option><option value="1910">1910</option><option value="1909">1909</option><option value="1908">1908</option><option value="1907">1907</option><option value="1906">1906</option><option value="1905">1905</option></select><br/><br/>

<h2 align="middle">Candidates</h2>
<h3 align="middle">President</h3>
<input type=radio name='president'>Benigno Aquino Jr. III<br/>
<input type=radio name='president'>John Carlos de los Reyes<br/><br/><br/>
<h3 align="middle">Vice President</h3>
<h3 align="middle">Senators</h3>

<body>
<form>
<input type="checkbox" id="check1" onclick="setChecks(this)">Bong Revilla Jr.<br/>
<input type="checkbox" id="check3" onclick="setChecks(this)">Miriam Defensor Santiago<br/>
<input type="checkbox" id="check4" onclick="setChecks(this)">Franklin Drilon<br/>
<input type="checkbox" id="check5" onclick="setChecks(this)">Juan Ponce Enrile <br/>
<input type="checkbox" id="check7" onclick="setChecks(this)">Pia Cayetano<br/>
<input type="checkbox" id="check8" onclick="setChecks(this)">Ferdinand Marcos Jr<br/>
<input type="checkbox" id="check9" onclick="setChecks(this)">Ralph Recto<br/>
<input type="checkbox" id="check10" onclick="setChecks(this)">Tito Sotto<br/>
<input type="checkbox" id="check11" onclick="setChecks(this)">Sergio Osmeņa III<br/>
<input type="checkbox" id="check12" onclick="setChecks(this)">Lito Lapid<br/>
<input type="checkbox" id="check13" onclick="setChecks(this)">Teofisto Guingona III<br/>

<input type="checkbox" id="check14" onclick="setChecks(this)">Risa Hontiveros-Baraquel<br/>
<input type="checkbox" id="check15" onclick="setChecks(this)">Ruffy Biazon<br/>
<input type="checkbox" id="check16" onclick="setChecks(this)">Joey de Venecia<br/>
<input type="checkbox" id="check17" onclick="setChecks(this)">Gilbert Remulla<br/>
<input type="checkbox" id="check18" onclick="setChecks(this)">Danilo Lim<br/>
<input type="checkbox" id="check19" onclick="setChecks(this)">Sonia Rocco<br/>
<input type="checkbox" id="check20" onclick="setChecks(this)">Ariel Querubin<br>
<input type="checkbox" id="check21" onclick="setChecks(this)">Liza Maza<br/>
<input type="checkbox" id="check22" onclick="setChecks(this)">Satur Ocampo<br/>
<input type="checkbox" id="check23" onclick="setChecks(this)">Gwendolyn Pimentel<br/>
<input type="checkbox" id="check24" onclick="setChecks(this)">Wilfredo Kuan

</form>
<h3 align="middle">Congressman</h3>

<h3 align="middle">Mayor</h3>

<h3 align="middle">Vice Mayor</h3>

<h3 align="middle">Councilor</h3>
Note:Vote Only 6 Councilors otherwise your vote will not be counted<br/><br/>

<input type=checkbox name=box1 onClick="countChoices(this)">Edgardo Bilog Jr<br/>
<input type=checkbox name=box2 onClick="countChoices(this)">Richard Carino<br/>
<input type=checkbox name=box3 onClick="countChoices(this)">Perlita Rondez<br/>
<input type=checkbox name=box4 onClick="countChoices(this)">Fred Bagbagen<br/>
<input type=checkbox name=box5 onClick="countChoices(this)">Philian Weygan<br/>
<input type=checkbox name=box6 onClick="countChoices(this)">Nicasio Palaganas<br/>
<input type=checkbox name=box7 onClick="countChoices(this)">Odell Aquino<br/>
<input type=checkbox name=box8 onClick="countChoices(this)">Anthony Araos<br/>
<input type=checkbox name=box9 onClick="countChoices(this)">Antonio Cortes Jr.<br/>
<input type=checkbox name=box10 onClick="countChoices(this)">Robin Coteng<br/>

</form>
<input type=RESET value="Reset and Vote Again">
<hr><br/>
</body>
</form>
</html>

junchronick
08-26-2011, 01:55 PM
my 3rd script:

<html>

<script type="text/javascript" src="finaljs.js"></script>
<center><img src="comelec.jpg"></center>

<body onsubmit="init()">

<div id="input">
<form action="#">
<p>
<label for="fName">Enter Firstname:</label>
<input type="text" id="fName">
<label for="lName">Enter Lastname:</label>
<input type="text" id="lName">
</p>

<p>
Gender:

<label for="male">Male</label>
<label for="female">Female</label>
</p>

<p>
<h1><center>For President:</center></h1>

<input type="radio" value="Benigno Aquino Jr. III" id="pres1" name="pres">
<label for="Benigno Aquino Jr. III">Benigno Aquino Jr. III</label><br/>
<input type="radio" value="Manny Villar" id="pres2" name="pres">
<label for="Manny Villar">Manny Villar</label><br/>
<input type="radio" value="Gilbert Teodoro" id="pres3" name="pres">
<label for="Gilbert Teodoro">Gilbert Teodoro</label><br/>
<input type="radio" value="Eddie Villanueva" id="pres5" name="pres">
<label for="Eddie Villanueva">Eddie Villanueva</label><br/>
<input type="radio" value="Richard Gordon" id="pres6" name="Richard Gordon">
<label for="Richard Gordon">Richard Gordon</label><br/>
<input type="radio" value="Nicanor Perlas" id="pres7" name="Nicanor Perlas">
<label for="Nicanor Perlas">Nicanor Perlas</label><br/>
<input type="radio" value="John Carlos de los Reyes" id="pres9" name="John Carlos de los Reyes">
<label for="John Carlos de los Reyes">John Carlos de los Reyes</label><br/><br/><br/>

<h1><center>For Vice President</center></h1>

<input type="radio" value="Maunel Roxas" id="vicepres1" name="vicepres">
<label for="Maunel Roxas">Maunel Roxas</label><br/>
<input type="radio" value="Jejomar Binay" id="vicepres2" name="vicepres">
<label for "Jejomar Binay">Jejomar Binay</label><br/>
<input type="radio" value="Loren Legarda" id="vicepres3" name="vicepres">
<label for "Loren Legarda">Loren Legarda</label><br/>
<input type="radio" value="Bayani Fernando" id="vicepres4" name="vicepres">
<label for "Bayani Fernando">Bayani Fernando</label><br/>
<input type="radio" value="Edu Manzano" id="vicepres5" name="vicepres">
<label for "Edu Manzano">Edu Manzano</label><br/>
<input type="radio" value="Perfecto Yasay" id="vicepres6" name="vicepres">
<label for "Perfecto Yasay">Perfecto Yasay</label><br/>
<input type="radio" value="Jay Sonza" id="vicepres7" name="vicepres">
<label for "Jay Sonza">Jay Sonza</label><br/>

<h1><center>For Senator</center></h1>

<input type="checkbox" value="Bong Revilla Jr." id="senator1" name="senator">
<label for "Bong Revilla Jr.">Bong Revilla Jr.</label><br/>

<input type="checkbox" value="Jinggoy Estrada" id="senator2" name="senator">

<input type="checkbox" value="Miriam Defensor Santiago" id="senator3" name="senator">
<label for "Miriam Defensor Santiago">Miriam Defensor Santiago</label><br/>

<input type="checkbox" value="Franklin Drilon" id="senator4" name="senator">
<label for "Franklin Drilon">Franklin Drilon</label><br/>

<input type="checkbox" value="Juan Ponce Enrile" id="senator5" name="senator">
<label for "Juan Ponce Enrile">Juan Ponce Enrile</label><br/>

<input type="checkbox" value="Pia Cayetano" id="senator6" name="senator">
<label for "Pia Cayetano">Pia Cayetano</label><br/>

<input type="checkbox" value="Ferdinand Marcos Jr" id="senator7" name="senator">
<label for "Ferdinand Marcos Jr">Ferdinand Marcos Jr</label><br/>

<input type="checkbox" value="Ralph Recto" id="senator8" name="senator">
<label for "Ralph Recto">Ralph Recto</label><br/>

<input type="checkbox" value="Tito Sotto" id="senator9" name="senator">
<label for "Tito Sotto">Tito Sotto</label><br/>

<input type="checkbox" value="Sergio Osmeņa III" id="senator10" name="senator">
<label for "Sergio Osmeņa III">Sergio Osmeņa III</label><br/>

<input type="checkbox" value="Lito Lapid" id="senator11" name="senator">
<label for "Lito Lapid">Lito Lapid</label><br/>

<input type="checkbox" value="Teofisto Guingona III" id="senator12" name="senator">
<label for "Teofisto Guingona III">Teofisto Guingona III</label><br/>

<input type="checkbox" value="Risa Hontiveros-Baraquel" id="senator13" name="senator">
<label for "Risa Hontiveros-Baraquel">Risa Hontiveros-Baraquel</label><br/>

<input type="checkbox" value="Ruffy Biazon" id="senator14" name="senator">
<label for "Ruffy Biazon">Ruffy Biazon</label><br/>

<input type="checkbox" value="Joey de Venecia" id="senator15" name="senator">
<label for "Joey de Venecia">Joey de Venecia</label><br/>

<input type="checkbox" value="Gilbert Remulla" id="senator16" name="senator">
<label for "Gilbert Remulla">Gilbert Remulla</label><br/>

<input type="checkbox" value="Danilo Lim" id="senator17" name="senator">
<label for "Danilo Lim">Danilo Lim</label><br/>

<input type="checkbox" value="Sonia Rocco" id="senator18" name="senator">
<label for "Sonia Rocco">Sonia Rocco</label><br/>

<input type="checkbox" value="Satur Ocampo" id="senator19" name="senator">
<label for "Satur Ocampo">Satur Ocampo</label><br/>

<input type="checkbox" value="Wilfredo Kuan" id="senator20" name="senator">
<label for "Wilfredo Kuan">Wilfredo Kuan</label><br/>

</p>

<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

and my finaljs.js' codes

function init()
{

var gender;
var pres;
var vicepres;
var senator;
if(male.checked)
{
gender = "male";
}
if(female.checked)
{
gender = "female";
}
if(pres1.checked)
{
pres = "Benigno Aquino Jr. III";
}

if(pres2.checked)
{
pres = "Manny Villar";
}
if(pres3.checked)
{
pres = "Gilbert Teodoro";
}
if(pres4.checked)
{
}
if(pres5.checked)
{
pres = "Eddie Villanueva";
}
if(pres6.checked)
{
pres = "Richard Gordon";
}
if(pres7.checked)
{
pres = "Nicanor Perlas";
}
if(pres8.checked)
{
}
if(pres9.checked)
{
pres = "John Carlos de los Reyes";
}
if(vicepres1.checked)
{
vicepres = "Maunel Roxas";
}
if(vicepres2.checked)
{
vicepres = "Jejomar Binay";
}
if(vicepres3.checked)
{
vicepres = "Loren Legarda";
}
if(vicepres4.checked)
{
vicepres = "Bayani Fernando";
}
if(vicepres5.checked)
{
vicepres = "Edu Manzano";
}
if(vicepres6.checked)
{
vicepres = "Perfecto Yasay";
}
if(vicepres7.checked)
{
vicepres = "Jay Sonza";
}
if(vicepres8.checked)
{
}
if(senator1.checked)
{
senator = "Bong Revilla Jr.";
}
if(senator2.checked)
{
}
if(senator3.checked)
{
senator += "<br/>Miriam Defensor Santiago";
}
if(senator4.checked)
{
senator += "<br/>Franklin Drilon";
}
if(senator5.checked)
{
senator += "<br/>Juan Ponce Enrile";
}
if(senator6.checked)
{
senator += "<br/>Pia Cayetano";
}
if(senator7.checked)
{
senator += "<br/>Ferdinand Marcos";
}
if(senator8.checked)
{
senator += "<br/>Ralph Recto";
}
if(senator9.checked)
{
senator += "<br/>Tito Sotto";
}
if(senator10.checked)
{
senator += "<br/>Sergio Osmeņa III";
}
if(senator11.checked)
{
senator += "<br/>Lito Lapit";
}
if(senator12.checked)
{
senator += "<br/>Teofisto Guingona III";
}
if(senator13.checked)
{
senator += "<br/>Risa Hontiveros-Baraquel";
}
if(senator14.checked)
{
senator += "<br/>Ruffy Biazon";
}
if(senator15.checked)
{
senator += "<br/>Joey de Venecia";
}
if(senator15.checked)
{
senator += "<br/>Gilbert Remulla";
}
if(senator16.checked)
{
senator += "<br/>Danilo Lim";
}
if(senator17.checked)
{
senator += "<br/>Sonia Rocco";
}
if(senator18.checked)
{
senator += "<br/>Ariel Querubin";
}
if(senator19.checked)
{
senator += "<br/>Liza Maza";
}
if(senator20.checked)
{
senator += "<br/>Wilfredo Kuan";
}
document.write(document.getElementById('fName').value+" "+document.getElementById('lName').value+"<br>");
document.write(gender+"<br />");
document.write("<h3>For President</h3>" + pres + "<br/>");
document.write("<h3>For Vice President</h3> " + vicepres + "<br/>");
document.write("<h3>For Senator</h3> " + senator + "<br/>");

}

Old Pedant
08-26-2011, 10:12 PM
You didn't read half of what I wrote. Your <label>s are invalid HTML. You aren't putting value= into all your radio buttons. And and and.

I would start over, were I you. Until you get the HTML right, you can't really do a good job on the JavaScript.

Old Pedant
08-26-2011, 11:10 PM
Here. I'll regret this later, but for now...

I've done it all except vice president. Just copy the concept of the code for president and you'll be there.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Elections 2011</title>
<style type="text/css">
div#Results { display: none; }
div#Results span { font-weight: bold; color: blue; }
</style>
<script type="text/javascript">
{
for ( var r = 0; r < rbs.length; ++r )
{
if ( rbs[r].checked ) return rbs[r].value;
}
return null;
}

function processForm(form)
{
var firstName = form.fName.value;
var lastName = form.lName.value;
if ( firstName.length < 2 || lastName.length < 2 )
{
return false;
}
if ( Gender == null )
{
return false;
}
if ( Pres == null )
{
alert("You must choose a candidate for president");
return false;
}
var cbs = form.senator;
var senators = [ ];
for ( var c = 0; c < cbs.length; ++c )
{
if ( cbs[c].checked ) senators.push( cbs[c].value );
}
if ( senators.length > 12 )
{
alert("You may not vote for more than 12 senators");
return false;
}
// so all is okay...show results:
document.getElementById("Input").style.display = "none";
document.getElementById("resultName").innerHTML = firstName + " " + lastName;
document.getElementById("resultGender").innerHTML = Gender;
document.getElementById("resultPresident").innerHTML = Pres;
document.getElementById("resultSenators").innerHTML =
senators.length == 0 ? "[no votes]"
: ("<ul><li>" + senators.join("</li><li>") + "</li></ul>" );
document.getElementById("Results").style.display = "block";
return false;
}
</script>
<body>
<div id="Input">
<form action="#" onsubmit="return processForm(this);">
<label>Enter Firstname:&nbsp;<input type="text" name="fName" /></label>
<label>Enter Lastname:&nbsp;<input type="text" name="lName" /></label>
<br /><br />
Gender:&nbsp;
<center><h3>For President:</h3></center><br />
<label><input type="radio" value="Benigno Aquino Jr. III" name="pres">Benigno Aquino Jr. III</label><br/>
<label><input type="radio" value="Manny Villar" name="pres">Manny Villar</label><br/>
<label><input type="radio" value="Gilbert Teodoro" name="pres">Gilbert Teodoro</label><br/>
<label><input type="radio" value="Eddie Villanueva" name="pres">Eddie Villanueva</label><br/>
<label><input type="radio" value="Richard Gordon" name="pres">Richard Gordon</label><br/>
<label><input type="radio" value="Nicanor Perlas" name="pres">Nicanor Perlas</label><br/>
<label><input type="radio" value="John Carlos de los Reyes" name="pres">John Carlos de los Reyes</label>
<center><h3>For Senator</h3></center><br />
<label><input type="checkbox" value="Bong Revilla Jr." name="senator">Bong Revilla Jr.</label><br/>
<label><input type="checkbox" value="Miriam Defensor Santiago" name="senator">Miriam Defensor Santiago</label><br/>
<label><input type="checkbox" value="Franklin Drilon" name="senator">Franklin Drilon</label><br/>
<label><input type="checkbox" value="Juan Ponce Enrile" name="senator">Juan Ponce Enrile</label><br/>
<label><input type="checkbox" value="Pia Cayetano" name="senator">Pia Cayetano</label><br/>
<label><input type="checkbox" value="Ferdinand Marcos Jr" name="senator">Ferdinand Marcos Jr</label><br/>
<label><input type="checkbox" value="Ralph Recto" name="senator">Ralph Recto</label><br/>
<label><input type="checkbox" value="Tito Sotto" name="senator">Tito Sotto</label><br/>
<label><input type="checkbox" value="Sergio Osmeņa III" name="senator">Sergio Osmeņa III</label><br/>
<label><input type="checkbox" value="Lito Lapid" name="senator">Lito Lapid</label><br/>
<label><input type="checkbox" value="Teofisto Guingona III" name="senator">Teofisto Guingona III</label><br/>
<label><input type="checkbox" value="Risa Hontiveros-Baraquel" name="senator">Risa Hontiveros-Baraquel</label><br/>
<label><input type="checkbox" value="Ruffy Biazon" name="senator">Ruffy Biazon</label><br/>
<label><input type="checkbox" value="Joey de Venecia" name="senator">Joey de Venecia</label><br/>
<label><input type="checkbox" value="Gilbert Remulla" name="senator">Gilbert Remulla</label><br/>
<label><input type="checkbox" value="Danilo Lim" name="senator">Danilo Lim</label><br/>
<label><input type="checkbox" value="Sonia Rocco" name="senator">Sonia Rocco</label><br/>
<label><input type="checkbox" value="Satur Ocampo" name="senator">Satur Ocampo</label><br/>
<label><input type="checkbox" value="Wilfredo Kuan" name="senator">Wilfredo Kuan</label><br/>
<br /><br />
<input type="submit" value="Submit">
</form>
</div>
<div id="Results">
Your name is <span id="resultName"></span><br />
Your gender is <span id="resultGender"></span><br />
Your vote for president: <span id="resultPresident"></span><br />
</div>
</body>
</html>

jmrker
08-27-2011, 01:46 AM
Here. I'll regret this later, but for now...

I've done it all except vice president. Just copy the concept of the code for president and you'll be there.

Regrets? ... Probably me as well. :o

I always find I make more typing errors when I have to duplicate data.
This modification makes it easier to enter a change of the candidates slate
as well as make the program re-usable in a subsequent election year.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Elections 2011</title>
<style type="text/css">
div#Results { display: none; }
div#Results span { font-weight: bold; color: blue; }
</style>
<script type="text/javascript">
for ( var r = 0; r < rbs.length; ++r ) {
if ( rbs[r].checked ) return rbs[r].value;
}
return null;
}

function processForm(form) {
var firstName = form.fName.value;
var lastName = form.lName.value;
if ( firstName.length < 2 || lastName.length < 2 ) {
return false;
}
if ( Gender == null ) {
return false;
}
if ( Pres == null ) {
alert("You must choose a candidate for president");
return false;
}
var cbs = form.senator;
var senators = [ ];
for ( var c = 0; c < cbs.length; ++c ) {
if ( cbs[c].checked ) senators.push( cbs[c].value );
}
if ( senators.length > 12 ) {
alert("You may not vote for more than 12 senators");
return false;
}

// so all is okay...show results:
document.getElementById("Input").style.display = "none";
document.getElementById("resultName").innerHTML = firstName + " " + lastName;
document.getElementById("resultGender").innerHTML = Gender;
document.getElementById("resultPresident").innerHTML = Pres;
document.getElementById("resultSenators").innerHTML =
senators.length == 0 ? "[no votes]"
: ("<ul><li>" + senators.join("</li><li>") + "</li></ul>" );
document.getElementById("Results").style.display = "block";
return false;
}
var President_Candidates = [
"Benigno Aquino Jr. III",
"Manny Villar",
"Gilbert Teodoro",
"Eddie Villanueva",
"Richard Gordon",
"Nicanor Perlas",
"John Carlos de los Reyes" // Note: No comma after last entry
];
var Vice_President_Candidates = [
"Bong Revilla Jr.",
"Franklin Drilon",
"Juan Ponce Enrile",
"Pia Cayetano",
"Ferdinand Marcos Jr",
"Ralph Recto",
"Tito Sotto",
"Sergio Osmeņa III",
"Lito Lapid",
"Teofisto Guingona III",
"Risa Hontiveros-Baraquel",
"Ruffy Biazon",
"Joey de Venecia",
"Gilbert Remulla",
"Danilo Lim",
"Sonia Rocco",
"Satur Ocampo",
"Wilfredo Kuan" // Note: No comma after last entry
];

</script>
<body>
<div id="Input">
<form action="#" onsubmit="return processForm(this);">
<label>Enter Firstname:&nbsp;<input type="text" name="fName" /></label>
<label>Enter Lastname:&nbsp;<input type="text" name="lName" /></label>
<br /><br />
Gender:&nbsp;

<center><h3>For President:</h3></center><br />
<script type="text/javascript">
var str = '';
for (var i=0; i<President_Candidates.length; i++) {
str += President_Candidates[i]+'" name="pres">';
str += President_Candidates[i]+'</label><br/>';
}
document.write(str);
</script>

<center><h3>For Senator</h3></center><br />
<script type="text/javascript">
var str = '';
for (var i=0; i<Vice_President_Candidates.length; i++) {
str += '<label><input type="checkbox" value="';
str += Vice_President_Candidates[i]+'" name="senator">';
str += Vice_President_Candidates[i]+'</label><br/>';
}
document.write(str);
</script>

<br /><br />
<input type="submit" value="Submit">
</form>
</div>
<div id="Results">
Your name is <span id="resultName"></span><br />
Your gender is <span id="resultGender"></span><br />
Your vote for president: <span id="resultPresident"></span><br />
</div>
</body>
</html>

Old Pedant
08-27-2011, 03:24 AM
Yeah, I thought of doing that. But this is *supposed* to be for a first-year javascript class. I thought maybe even using Array.join the way I did was maybe too sophisticated. Though I think the way of doing the radio buttons and collecting multiple checkbox answers is reasonably basic.

junchronick
08-28-2011, 05:28 AM
I'm having problems with my Vice President. I added these codes:

}
if ( Vicepres == 2 )
{
alert("You can only vote 1 Vice President");
return false;
}

document.getElementById("resultVicePresident").innerHTML = Vicepres;

<label><input type="radio" value="Manuel Roxas" name="vicepres">Manuel Roxas</label><br/>

Your vote for vice president: <span id="resultVicePresident"></span><br/>

But it doesnt show me my vote for vice president :(

Old Pedant
08-28-2011, 06:52 AM
If you are using my code, then your test is all wrong.

*READ* the code that tests for *PRESIDENT*.

COPY IT.

Do you see it testing for a value of 2??? I sure don't.

Oh...and the code for getRadioValue only works if you have TWO OR MORE radio buttons of the same name. You show only one there; if that's really what you have, then need a new version of getRadioValue.

junchronick
08-28-2011, 07:08 AM
why when I click submit my votes for councilor is showin in senator's section?

Old Pedant
08-28-2011, 07:10 AM
Okay, I see in your post #13 that indeed there is only one candidate for vice president.

One obvious thing to do would be to use a checkbox for him, instead.

But what the heck...rewrite of getRadioValue:

if ( rbs.length == null ) rbs = [ rbs ]; // convert the single radio button to an array of 1 element
for ( var r = 0; r < rbs.length; ++r ) {
if ( rbs[r].checked ) return rbs[r].value;
}
return null;
}

Or you could do:

if ( rbs.length == null ) return rbs.checked ? rbs.value : null;
for ( var r = 0; r < rbs.length; ++r ) {
if ( rbs[r].checked ) return rbs[r].value;
}
return null;
}

But you still never check for 2 as the result. Where did you get that?

junchronick
08-28-2011, 07:13 AM
If you are using my code, then your test is all wrong.

*READ* the code that tests for *PRESIDENT*.

COPY IT.

Do you see it testing for a value of 2??? I sure don't.

Oh...and the code for getRadioValue only works if you have TWO OR MORE radio buttons of the same name. You show only one there; if that's really what you have, then need a new version of getRadioValue.

can u give me the perfect code for my councilors pls?

Old Pedant
08-28-2011, 07:36 AM
Same code as for senators.

Checkboxes. All with the same name.

Clone the code that gets all the checked senators and tests for a valid count.

This is *HOMEWORK*, right? We (I) have already done 10 times more work writing your homework than we should. Strictly speaking, I'm in violation of the forum rules for doing this much. See rule 1.5 in http://www.codingforum.com/rules.htm

junchronick
08-28-2011, 12:15 PM
Same code as for senators.

Checkboxes. All with the same name.

Clone the code that gets all the checked senators and tests for a valid count.

This is *HOMEWORK*, right? We (I) have already done 10 times more work writing your homework than we should. Strictly speaking, I'm in violation of the forum rules for doing this much. See rule 1.5 in http://www.codingforum.com/rules.htm

I'm so sorry, thanks to all of you who helped me with it. I'm already done with it and I really appreciate your helps. Thanks again!