0

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
6
Views
8 Years
Discussion Span
Last Post by mbirame
0

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 = ' ';
}
}
0

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!

0

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>
0

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...

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.