JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Another Checkbox question!

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2009
Posts: 29
Reputation: mbirame is an unknown quantity at this point 
Solved Threads: 0
mbirame mbirame is offline Offline
Light Poster

Another Checkbox question!

 
0
  #1
Aug 21st, 2009
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!
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 315
Reputation: Thirusha is an unknown quantity at this point 
Solved Threads: 50
Thirusha's Avatar
Thirusha Thirusha is offline Offline
Posting Whiz

Re: Another Checkbox question!

 
0
  #2
Aug 21st, 2009
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) 
  1. function check(){
  2. if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
  3. document.getElementById(button).disabled = ' ';
  4. }
  5. }
Life... Is a Moment
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 29
Reputation: mbirame is an unknown quantity at this point 
Solved Threads: 0
mbirame mbirame is offline Offline
Light Poster

Re: Another Checkbox question!

 
0
  #3
Aug 21st, 2009
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!
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 29
Reputation: mbirame is an unknown quantity at this point 
Solved Threads: 0
mbirame mbirame is offline Offline
Light Poster

Re: Another Checkbox question!

 
0
  #4
Aug 21st, 2009
I've got this much, but still trying to figure out the button...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  <script type="text/javascript">
  2. <!--
  3. function check(){
  4. if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
  5. document.getElementById(button).disabled = ' ';
  6. }
  7. }
  8. // -->
  9. </script>
  10.  
  11.  
  12.  
  13.  
  14. <input name="chkId1" value="1" id="chkId1" type="checkbox">
  15. Terms Agreement</label>
  16. <br>
  17. <label for="myCheckbox2"><input name="chkId2" value="2" id="chkId2" type="checkbox">
  18. Unstable</label>
  19. <br>
  20. <label for="myCheckbox3"><input name="chkId3" value="3" id="chkId3" type="checkbox">
  21. Feedback</label>
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Another Checkbox question!

 
0
  #5
Aug 21st, 2009
Hi everyone,

mbirame — you could also try this one:
javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>www.daniweb.com</title>
  10. <style type="text/css" media="all">
  11. /* <![CDATA[ */
  12.  
  13. /* ]]> */
  14. </style>
  15. <script type="text/javascript">
  16. // <![CDATA[
  17. var validate = function( form ) {
  18.    var form = ( typeof( form ) === "object" ) ? form : document.getElementById( form );
  19.    var pref = "chb";
  20.    for ( var i = 0; i < 3; i++ ) { 
  21.       if ( form[( pref + i )].checked ) {
  22.          continue;
  23.          return true;
  24.       } alert( "In order to continue, you must check all 3 items in the field" );
  25.    return false;
  26.    }   
  27. };
  28. // ]]>
  29. </script>
  30. </head>
  31. <body id="body0">
  32. <div>
  33. <form id="testform" name="testform" action="process.php" onsubmit="return validate( this );">
  34. <div id="div0">
  35. <label for="chb0"><b>1.</b> Item <input type="checkbox" id="chb0" name="chb0" value="item1" /></label><br />
  36. <label for="chb1"><b>2.</b> Item <input type="checkbox" id="chb1" name="chb1" value="item1" /></label><br />
  37. <label for="chb2"><b>3.</b> Item <input type="checkbox" id="chb2" name="chb2" value="item3" /></label><br /><br />
  38. <input type="submit" value="continue" />
  39. </div>
  40. </form>
  41. </div>
  42. </body>
  43. </html>

hope it both helped...
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 29
Reputation: mbirame is an unknown quantity at this point 
Solved Threads: 0
mbirame mbirame is offline Offline
Light Poster

Re: Another Checkbox question!

 
0
  #6
Aug 21st, 2009
Holy cow-that works beautifully! Thank you both! This was written in a way that I can learn too! Yea!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor decimal dependent design disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword html htmlform ie8 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl listbox math media microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php player post problem progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC