JavaScript and checkboxes

rtroxel posted this at 23:07 — 24th June 2008.

He has: 286 posts

Joined: Mar 2003

Can checkboxes be used with JavaScript - without any server-side scripting?

I'm trying to develop a form, without any server-side scripting - no CGI, etc..

Thanks, as always,

decibel.places posted this at 23:20 — 24th June 2008.

He has: 1,494 posts

Joined: Jun 2008

Have a look at

http://www.w3schools.com/htmldom/dom_obj_checkbox.asp

also

http://www.w3schools.com/htmldom/dom_obj_form.asp

and

http://www.w3schools.com/htmldom/dom_examples.asp

with some examples such as

http://www.w3schools.com/js/tryit.asp?filename=try_dom_input_checked

and

http://www.w3schools.com/js/tryit.asp?filename=tryjs_form_checkbox

rtroxel posted this at 14:25 — 25th June 2008.

He has: 286 posts

Joined: Mar 2003

Here's my working link:
http://ccmaryland.alumni.cornell.edu/Membership_JS_Form.htm

As you can see, I've tried programming checkboxes with both JS and regular HTML.

Thanks again,

Roy

decibel.places posted this at 16:07 — 25th June 2008.

He has: 1,494 posts

Joined: Jun 2008

Roy,

not sure what you are trying to achieve here.

I fixed the problems with your page

1. You created 2 forms so reference to document.forms[0] did not work. I removed the second form and included it in the main form. You probably could have also referenced it with document.forms[1] - it is usually a good practice to give the form a name and/or id but this works for simple pages with few forms.

2. checkboxes require the same name value and yours were different. I renamed them both "coffee"

3. you assigned CAAN=document.forms[0].coffee; but then the script couldn't find array "coffee" I changed it to coffee=document.forms[0].coffee;

I am attaching the corrected file

Attachment	Size
Membership_JS_Form.html	354.35 KB

rtroxel posted this at 17:59 — 25th June 2008.

He has: 286 posts

Joined: Mar 2003

Hmmmm. Maybe I haven't been too clear.

Here is the code for the form I want to run:

<form action="http://www.alumni.cornell.edu/cfxcgi/sendmail.cfm" method="post" name="demoForm">
  <input type="hidden" name="mail_confirmation_page" value="http://ccmaryland.alumni.cornell.edu/thankyou.htm">
  <input type="hidden" name="mail_to" value="[email protected]">
  <input type="hidden" name="mail_subject" value="Membership Form, 2008-2009">
  <p>Name: 
  <input name="mail_name" type="text" size="50">
  <p>Email: 
  <input name="mail_from" type="text" size="50">
  <p>Address 1: 
  <input name="mail_address" type="text" size="50">
  <p>Address 2: 
  <input type="text" name="mail_address_2" size="50">
  <p>Phone: 
  <input name="mail_phone" type="text" size="50">
        <p>Please contact me about meeting with prospective freshmen (CAAAN): 
          <input type="checkbox" name="CAAAN" value="yes">
        <p>Please contact me about volunteering for a Club committee.
   			<input type="checkbox" name="Committee" value="yes"> 
		<p>Please contact me by: 
		Email <input type="checkbox" name="Email" value="yes">
		US Mail.<input type="checkbox" name="USmail" value="yes">    
<p>What types of events would you like to see the club organize?<br> 
  <textarea name="mail_message" cols="30" rows="5"> </textarea>
          <br>
         <center> <input name="submit" type="submit" value="submit">
  <input name="reset" type="reset" value="reset"></center>
</form>

The visitor is supposed to fill in the data blanks and then check the appropriate boxes. When the visitor clicks on "submit", the information should be sent to me via email. This works just fine, except for the checkboxes.

decibel.places posted this at 20:41 — 25th June 2008.

He has: 1,494 posts

Joined: Jun 2008

You are giving the checkboxes individual names and the same value

That won't work

Try

<p>Please contact me about meeting with prospective freshmen (CAAAN):
<input type="checkbox" name="contact" value="CAAN">
<p>Please contact me about volunteering for a Club committee:
<input type="checkbox" name="contact" value="committee">
<p>Please contact me by Email:
<input type="checkbox" name="contact" value="email">
<p>Please contact me by US Mail:
<input type="checkbox" name="contact" value="usmail">    

Until you are more proficient in basic HTML I would advise against trying any JavaScript add-ons

Jennifer Kyrnin has an excellent site for Web Design on About.com and you can try learning some HTML syntax and standards there.

Good luck - don't be afraid to ask questions here, but try to check your HTML syntax first.

rtroxel posted this at 21:03 — 25th June 2008.

He has: 286 posts

Joined: Mar 2003

Many thanks for the advice (and patience).

- Roy

decibel.places posted this at 22:18 — 25th June 2008.

He has: 1,494 posts

Joined: Jun 2008

well you're welcome

it's a fact that even people like me and Jenn (yes, she has admitted this too) who have been coding for 10 years still look up syntax for specific tags - for optimal display and functions, or to find hooks for DHTML manipulation with JavaScript and/or CSS

like I couldn't remember the wrap attributes for a textarea (off, physical, virtual - and I just looked it up again because I couldn't remember if there is a 4th attribute) - and didn't find it on w3schools, but found it on Jenn's About.com site.

It is good to find a repository like W3schools or the About.com site for reference

here's another good reference page at Jenn's About.com site

I prefer the w3schools site I can usually find what I'm looking for in 2-3 clicks, HTML, DOM, JavaScript, PHP, MySQL -- but I know what I'm looking for. The more tutorial About.com site might suit you better, the tutorials on w3schools are good but maybe better as refreshers than as introductions.