Member Avatar for mbirame

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!

  • 3 Contributors
  • 5 Replies
  • 307 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by mbirame
Member Avatar for Thirusha

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:

function check(){
if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
document.getElementById(button).disabled = ' ';
}
}
Member Avatar for mbirame

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!

Member Avatar for mbirame

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

<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>
Member Avatar for essential

Hi everyone,

mbirame &#8212; you could also try this one:

<?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&#32;<input type="checkbox" id="chb0" name="chb0" value="item1" /></label><br />
<label for="chb1"><b>2.</b> Item&#32;<input type="checkbox" id="chb1" name="chb1" value="item1" /></label><br />
<label for="chb2"><b>3.</b> Item&#32;<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...

Member Avatar for mbirame

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.