PDA

View Full Version : Javascript for check boxes



Yoda
09-21-2006, 07:27 AM
Hi

I am looking for a script that will perform the following:

In my web form I have three questions, each with a yes and a no checkbox. When the users answers *all three* questions with no, he is supposed to get an alert (like an onClick alert).

Any help would be much appreciated!

Thanks much
Yoda

codeexploiter
09-21-2006, 09:07 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function callMe()
{
var len = document.form1.r.length;
var i;
var one,two,three;


for(i=0;i<len;i++)
{
if(document.form1.r[i].checked)
one = document.form1[i].value;
}

len = document.form1.r1.length;

for(i=0;i<len;i++)
{
if(document.form1.r1[i].checked)
two = " "+document.form1[i].value;
}

len = document.form1.r2.length;

for(i=0;i<len;i++)
{
if(document.form1.r2[i].checked)
three = " "+document.form1[i].value;
}

if(one ==0 && two == 0 && three ==0)
alert('You Pressed all No');

}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input name="r" type="radio" value="1">Yes
<input name="r" type="radio" value="0">No
<br>
<input name="r1" type="radio" value="1">Yes
<input name="r1" type="radio" value="0">No
<br>
<input name="r2" type="radio" value="1">Yes
<input name="r2" type="radio" value="0">No
<br>
<input type="button" onClick="callMe()" value="Go">
</form>
</body>
</html>


Hope this is what you were talking about

Yoda
09-21-2006, 09:21 AM
yes and no. I don't want the GO button - the alert should come up automatically when the users clicks the third "no" check box.
Any ideas?

Yoda

codeexploiter
09-21-2006, 09:32 AM
I've changed the HTML a bit, now it will trigger an alert box on two conditions:

1. User has to select first two NO button (based on your first post)
2. When they click on the third NO radio button it will trigger that alert box



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function callMe()
{
var len = document.form1.r.length;
var i;
var one,two,three;


for(i=0;i<len;i++)
{
if(document.form1.r[i].checked)
one = document.form1[i].value;
}

len = document.form1.r1.length;

for(i=0;i<len;i++)
{
if(document.form1.r1[i].checked)
two = " "+document.form1[i].value;
}

len = document.form1.r2.length;

for(i=0;i<len;i++)
{
if(document.form1.r2[i].checked)
three = " "+document.form1[i].value;
}

if(one ==0 && two == 0 && three ==0)
alert('You Pressed all No');

}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input name="r" type="radio" value="1">Yes
<input name="r" type="radio" value="0">No
<br>
<input name="r1" type="radio" value="1">Yes
<input name="r1" type="radio" value="0">No
<br>
<input name="r2" type="radio" value="1">Yes
<input name="r2" type="radio" value="0" onClick="callMe()">No
</form>
</body>
</html>



In a situation where the user is clicking the third button first and then click first and second, they need to click the third radio NO button once more for triggering the alert box.

This can be solved using a small change in the HTML code like the following



<form name="form1" method="post" action="">
<input name="r" type="radio" value="1">Yes
<input name="r" type="radio" value="0" onClick="callMe()">No
<br>
<input name="r1" type="radio" value="1">Yes
<input name="r1" type="radio" value="0" onClick="callMe()">No
<br>
<input name="r2" type="radio" value="1">Yes
<input name="r2" type="radio" value="0" onClick="callMe()">No
</form>


If you use the above mentioned code then it will trigger an alert box if all the 3 NO buttons are selected, the order is not important in this,

The user can select third, then first and then second it will give alert the only constraint is all must be NO

Twey
09-21-2006, 03:18 PM
There are many problems with this code.
<script language="javascript">language is deprecated for type.
if(document.form1.r[i].checked)Forms may not be accessible as properties of document. You should use the document.forms collection.
<input name="r" type="radio" value="0" onClick="callMe()">NoThere are more ways to select a radio button than a click (onchange should work, but unfortunately doesn't in [wait for it...] IE).


<script type="text/javascript">
function callback() {
alert("Your message here");
}

function getRadioValue(el) {
if(!el.length) return null;
for(var i = 0; i < el.length; ++i)
if(el[i].checked) return el[i].value;
return null;
}

window.onload = function() {
for(var i = 0, f = document.forms['form1'].elements; i < f.length; ++i)
f[i].onclick = f[i].onchange = f[i].onkeypress = function() {
var f = this.form.elements;
if(getRadioValue(f.r) === "0" && getRadioValue(f.r1) === "0" && getRadioValue(f.r2) === "0")
callback();
};
};
</script>