Need help using if statement to check checkboxes

CodyJava · 11-16-2012, 01:31 AM

I'm trying to protect against empty check boxes. The code works when their empty but also when they aren't so I guess it's not truly working. Also I know there has to be an easier way to check to see if their empty.

Javascript:

Code:

if(document.form[0].interest1.checked == false && 
document.form[0].interest2.checked == false &&
document.form[0].interest3.checked == false &&
document.form[0].interest4.checked == false &&
document.form[0].interest5.checked == false){
window.alert("You did not select an interest");
return false;
}else{
return true;
}

html:

Code:

<input type="checkbox" name="interest1" value="entertainment">Entertainment
<br>
<input type="checkbox" name="interest2" value="business">Business
<br>
<input type="checkbox" name="interest3" value="music">Music
<br>
<input type="checkbox" name="interest4" value="shopping">Shopping
<br>
<input type="checkbox" name="interest5" value="travel">Travel

Full code(in case needed):

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Chapter 11</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function confirmsubmit(){
if(document.forms[0].visitor_name.value == "" || document.forms[0].visitor_name.value == "Enter your name"){
window.alert("You did not enter your name");
return false;
}
if(document.forms[0].email.value == "" || 
document.forms[0].email.value == "Enter your e-mail address"){
window.alert("You did not enter your email address");
return false;
}
if(document.forms[0].pass1.value != document.forms[0].pass2.value){
window.alert("Your passwords do not match");
} 
if(document.forms[0].pass1.value == "" || document.forms[0].pass2.value == ""){
window.alert("One of your passwords are blank");
}
if(document.forms[0].question.value == "blank"){
window.alert("You did not select a security question");
}
if(document.forms[0].ans.value == ""){
window.alert("Your security question answer is blank");
}
var emailvis = false;
for(var i=0;i<2;++i){
if(document.forms[0].offer[i].checked == true){
emailvis = true;
break;
}
if(emailvis == false){
window.alert("You must select a interest");
return false;
}
}
if(document.form[0].interest1.checked == false && 
document.form[0].interest2.checked == false &&
document.form[0].interest3.checked == false &&
document.form[0].interest4.checked == false &&
document.form[0].interest5.checked == false){
window.alert("You did not select an interest");
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<h1>Web Site Registration Form</h1>
<form action="" method="post" onsubmit="return confirmsubmit()">
<h2>Personal Information</h2>
<p>Name
<br>
<br>
<input type="text" value="Enter your name" name="visitor_name" 
onclick="if (this.value == 'Enter your name') this.value = '';"
size="50">
<br>
<br>
E-mail address
<br>
<br>
<input type="text" value="Enter your e-mail address" name="email" 
onclick="if (this.value == 'Enter your e-mail address') this.value = '';"
size="50">
<br>
</p>
<h2>Security Information</h2>
<p>Enter a password that you can use to manage your subscription online
<br>
<br>
<input type="text" name="pass1" value="" size="50">
<!-- onblur??? -->
<br>
<br>
Type the password again to confirm it
<br>
<br>
<input type="text" name="pass2" value="" size="50">
<br>
<br>
Security question
<br>
<br>
<select name="question">
<option value="blank">[Select a security question]</option>
<option value="mother">What is your mother's maiden name?</option>
<option value="pet">What is the name of pet?</option>
<option value="color">What is your favorite color?</option>
</select>
<br>
<br>
Your answer
<br>
<br>
<input type="text" name="ans" value="" size="50">
<br>
</p>
<h2>Preferences</h2>
<p>Send special offers to my e-mail address
<input type="radio" name="offer" value="Yes">Yes
<input type="radio" name="offer" value="No">No
<br>
<br>
Select areas of interest(select at least one)
<br>
<br>
<input type="checkbox" name="interest1" value="entertainment">Entertainment
<br>
<input type="checkbox" name="interest2" value="business">Business
<br>
<input type="checkbox" name="interest3" value="music">Music
<br>
<input type="checkbox" name="interest4" value="shopping">Shopping
<br>
<input type="checkbox" name="interest5" value="travel">Travel
<br>
<br>
</p>
<p><input type="submit" /></p>
</form>
</body>
</html>

Thanks any help is appreciated.

Old Pedant · 11-16-2012, 02:02 AM

First of all, why do you keep repeating document.forms[0] all over the place?

Code:

function confirmsubmit()
{
    var f = document.forms[0];
    if ( f.visitor_name.value == "" || f.visitor_name.value == "Enter your name")
    {
        window.alert("You did not enter your name");
        return false;
    }
    ...
    ... similarly throughout ...
    ...
    // last step:
    for ( var cb = 1; cb <= 5; ++cb )
    {
        if ( f["interest"+cb].checked ) return true;
    }
    alert("You must check at least one interest";
    return false;
}

Philip M · 11-16-2012, 07:20 AM

Quote:

Originally Posted by Old Pedant

First of all, why do you keep repeating document.forms[0] all over the place?

He ignored the same advice that I gave him in another thread.

He has document.form[0] in several places.

CodyJava · 11-16-2012, 02:58 PM

I had a template from something else so I copied and pasted a lot of it and when I started doing new code I just kept doing it I'll use a variable next time thanks for all the help.

Old Pedant · 11-16-2012, 09:02 PM

Quote:

Originally Posted by Philip M

He ignored the same advice that I gave him in another thread.

He has document.form[0] in several places.

DOH on me! OF COURSE!

The whole reason his code didn't work was because he used document.form[0] instead of document.forms[0]!!!

Good eyes, Philip!

felgall · 11-16-2012, 09:54 PM

Using document.forms[0] ties the JavaScript directly to the HTML so that adding another form to the page (such as if you decide to add a search box into the header of each page) will instantly break your JavaScript.

Using document.getElementsByTagName('visitor_name')[0].form would be a better alternative because it would at least mean that the JavaScript isn't affected unless another form with that same field name in it is added.

Old Pedant · 11-16-2012, 10:15 PM

Yes, but why not simply insist that every <form> have an ID? ID's *MUST* be unique, so there's not even the possibility of a duplicated field name.

Philip M · 11-17-2012, 07:35 AM

Quote:

Originally Posted by Old Pedant

DOH on me! OF COURSE!

The whole reason his code didn't work was because he used document.form[0] instead of document.forms[0]!!!

Good eyes, Philip!

Follow Logic Ali's advice - use the error console!

Another good reason to use

var f = document.forms[0];

But as you say id is preferred

var f = document.getElementById("formid");

minder · 11-17-2012, 09:21 PM

You don't need to give the form a name or id or even refer to it at all. You could just give the text boxes, check boxes etc an appropriate id or name and refer to them directly when validating them in your js.

felgall · 11-17-2012, 10:01 PM

Quote:

Originally Posted by Old Pedant

Yes, but why not simply insist that every <form> have an ID? ID's *MUST* be unique, so there's not even the possibility of a duplicated field name.

My suggestion was made on the basis of not amending the HTML for the current form. Using an id for accessing the form from JavaScript is certainly the better option.

Where you have an id on any field within the form you don't need one on the form tag itself as any field within the form provides easy access to the entire form.

Philip M · 11-18-2012, 09:28 AM

Quote:

Originally Posted by felgall

My suggestion was made on the basis of not amending the HTML for the current form. Using an id for accessing the form from JavaScript is certainly the better option.

Where you have an id on any field within the form you don't need one on the form tag itself as any field within the form provides easy access to the entire form.

Very true, but if the form is to be submitted to a server-side script then the form elements must have names (in addition to ids if present). Like Old Pedant I see no real need to assign ids to form elements.

minder · 11-18-2012, 09:45 AM

Quote:

Originally Posted by Philip M

Very true, but if the form is to be submitted to a server-side script then the form elements must have names (in addition to ids if present). Like Old Pedant I see no real need to assign ids to form elements.

But id's make it easier to reference the form elements in the css if you want to style them in a specific way.

So what you *NEED* to do comes down to preference because you don't *NEED* to reference the form at all either - by name and/or id or forms[x] - to access the form elements.

Philip M · 11-18-2012, 12:01 PM

Quote:

Originally Posted by minder

But id's make it easier to reference the form elements in the css if you want to style them in a specific way.

So what you *NEED* to do comes down to preference because you don't *NEED* to reference the form at all either - by name and/or id or forms[x] - to access the form elements.

Yes, bullant. It is (as always) a case of horses for courses, or doing what is most suitable/appropriate/convenient in any particular situation.

That is not exactly the same as personal preference.

minder · 11-18-2012, 12:35 PM

Quote:

Originally Posted by Philip M

....doing what is most suitable/appropriate/convenient in any particular situation.
That is not exactly the same as personal preference.

In this case it is exactly the same as personal preference because no way of accessing form elements suggested in this thread is better than the other. So which way you or I or old pedant or felgall think is best comes down to each of our personal preferences.

Being retired I no longer have to put up with other peoples' views on how things should be done. I can now freely do what I think is best when I have more than 1 option