Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Checkbox Problem

    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:

    Code:
    <html>
    <head>
    
    <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>
    
    </head>
    <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/>
    
    <b>Gender&nbsp;<input type=radio name='sex'>Male&nbsp;&nbsp;<input type=radio name='sex'>Female<br/><br/>
    
    <b>Address&nbsp;<input type=text name='address' size=80><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'>Manny Villar<br/>
    <input type=radio name='president'>Gilbert Teodoro<br/>
    
    <input type=radio name='president'>Joseph Estrada<br/>
    <input type=radio name='president'>Eddie Villanueva<br/>
    <input type=radio name='president'>Richard Gordon<br/>
    <input type=radio name='president'>Nicanor Perlas<br/>
    <input type=radio name='president'>Jamby Madrigal<br/>
    <input type=radio name='president'>John Carlos de los Reyes<br/><br/><br/>
    <h3 align="middle">Vice President</h3>
    <input type=radio name='vice president'>Maunel Roxas<br/>
    <input type=radio name='vice president'>Jejomar Binay<br/>
    
    <input type=radio name='vice president'>Loren Legarda<br/>
    <input type=radio name='vice president'>Bayani Fernando<br/>
    <input type=radio name='vice president'>Edu Manzano<br/>
    <input type=radio name='vice president'>Perfecto Yasay<br/>
    <input type=radio name='vice president'>Jay Sonza<br/>
    <input type=radio name='vice president'>Dominador Chipeco Jr.<br/>
    <h3 align="middle">Senators</h3>
    
    
    
    
    <body>
    <form>
    <input type="checkbox" id="check1" onclick="setChecks(this)">Bong Revilla Jr.<br/>
    <input type="checkbox" id="check2" onclick="setChecks(this)">Jinggoy Estrada<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>
    
    <input type=radio name='congressman'>Bernardo Vergara<br/>
    <input type=radio name='congressman'>Rocky Thomas Balisong<br/>
    <input type=radio name='congressman'>Leonardo Yangot Jr.<br/>
    <input type=radio name='congressman'>Edgar Avila<br/>
    <input type=radio name='congressman'>Reinaldo Bautista Jr.<br/>
    <input type=radio name='congressman'>Braulio Yaranon<br/>
    <input type=radio name='congressman'>Rabindranath Quilala<br/>
    <input type=radio name='congressman'>Dwight Bello<br/>
    <input type=radio name='congressman'>Felipe Ramos<br/>
    
    <h3 align="middle">Mayor</h3>
    <input type=radio name='mayor'>Ruben Liwanag Barcelo<br/>
    <input type=radio name='mayor'>Erlinda Adan Lazo<br/>
    <input type=radio name='mayor'>Maurico Domogan<br/>
    <input type=radio name='mayor'>Maquez Go<br/>
    <input type=radio name='mayor'>Guillermo Hernandez<br/>
    
    <h3 align="middle">Vice Mayor</h3>
    <input type=radio name='vice mayor'>Carol Domalsin<br/>
    
    <input type=radio name='vice mayor'>Danilo Farinas<br/>
    <input type=radio name='vice mayor'>Faustino Olowan<br/>
    
    <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=submit value="Submit Your Votes!">
    <input type=RESET value="Reset and Vote Again">
    <hr><br/>
    Copyright 2011:Wilfredo Kuan 
    </body> 
    </form>
    </html>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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?

  • #3
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote 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

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote 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.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote 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.

    Quote 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.
    Last edited by webdev1958; 08-25-2011 at 02:25 AM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote 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?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    Quote Originally Posted by webdev1958 View Post
    don't they say women are better at multi-tasking?
    Shhh...you aren't supposed to admit that!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Aug 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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".

  • #14
    New Coder
    Join Date
    Aug 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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/>");
    	
    
    }

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •