Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 567

Aug 21st, 2009

Another Checkbox question!

Expand Post »

Hi folks,
I'm afraid I'm pretty new to javascript, so I apologize in advance for my inexperience. I am trying to do a simple thing:

I have a page with three items that I want the user to agree to (a beta signup agreement).

I want them to have to check off all three boxes before the "continue" button becomes active.

I've searched and searched and found a few tutorials, but they only seem to get me halfway and then drop me off a cliff...

I don't need this to be a submit form or anything, just click the three boxes and then you can hit the "continue" button.

Thank you for your help!

Similar Threads

checkbox in datagridview c# in C#
Need an assistance in VB.NET
checkbox output in PHP
c# window application using checkbox and label in C#
Checkbox input to an Access DB via ASP and JScript in ASP

mbirame

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

34 posts
since Apr 2009

Permalink

Aug 21st, 2009

Re: Another Checkbox question!

First you have to disable the submit button then on each checkboxes onclick event do a check to see if all of them are checked, then enable the button again.

code will look something like this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function check(){
if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
document.getElementById(button).disabled = ' ';
}
}
function check(){
if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
document.getElementById(button).disabled = ' ';
}
}

Thirusha

Reputation Points: 36

Solved Threads: 57

Posting Whiz

Offline

355 posts
since Mar 2008

Permalink

Aug 21st, 2009

Re: Another Checkbox question!

Would you be willing to give me a snip of html to see what the checkbox and button would look like there in reference to this code?

Thank you for your help!

mbirame

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

34 posts
since Apr 2009

Permalink

Aug 21st, 2009

Re: Another Checkbox question!

I've got this much, but still trying to figure out the button...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
 <script type="text/javascript">
<!--
function check(){
if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
document.getElementById(button).disabled = ' ';
}
}
// -->
</script>
 
 
 
 
<input name="chkId1" value="1" id="chkId1" type="checkbox">
Terms Agreement</label>
<br>
<label for="myCheckbox2"><input name="chkId2" value="2" id="chkId2" type="checkbox">
Unstable</label>
<br>
<label for="myCheckbox3"><input name="chkId3" value="3" id="chkId3" type="checkbox">
Feedback</label>
 <script type="text/javascript">
<!--
function check(){
if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
document.getElementById(button).disabled = ' ';
}
}
// -->
</script>




<input name="chkId1" value="1" id="chkId1" type="checkbox">
Terms Agreement</label>
<br>
<label for="myCheckbox2"><input name="chkId2" value="2" id="chkId2" type="checkbox">
Unstable</label>
<br>
<label for="myCheckbox3"><input name="chkId3" value="3" id="chkId3" type="checkbox">
Feedback</label>

mbirame

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

34 posts
since Apr 2009

Permalink

Aug 21st, 2009

Re: Another Checkbox question!

Hi everyone,

mbirame — you could also try this one:

javascript Syntax (Toggle Plain Text)
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<style type="text/css" media="all">
/* <![CDATA[ */
 
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var validate = function( form ) {
   var form = ( typeof( form ) === "object" ) ? form : document.getElementById( form );
   var pref = "chb";
   for ( var i = 0; i < 3; i++ ) { 
      if ( form[( pref + i )].checked ) {
         continue;
         return true;
      } alert( "In order to continue, you must check all 3 items in the field" );
   return false;
   }   
};
// ]]>
</script>
</head>
<body id="body0">
<div>
<form id="testform" name="testform" action="process.php" onsubmit="return validate( this );">
<div id="div0">
<label for="chb0"><b>1.</b> Item <input type="checkbox" id="chb0" name="chb0" value="item1" /></label><br />
<label for="chb1"><b>2.</b> Item <input type="checkbox" id="chb1" name="chb1" value="item1" /></label><br />
<label for="chb2"><b>3.</b> Item <input type="checkbox" id="chb2" name="chb2" value="item3" /></label><br /><br />
<input type="submit" value="continue" />
</div>
</form>
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<style type="text/css" media="all">
/* <![CDATA[ */

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var validate = function( form ) {
   var form = ( typeof( form ) === "object" ) ? form : document.getElementById( form );
   var pref = "chb";
   for ( var i = 0; i < 3; i++ ) { 
      if ( form[( pref + i )].checked ) {
         continue;
         return true;
      } alert( "In order to continue, you must check all 3 items in the field" );
   return false;
   }   
};
// ]]>
</script>
</head>
<body id="body0">
<div>
<form id="testform" name="testform" action="process.php" onsubmit="return validate( this );">
<div id="div0">
<label for="chb0"><b>1.</b> Item <input type="checkbox" id="chb0" name="chb0" value="item1" /></label><br />
<label for="chb1"><b>2.</b> Item <input type="checkbox" id="chb1" name="chb1" value="item1" /></label><br />
<label for="chb2"><b>3.</b> Item <input type="checkbox" id="chb2" name="chb2" value="item3" /></label><br /><br />
<input type="submit" value="continue" />
</div>
</form>
</div>
</body>
</html>

hope it both helped...

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Aug 21st, 2009

Re: Another Checkbox question!

Holy cow-that works beautifully! Thank you both! This was written in a way that I can learn too! Yea!

mbirame

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

34 posts
since Apr 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Date d-m-yy to dd-mm-yyyy

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to intregrate javascript code of selecting dropdownlist item from a asp.net form?

DaniWeb Message

Cancel Changes

User Name
Password