Solved

Disable button until series of checkboxes r clicked

Posted on 2007-04-02
24
213 Views
Last Modified: 2013-11-19
Linux, php 4.4.4 - all the standard libraries

This is a question that I'm not sure if it has a solution or not, but I assume if there is one, it will be javascript.

I have a form that has 3 columns of checkboxes, each column has 20 choices and a single PRINT button for the whole form...

My client wants to set this up so that the print button is DISABLED until at least 5 boxes r checked in each column.

Is this possible and can anyone give me a hint as to how to do it?  I use javascript very little but I think javascript would be the only to accomplish this.

Please advise
0
Comment
Question by:cacookejr
  • 13
  • 11
24 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Provide us with the html for the form tag, the checkboxes and the button.  I can work on a general example but this code will help us provide a better solution.

bol
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
This is the exiting code for the form but it is not really correct because the tables r laid out in rows instead of cloumns:

It needs to be re-done in columns so that each column can be monitored so that the print button is only active AFTER 5 choices or more r made  in each column.

<form action="" method="post" name="list1">
    <table border="1" cellspacing="0" cellpadding="0" width="600">
         <tr>
                        <td valign="top" align="left">
                                          <input name="" type="checkbox" value="" />A &amp; W Restaurant</td>
                        <td valign="top" align="left">
                                          <input name="" type="checkbox" value="" />Dunkin Donuts</td>
                        <td valign="top" align="left">
                                          <input name="" type="checkbox" value="" />Chick-Fil-A</td>
                        <td valign="top" align="left">
                                          <input name="" type="checkbox" value="" />Olive Garden</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Baskin Robins</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Blimpie</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Chili&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Papa John&rsquo;s</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Ben &amp; Jerry&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Hot Sam</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Church&rsquo;s Chicken</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Perkins</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Boston Market</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Mrs. Field&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Steak Out</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Ponderosa</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Chuck E Cheese</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />1 Potato 2</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Denny&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Red Lobster</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />D&rsquo;Angelo</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />The Taco Maker</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Domino&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Ruby Tuesday</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Donut Connection</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Dairy Queen</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Farmer&rsquo;s Grill</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Sbarro Pizza</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />El Chico</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Swiss Pretzel</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Friendly&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Sizzler</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Fresh Choice</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Cookie Bouquets</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Golden Corral</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Sonny&rsquo;s Bar-B-Q</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Godfather&rsquo;s Pizza</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Applebee&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Hooters</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Starbucks</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Hardee&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Arby&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Hungry Howie&rsquo;s Pizza</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Steak and Ale</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Little Caesar&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Arthur Treachers</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />I-Hop</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Steak and Shake</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Nathan&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Austin&rsquo;s    Steakhouse</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Jack-In-The-Box</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Subway</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Pizza Hut</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Bennigan&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />KFC</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Taco Bell</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Planet Hollywood</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Black-Eyed-Pea</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Krispy Kreme</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />TCBY</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Popeye&rsquo;s Chicken</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Bojangles&rsquo;</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Krystal</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />TGI Friday&rsquo;s</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Pretzel Time</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Burger King</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Longhorn Steakhouse</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Waffle House</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Quizno&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Carl&rsquo;s Jr.</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Long John Silver</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Wendy&rsquo;s</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Schlotzsky&rsquo;s</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Checkers</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />McDonalds</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Western Sizzlin&rsquo;</td>
                      </tr>
                      <tr>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Sonic</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />White Castle</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Miami Subs</td>
                        <td valign="top" align="left"><input name="" type="checkbox" value="" />Western Steer</td>
                      </tr>
                                <tr>
                                      <td colspan="4" align="center">
                                    <br>
                                    <INPUT TYPE="button"  onClick="window.print()" value="PRINT NOW">
                                    </td>
                              </tr>
                    </table>
                          </form>

Thx

0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
Comment Utility
Since you are still working on the html and because I got a page started before I got your script I will post this sample page.  It has fewer checkboxes in each column and the amount need is only 3 but it will show you what javascript to use to do this.  Notice the way the checkboxes are named.  Each "column" has the same name and a different value.  If you can't do this then the script will be more difficult.

It also may give you an example of how to layout the page.

Let me know what you think of it.  You can copy the complete html below and put in a new html file to test.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Disable button</title>
<script type="text/javascript">
function enablePrint(frm) {
      var col1 = false;
      var col2 = false;
      var col3 = false;
      var count1 = 0;
      var count2 = 0;
      var count3 = 0;
      for (var i = 0; i < frm.elements.length; i++) {
            if (frm.elements[i].name == 'column1' && frm.elements[i].checked == true) {
                  if (count1 < 3) { count1++; }
            }
            if (frm.elements[i].name == 'column2' && frm.elements[i].checked == true) {
                  if (count2 < 3) { count2++; }
            }
            if (frm.elements[i].name == 'column3' && frm.elements[i].checked == true) {
                  if (count3 < 3) { count3++; }
            }
      }
      if (count1 == 3 && count2 == 3 && count3 == 3) {
            alert('YES');
            frm.button1.disabled = false;
      }      
      alert(count1 + '-' + count2 + '-' + count3);
}
</script>
</head>

<body>
<h1>Check this form</h1>
<form name="form1" id="from1" action="" method="post" onclick="enablePrint(this);">
<div id="div1" style="width: 30%; float: left;">
Check boxes<br />
<input type="checkbox" name="column1" value="check1" /><br />
<input type="checkbox" name="column1" value="check2" /><br />
<input type="checkbox" name="column1" value="check3" /><br />
<input type="checkbox" name="column1" value="check4" /><br />
<input type="checkbox" name="column1" value="check5" /><br />
<input type="checkbox" name="column1" value="check6" /><br />
<input type="checkbox" name="column1" value="check7" /><br />
<input type="checkbox" name="column1" value="check8" /><br />
</div>

<div id="div2" style="width: 30%; float: left;">
Check2 boxes<br />
<input type="checkbox" name="column2" value="check1" /><br />
<input type="checkbox" name="column2" value="check2" /><br />
<input type="checkbox" name="column2" value="check3" /><br />
<input type="checkbox" name="column2" value="check4" /><br />
<input type="checkbox" name="column2" value="check5" /><br />
<input type="checkbox" name="column2" value="check6" /><br />
<input type="checkbox" name="column2" value="check7" /><br />
<input type="checkbox" name="column2" value="check8" /><br />
</div>

<div id="div3" style="width: 30%; float: left;">
Check3 boxes<br />
<input type="checkbox" name="column3" value="check1" /><br />
<input type="checkbox" name="column3" value="check2" /><br />
<input type="checkbox" name="column3" value="check3" /><br />
<input type="checkbox" name="column3" value="check4" /><br />
<input type="checkbox" name="column3" value="check5" /><br />
<input type="checkbox" name="column3" value="check6" /><br />
<input type="checkbox" name="column3" value="check7" /><br />
<input type="checkbox" name="column3" value="check8" /><br />
</div>
<div style="clear: both;">
<br /><br />
<input type="submit" name="button1" value="Print" disabled="disabled" />
</div>
</form>

</body>
</html>

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Let me know if there is a question or need help adapting it to your page.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
I left 2 alert lines in the code and you can delete those if you want or leave them to see how the code progresses.  They would definitely need to be removed from the page when it is ready for production (i.e. live site).

bol
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
From what I can tell that solution should work perfect - it would be nice if we could also turn off the IE print option from the IE task bar at the top.

I will modify my code and test. if this works, which I'm sure it will I will give u those 500 points immediatly.

Maybe u know something about getting CURL/SOAP to run correctly on php 4.4.4?

Please advise

Thx
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Sorry, although I have wanted to spend time on SOAP I haven't been able to yet.  I have only read a bit on PHP's Curl.  However there are definitely experts here that can help and some areas that can attract their attention.  Let me know if you need a suggestion of an area but the PHP area would be at least one.

IE, and in fact other browsers, don't allow client side script like javascript to control the browser like you mentioned.  You won't be able to use it to disable the Print button/option on the taskbar or under File.

Let me know if there is a problem getting the code to work but I'm glad you like it.  I'm sure I can help with any problems or questions you have.

bol
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
I have run into 1 issue:

Even in ur test script the VALUE doesn't display.

Could this be because each box in the column has the same name?

Please advise asap as I am working on this script right now.

Thx
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
What do you mean the value doesn't display?  Where?  The checkbox itself doesn't show a value.  I didn't write one to the side of each checkbox but it is just a matter of doing ...

<input type="checkbox" name="column1" value="check1" /> Check1<br />
<input type="checkbox" name="column1" value="check2" /> Check2<br />
<input type="checkbox" name="column1" value="check3" /> Check3<br />
<input type="checkbox" name="column1" value="check4" /> Check4<br />

Let me know if this isn't what you were referring to.

bol
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
ops, ur correct, guessI've just been in front of this box too long...

:)
sorry
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
LOL.  No worries.  I'm glad I wasn't going crazy.  It has been too long of a day after too short of a weekend. :)

bol
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
trying to eat dinner finally - I will repond back in a few...

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:cacookejr
Comment Utility
After modifying ur script slightly to use an extra column etc, everything works perfetcly...

Thank u very much

I have been programming since 1981 (basic, cobol, fortran, pascal, c, c++, php and others) but I still can't get my mind wrapped around javascript.  Is it just that there r so many functions?

Could u suggest a good place to go to learn more about how javascript works?  I'm more used to a top down approach of prgramming than javascript is...

Thank u very much
 
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
The duplicated link should've been:

http://www.tizag.com/javascriptT/
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
gotcha - I have been a member of EE for a few years, but they have changed the whole format...  is there anyway I direct direct these type questions directly to u, or is there a rule against that?

0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
I hope you like or grow to like the new format.  I have been exposed to it for years and decided to start helping over a year ago and like this site a lot.

You can't leave other experts out of a question.  That would defeat one of the main benefits of the site, the community.  In the short term you could post a message here with a URL to your new question to get my attention.  Also, you can include my name (b0lsc0tt) in a question (title, body, comment) and I will find the question.  Even without my name I regularly monitor a lot of areas and help in questions I can.  Also, the Zone Advisors or moderators might be able to reach me and you can post a message in Community Support to ask about this at that time.

I hope this helps.  There are other great experts and I think you would very seldom need this (if ever).  Thanks for your interest.  Let me know if you have a question about anything I said.  See you around. :)

bol
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
Thank u very much for the help and the advice on the forums/site.

Have a good day.

Cliff Cooke

0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
I have 1 issue with this script that the client found...

IF the user selects 5 or more boxes per column then the print button is activated - that is perfect, BUT if the user DESELECTS a box the print button is STILL activated - it should turn itself back OFF if there r less than 5 boxes selected per Column.

Can this be done?

Thx

0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Sure, no problem and it is pretty easy.  You can add that capability by modifying the If that enables the print button.  The first part of the code below is from the original but I added the else statement.

      if (count1 == 3 && count2 == 3 && count3 == 3) {
            frm.button1.disabled = false;
      } else {
            frm.button1.disabled = true;
      }

bol
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
That worked perfect
is there a way for me to give u more points?
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
I appreciate the thought.  Don't worry about it though.

This was worth 500 points so you can't increase it (that's the max).  Even though the last thing was really a new question we did take care of it here.  Starting a new question for it would've been the right way to give points for it but I can understand why you posted it here and don't think that was bad.  However opening a question to give me points for this new issue would be the only way to provide more but that would technically be point passing.  That isn't allowed.  Even though I think it could be justified (this was a new question) it just isn't worth it.  I did get points from this question and so its not like I was left out.  Most important to me was knowing you appreciated the help and are satisfied.  A nice note of thanks to EE for the great site that makes it possible is the only extra I would suggest.  I am doing fine on points. :)

Thanks for a fun follow up question and I'll see you around.

bol
0
 
LVL 1

Author Comment

by:cacookejr
Comment Utility
kk, I agree - thanks to EE for this fantastic site - whenever I'm in a bind this is where I come...
Thx again
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now