Announcement

**Logic Ali** · Aug 24, 2011, 07:33 AM

all of the checked checkboxes will appear together with the Candidate's name

I don't understand this sentence. Appear where and under what circumstances?

**webdev1958** · Aug 24, 2011, 07:38 AM

Originally posted by Logic Ali View Post

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

**junchronick** · Aug 24, 2011, 06:17 PM

Originally posted by webdev1958 View Post

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

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

**Old Pedant** · Aug 24, 2011, 07:05 PM

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** · Aug 24, 2011, 07:17 PM

Originally posted by junchronick View Post

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** · Aug 24, 2011, 08:14 PM

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** · Aug 24, 2011, 08:16 PM

Originally posted by junchronick View Post

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() 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.

Originally posted by Old Pedant View Post

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.

**Old Pedant** · Aug 24, 2011, 09:12 PM

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:

Code:

<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="Jinggoy Estrada">Jinggoy Estrada<br/>
...
<input type="checkbox" name="senator" onclick="countSenators(this.form)" value="Wilfredo Kuan">Wilfredo Kuan
<br/><br/>
You voted for these senators:
<div id="senateVotes"></div>

And then:

Code:

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 = [];
    }
    document.getElementById("senateVotes").innerHTML = senators.join("<br/>");
}

I think that works. No?

**webdev1958** · Aug 24, 2011, 09:28 PM

Originally posted by Old Pedant View Post

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?

**Old Pedant** · Aug 24, 2011, 09:40 PM

Your post did make it occur to me that you *could* pull a cute trick:

Code:

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

And then you could do

Code:

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

Presto.

**Old Pedant** · Aug 24, 2011, 09:41 PM

Originally posted by webdev1958 View Post

don't they say women are better at multi-tasking?

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

**junchronick** · Aug 25, 2011, 06:40 AM

waaa I'm really dizzy now, I'm new on Javascript coding, I tried this code it worked

Code:

<html>
<head>


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

</head>
<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:
					
					<input type="radio" value="Male" id="male" name="chose">
						<label for="male">Male</label>
					<input type="radio" value="Female" id="female" name="chose">
						<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="Joseph Estrada" id="pres4" name="pres">
						<label for="Joseph Estrada">Joseph Estrada</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="Jamby Madrigal" id="pres8" name="Jamby Madrigal">
						<label for="Jamby Madrigal">Jamby Madrigal</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

Code:

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)
	{
		pres = "Joseph Estrada";
	}
	if(pres5.checked)
	{
		pres = "Eddie Villanueva";
	}
	if(pres6.checked)
	{
		pres = "Richard Gordon";
	}
	if(pres7.checked)
	{
		pres = "Nicanor Perlas";
	}
	if(pres8.checked)
	{
		pres = "Jamby Madrigal";
	}
	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** · Aug 25, 2011, 08:59 AM

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

Code:

<html>
<head>


<script type="text/javascript" src="finaljs.js"></script>
</head>
<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:

					<input type="radio" value="Male" id="male" name="chose">
						<label for="male">Male</label>
					<input type="radio" value="Female" id="female" name="chose">
						<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="Joseph Estrada" id="pres4" name="pres">
						<label for="Joseph Estrada">Joseph Estrada</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="Jamby Madrigal" id="pres8" name="Jamby Madrigal">
						<label for="Jamby Madrigal">Jamby Madrigal</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/>
					<input type="radio" value="Dominador Chipeco Jr." id="vicepres8" name="vicepres">
						<label for "Dominador Chipeco Jr.">Dominador Chipeco Jr.</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">
						<label for "Jinggoy Estrada">Jinggoy Estrada</label><br/>
						
					<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

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)
	{
		pres = "Joseph Estrada";
	}
	if(pres5.checked)
	{
		pres = "Eddie Villanueva";
	}
	if(pres6.checked)
	{
		pres = "Richard Gordon";
	}
	if(pres7.checked)
	{
		pres = "Nicanor Perlas";
	}
	if(pres8.checked)
	{
		pres = "Jamby Madrigal";
	}
	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)
	{
		vicepres = "Dominador Chipeco Jr.";
	}
	if(senator1.checked)
	{
		senator = "Bong Revilla Jr.";
	}
	if(senator2.checked)
	{
		senator = "Jinggoy Estrada";
	}
	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** · Aug 25, 2011, 02: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.

Code:

<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

Code:

<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:

Code:

<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.

Announcement

Checkbox Problem

Checkbox Problem

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment