JavaScript and checkboxes

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,

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's picture

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

AttachmentSize
Membership_JS_Form.html 354.35 KB

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's picture

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.

He has: 286 posts

Joined: Mar 2003

Many thanks for the advice (and patience). Smiling

- Roy

decibel.places's picture

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.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.