Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Thanked 0 Times in 0 Posts

    Question Display Checkbox Values on Alert


    So, I am in a Web Development class right now for my liberal arts science credit. We are on a lab dealing with JavaScript and half of it is making the values of some check boxes and stuff show up when the user clicks a "Display" button. I'm not sure I'm explaining it well. Here's the lab:

    # In lab 6 you wrote a JavaScript function that displayed the name and email entered from the form. Extend that function to display all of the information the user entered in the form (name, e-mail, region, special interests, interest level, and comments). See if you can nicely format what shows in the alert message. The following hints should help:
       1. The first step is to make sure that each GUI field has an id attribute set. For example the name field might have id="name". Remember, every id value must be unique. Two radio buttons will have the same name attribute value, but their id attributes must be unique.  You need to do this so JavaScript can find the tags using the document.getElementById method.
       2. To display your checkbox information, you will need to include logic as described in the following steps. Once you do this, do the same thing for the radio buttons.
             1. Assume you have a checkbox with id="cherokee". Of course, your id attributes will likely have different names. The general steps will be the same, but substitute your names where I'm using "cherokee".
             2. The following statement creates a Boolean value (true, false) that determines if the user checked the cherokee checkbox. The checked property in checkbox and radio button objects gives this information.
                var cherokeeChecked =
             3. Now use concatenation to form a string with the checkboxes that are selected. See the sample code below:
                var special = "Special Interests: ";
                if (cherokeeChecked) special += "cherokee ";
                if (lakotaChecked) special += "lakota ";
                if (mohawkChecked) special += "mohawk ";
                if (navajoChecked) special += "navajo ";
                Notice the decision statements. We first initialize a variable to contain the string "Special Interests". Then if the cherokee checkbox is checked, we append the string "cherokee" to that variable. This is what the += operator does.
             4. When this is all done, the variable, special, will be part of your alert statement output.
    And here is my guestbook page:

    <?xml version="1.0" encoding="ISO-8859-1" ?>
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         <html xmlns="http://www.w3.org/1999/xhtml">
    	<title>Native American Language Restoration</title>
    	<meta name="keywords" content="Native American,language,restoration"/>
    	<link rel="stylesheet" type="text/css" href="style.css"/>
    	<style type="text/css">
    		a {color: #660066}
    	<script type="text/javascript" src="script.js"></script>
    	<body class="notindex">
    	 <h1 align="center">Guest Book Entry</h1>
    	 <form method="post" enctype="text/plain" action="mailto:noahhoakajacobs@gmail.com" onsubmit="alert('Thank you for submitting your feedback.')">
    	 <p align="center">Name: <input type="text" size="10" maxlength="50" name="name" id="user"/></p>
    	 <p align="center">E-mail: <input type="text" size="10" maxlength="50" name="address" id="email"/></p>
    	 <p align="center">Region
    	 <select name="region" id="region">
    	 <option value="Select One">Select One</option>
    	 <option value="Africa">Africa</option>
    	 <option value="Asia">Asia</option>
    	 <option value="Australia">Australia</option>
    	 <option value="Europe">Europe</option>
    	 <option value="North America">North America</option>
    	 <option value="South America">South America</option>
    	<table border="0" width="100%" cellpadding="0">
    	<tr><td width="50%" valign="top"><p align="left">
    	Special Interests<br/>
    	 <input type="checkbox" id="tillamook" name="tillamook" value="Tillamook"/>Tillamook<br/>
    	 <input type="checkbox" id="paiute" name="paiute" value="Paiute"/>Paiute<br/>
    	 <input type="checkbox" id="illinois" name="illinois" value="Illinois"/>Illinois<br/>
    	 <input type="checkbox" id="iroquois" name="iroquois" value="Iroquois"/>Iroquois
    	 <td width="50%" valign="top"><p align="left">
    	 Interest Level<br/>
    	 <input type="radio" id="High" name="group" value="High"/>High<br/>
    	 <input type="radio" id="Medium" name="group" value="Medium"/>Medium<br/>
    	 <input type="radio" id="Low" name="group" value="Low"/>Low<br/>
    	 <input type="radio" id="justCurious" name="group" value="Just Curious"/>Just Curious
    	 <p align="center"><textarea rows="5" cols="40">Enter your comments here...</textarea><br/>
    	 <input type="submit" id="submit" value="Submit"/>
    	 <input type="reset" id="reset" value="Reset"/>
    	 <br/><input type="button" value="Display" onclick="display()"/></p>
    And here is my (relevant) JavaScript:

     function display()
    {var name = document.getElementById('user');
    var email = document.getElementById('email');
    var tillamookChecked = document.getElementById('tillamook').checked; 
    var paiuteChecked = document.getElementById('paiute').checked; 
    var illinoisChecked = document.getElementById('illinois').checked; 
    var iroquoisChecked = document.getElementById('iroquois').checked; 
    var special = 'Special Interests: '
    if (tillamookChecked) special += 'tillamook';
    if (paiuteChecked) special += 'paiute';
    if (illinoisChecked) special += 'illinois';
    if (iroquoisChecked) special += 'iroquois';
    alert('Name = ' + name.value + '\n' + 'Email = ' + email.value + '\n' + 'Special Interests = ' + special.value)}
    What the heck am I missing?!

  2. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,947 Times in 4,908 Posts
    special is just a JavaScript variable. It does not *HAVE* any ".value" property.

    Zap the ".value" at the very end of your code there.

  3. #3
    New to the CF scene
    Join Date
    May 2009
    Thanked 0 Times in 0 Posts
    Ahhh! Thank you muchly, kind Internet stranger.

  4. #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,947 Times in 4,908 Posts
    First person who has gotten that right in a LONG time!

    Yep, stranger than you know. <grin style="evil" />


Posting Permissions

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