Menu

Checkboxes - minimum and maximum

Help
GungaSF
2008-05-03
2013-06-03
  • GungaSF

    GungaSF - 2008-05-03

    My form has several checkboxes and I'd like to users to select exactly 5.  I'd like two possible warnings: "You must select at least 5" and "You can't select more than 5"...

    This is the code phpFormGenerator -generated-:

    <li class="mainForm" id="fieldBox_4">
    <label class="formFieldQuestion">Maegashira&nbsp;*</label>
    <span><input class=mainForm type=checkbox name=field_4[] id=field_4_option_1 value="M1" />
    <label class=formFieldOption for="field_4_option_1">M1</label>
    <input class=mainForm type=checkbox name=field_4[] id=field_4_option_2 value="M2" />
    <label class=formFieldOption for="field_4_option_2">M2</label>
    <input class=mainForm type=checkbox name=field_4[] id=field_4_option_3 value="M3" />
    <label class=formFieldOption for="field_4_option_3">M3</label>
    <input class=mainForm type=checkbox name=field_4[] id=field_4_option_4 value="M4" />
    <label class=formFieldOption for="field_4_option_4">M4</label>
    <input class=mainForm type=checkbox name=field_4[] id=field_4_option_5 value="M5" />
    <label class=formFieldOption for="field_4_option_5">M5</label>
    <input class=mainForm type=checkbox name=field_4[] id=field_4_option_6 value="M6" />
    <label class=formFieldOption for="field_4_option_6">M6</label>
    <input class=mainForm type=checkbox name=field_4[] id=field_4_option_7 value="M7" />
    <label class=formFieldOption for="field_4_option_7">M7</label></span></li>

     
    • TNTEverett

      TNTEverett - 2008-05-03

      The new form generator uses Java in the form.html file.  I would need to see your form.html and the processor.php file.  If you would like me to help please email a copy of both and I will see what I can do.  Don't forget to add a detailed description of what changes you would like to see.  If you leave the interpretation up to me you will more than likely not get what you are looking for. 

       
      • GungaSF

        GungaSF - 2008-05-03

        tnteveret1,

        I tried sending an email with attachments to your users.sourceforge.net address but it got kicked back.  I'll post the two files here:

        PS:  Thanks for responding to my post and offering to help

        form.html:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html>
            <head>
                <title>sumo - created by phpFormGenerator</title>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8"><link href="style.css" rel="stylesheet" type="text/css">
                <!-- calendar stuff -->
                      <link rel="stylesheet" type="text/css" href="calendar/calendar-blue2.css" />
                      <script type="text/javascript" src="calendar/calendar.js"></script>
                      <script type="text/javascript" src="calendar/calendar-en.js"></script>
                      <script type="text/javascript" src="calendar/calendar-setup.js"></script>
                <!-- END calendar stuff -->

                <!-- expand/collapse function -->
                <SCRIPT type=text/javascript>
                <!--
                function collapseElem(obj)
                {
                    var el = document.getElementById(obj);
                    el.style.display = 'none';
                }

                function expandElem(obj)
                {
                    var el = document.getElementById(obj);
                    el.style.display = '';
                }

                //-->
                </SCRIPT>
                <!-- expand/collapse function -->

                <!-- expand/collapse function -->
                    <SCRIPT type=text/javascript>
                    <!--

                    // collapse all elements, except the first one
                    function collapseAll()
                    {
                        var numFormPages = 1;

                        for(i=2; i <= numFormPages; i++)
                        {
                            currPageId = ('mainForm_' + i);
                            collapseElem(currPageId);
                        }
                    }

                    //-->
                    </SCRIPT>
                <!-- expand/collapse function -->

                 <!-- validate -->
                <SCRIPT type=text/javascript>
                <!--
                    function validateField(fieldId, fieldBoxId, fieldType, required)
                    {
                        fieldBox = document.getElementById(fieldBoxId);
                        fieldObj = document.getElementById(fieldId);

                        if(fieldType == 'text'  ||  fieldType == 'textarea'  ||  fieldType == 'password'  ||  fieldType == 'file'  ||  fieldType == 'phone'  || fieldType == 'website')
                        {   
                            if(required == 1 && fieldObj.value == '')
                            {
                                fieldObj.setAttribute("class","mainFormError");
                                fieldObj.setAttribute("className","mainFormError");
                                fieldObj.focus();
                                return false;                   
                            }

                        }

                        else if(fieldType == 'menu'  || fieldType == 'country'  || fieldType == 'state')
                        {   
                            if(required == 1 && fieldObj.selectedIndex == 0)
                            {               
                                fieldObj.setAttribute("class","mainFormError");
                                fieldObj.setAttribute("className","mainFormError");
                                fieldObj.focus();
                                return false;                   
                            }

                        }

                        else if(fieldType == 'email')
                        {   
                            if((required == 1 && fieldObj.value=='')  ||  (fieldObj.value!=''  && !validate_email(fieldObj.value)))
                            {               
                                fieldObj.setAttribute("class","mainFormError");
                                fieldObj.setAttribute("className","mainFormError");
                                fieldObj.focus();
                                return false;                   
                            }

                        }

                    }

                    function validate_email(emailStr)
                    {       
                        apos=emailStr.indexOf("@");
                        dotpos=emailStr.lastIndexOf(".");

                        if (apos<1||dotpos-apos<2)
                        {
                            return false;
                        }
                        else
                        {
                            return true;
                        }
                    }

                    function validateDate(fieldId, fieldBoxId, fieldType, required,  minDateStr, maxDateStr)
                    {
                        retValue = true;

                        fieldBox = document.getElementById(fieldBoxId);
                        fieldObj = document.getElementById(fieldId);   
                        dateStr = fieldObj.value;

                        if(required == 0  && dateStr == '')
                        {
                            return true;
                        }

                        if(dateStr.charAt(2) != '/'  || dateStr.charAt(5) != '/' || dateStr.length != 10)
                        {
                            retValue = false;
                        }   

                        else    // format's okay; check max, min
                        {
                            currDays = parseInt(dateStr.substr(0,2),10) + parseInt(dateStr.substr(3,2),10)*30  + parseInt(dateStr.substr(6,4),10)*365;
                            //alert(currDays);

                            if(maxDateStr != '')
                            {
                                maxDays = parseInt(maxDateStr.substr(0,2),10) + parseInt(maxDateStr.substr(3,2),10)*30  + parseInt(maxDateStr.substr(6,4),10)*365;
                                //alert(maxDays);
                                if(currDays > maxDays)
                                    retValue = false;
                            }

                            if(minDateStr != '')
                            {
                                minDays = parseInt(minDateStr.substr(0,2),10) + parseInt(minDateStr.substr(3,2),10)*30  + parseInt(minDateStr.substr(6,4),10)*365;
                                //alert(minDays);
                                if(currDays < minDays)
                                    retValue = false;
                            }
                        }

                        if(retValue == false)
                        {
                            fieldObj.setAttribute("class","mainFormError");
                            fieldObj.setAttribute("className","mainFormError");
                            fieldObj.focus();
                            return false;
                        }
                    }
                //-->
                </SCRIPT>
                <!-- end validate -->
            </head>

            <body onLoad="collapseAll()">

            <div id="mainForm">

                <div id="formHeader">
                        <h2 class="formInfo">sumo</h2>
                        <p class="formInfo"></p>
                </div>

                <BR/><!-- begin form -->
                <form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage1();"><ul class=mainForm id="mainForm_1">

                        <li class="mainForm" id="fieldBox_1">
                            <label class="formFieldQuestion">Shikona&nbsp;*</label><input class=mainForm type=text name=field_1 id=field_1 size='20' value=''></li>

                        <li class="mainForm" id="fieldBox_2">
                            <label class="formFieldQuestion">Email&nbsp;*</label><input class=mainForm type=email name=field_2 id=field_2 size=20 value="" style="background-image:url(imgs/email.png); background-repeat: no-repeat;  padding: 2px 2px 2px 25px;"></li>

                        <li class="mainForm" id="fieldBox_3">
                            <label class="formFieldQuestion">Ozeki&nbsp;*</label><span><input class=mainForm type=radio name=field_3 id=field_3_option_1 value="o1" /><label class=formFieldOption for="field_3_option_1">o1</label><input class=mainForm type=radio name=field_3 id=field_3_option_2 value="o2" /><label class=formFieldOption for="field_3_option_2">o2</label><input class=mainForm type=radio name=field_3 id=field_3_option_3 value="o3" /><label class=formFieldOption for="field_3_option_3">o3</label><input class=mainForm type=radio name=field_3 id=field_3_option_4 value="o4" /><label class=formFieldOption for="field_3_option_4">o4</label></span></li>

                        <li class="mainForm" id="fieldBox_4">
                            <label class="formFieldQuestion">Maegashira&nbsp;*</label><span><input class=mainForm type=checkbox name=field_4[] id=field_4_option_1 value="M1" /><label class=formFieldOption for="field_4_option_1">M1</label><input class=mainForm type=checkbox name=field_4[] id=field_4_option_2 value="M2" /><label class=formFieldOption for="field_4_option_2">M2</label><input class=mainForm type=checkbox name=field_4[] id=field_4_option_3 value="M3" /><label class=formFieldOption for="field_4_option_3">M3</label><input class=mainForm type=checkbox name=field_4[] id=field_4_option_4 value="M4" /><label class=formFieldOption for="field_4_option_4">M4</label><input class=mainForm type=checkbox name=field_4[] id=field_4_option_5 value="M5" /><label class=formFieldOption for="field_4_option_5">M5</label><input class=mainForm type=checkbox name=field_4[] id=field_4_option_6 value="M6" /><label class=formFieldOption for="field_4_option_6">M6</label><input class=mainForm type=checkbox name=field_4[] id=field_4_option_7 value="M7" /><label class=formFieldOption for="field_4_option_7">M7</label></span></li>

                <!-- end of this page -->

                <!-- page validation -->
                <SCRIPT type=text/javascript>
                <!--
                    function validatePage1()
                    {
                        retVal = true;
                        if (validateField('field_1','fieldBox_1','text',1) == false)
        retVal=false;
        if (validateField('field_2','fieldBox_2','email',1) == false)
        retVal=false;
        if (validateField('field_3','fieldBox_3','radio',1) == false)
        retVal=false;
        if (validateField('field_4','fieldBox_4','checkbox',1) == false)
        retVal=false;

                        if(retVal == false)
                        {
                            alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
                            return false;
                        }
                        return retVal;
                    }
                //-->
                </SCRIPT>

                <!-- end page validaton -->

                <!-- next page buttons --><li class="mainForm">
                            <input id="saveForm" class="mainForm" type="submit" value="Submit" />
                        </li>

                    </form>
                    <!-- end of form -->
                <!-- close the display stuff for this page -->
                </ul></div><div id="footer"><p class="footer"><a class=footer href=http://phpformgen.sourceforge.net>Generated by phpFormGenerator</a></p></div>

            </body>
            </html>

        and processor.php:

        <?php

        $where_form_is="http://".$_SERVER['SERVER_NAME'].strrev(strstr(strrev($_SERVER['PHP_SELF']),"/"));

        // Checkbox handling
        $field_4_opts = $_POST['field_4'][0].",". $_POST['field_4'][1].",". $_POST['field_4'][2].",". $_POST['field_4'][3].",". $_POST['field_4'][4].",". $_POST['field_4'][5].",". $_POST['field_4'][6];

        $fileLine = "Shikona: " . $_POST['field_1'] . "
        Ozeki: " . $_POST['field_2'] . "
        Email: " . $_POST['field_3'] . "
        Maegashira: $field_4_opts

        ";
        $filename = '../_private/form_results.txt';
        if (is_writable($filename)) {

                        if (!$handle = fopen($filename, 'a'))
                        {
                             echo "Cannot open file ($filename)";
                             exit;
                        }
                        if (fwrite($handle, $fileLine) === FALSE) {
                            echo "Cannot write to file ($filename)";
                            exit;
                        }

                        fclose($handle);

                    } else {
                        echo "The file  is not writable";
                    }

        include("confirm.html");

        ?>

        Thanks again!

        GungaSF

         
        • TNTEverett

          TNTEverett - 2008-05-05

          Use this form.html code.  It has the Java changes to check for radio buttons required, and for checkboxes required with a minimum number required. 

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
              <html>
              <head>
                  <title>sumo - created by phpFormGenerator</title>
                  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                  <link href="style.css" rel="stylesheet" type="text/css">
                  <!-- calendar stuff -->
                  <link rel="stylesheet" type="text/css" href="calendar/calendar-blue2.css"/>
                  <script type="text/javascript" src="calendar/calendar.js"></script>
                  <script type="text/javascript" src="calendar/calendar-en.js"></script>
                  <script type="text/javascript" src="calendar/calendar-setup.js"></script>
                  <!-- END calendar stuff -->

                  <!-- expand/collapse function -->
                  <SCRIPT type=text/javascript>
                  <!--
                  function collapseElem(obj)
                  {
                      var el = document.getElementById(obj);
                      el.style.display = 'none';
                  }

                  function expandElem(obj)
                  {
                      var el = document.getElementById(obj);
                      el.style.display = '';
                  }

                  //-->
                  </SCRIPT>
                  <!-- expand/collapse function -->

                  <!-- expand/collapse function -->
                      <SCRIPT type=text/javascript>
                      <!--

                      // collapse all elements, except the first one
                      function collapseAll()
                      {
                          var numFormPages = 1;

                          for(i=2; i <= numFormPages; i++)
                          {
                              currPageId = ('mainForm_' + i);
                              collapseElem(currPageId);
                          }
                      }

                      //-->
                      </SCRIPT>
                  <!-- expand/collapse function -->

                   <!-- validate -->
                  <SCRIPT type=text/javascript>
                  <!--
          function validateCheckBox(fieldId, fieldBoxId, fieldType, mysize, minrequired) {
            ii=0;
            fieldBox = document.getElementById(fieldBoxId);
            if(minrequired > 0) {
              <!-- Loop through each checkbox to see if any are checked -->
              for( i=1; i<=mysize; i++) {
                myfieldId = fieldId+"_option_"+i;
                fieldObj = document.getElementById(myfieldId);
                if(fieldObj.checked == 1) {
                  <!-- Keep track of the number of checkboxes checked -->
                  ii++;
                  myfieldId = fieldId+"_option_"+i;
                  fieldObj = document.getElementById(myfieldId);
                  fieldObj.setAttribute("class","mainForm");
                  fieldObj.setAttribute("className","mainForm");
                <!-- If not checked return box to highlighted state -->
                } else {
                  fieldObj.setAttribute("class","mainFormError");
                  fieldObj.setAttribute("className","mainFormError");
                }
              }
              if(ii == minrequired) {
                for( i=1; i<=mysize; i++) {
                  <!-- Return all checkboxes to non-highlighted state -->
                  myfieldId = fieldId+"_option_"+i;
                  fieldObj = document.getElementById(myfieldId);
                  fieldObj.setAttribute("class","mainForm");
                  fieldObj.setAttribute("className","mainForm");
                }
                return true;
              }
              fieldObj.focus();
              return false;
            }
          }
          function validateRadio(fieldId, fieldBoxId, fieldType, mysize, required) {
            fieldBox = document.getElementById(fieldBoxId);
            if(required == 1) {
              <!-- Loop through each radio button to see if any are checked -->
              for( i=1; i<=mysize; i++) {
                myfieldId = fieldId+"_option_"+i;
                fieldObj = document.getElementById(myfieldId);
                <!-- If any buttons are checked return every button to non-highlighted state -->
                if(fieldObj.checked == 1) {
                  for( j=1; j<=mysize; j++) {
                    myfieldId = fieldId+"_option_"+j;
                    fieldObj = document.getElementById(myfieldId);
                    fieldObj.setAttribute("class","mainForm");
                    fieldObj.setAttribute("className","mainForm");
                  }
                  <!-- If any button is checked return true condition -->
                  return true;
                <!-- If no buttons are checked return every button to highlighted state -->
                } else {
                  fieldObj.setAttribute("class","mainFormError");
                  fieldObj.setAttribute("className","mainFormError");
                }
              }
              <!-- If no buttons are checked return false condition -->
              fieldObj.focus();
              return false;
            }
          }
                      function validateField(fieldId, fieldBoxId, fieldType, required)
                      {
                          fieldBox = document.getElementById(fieldBoxId);
                          fieldObj = document.getElementById(fieldId);

                          if(fieldType == 'text'  ||  fieldType == 'textarea'  ||  fieldType == 'password'  ||  fieldType == 'file'  ||  fieldType == 'phone'  || fieldType == 'website')
                          {  
                              if(required == 1 && fieldObj.value == '')
                              {
                                  fieldObj.setAttribute("class","mainFormError");
                                  fieldObj.setAttribute("className","mainFormError");
                                  fieldObj.focus();
                                  return false;                  
                              }

                          }

                          else if(fieldType == 'menu'  || fieldType == 'country'  || fieldType == 'state')
                          {  
                              if(required == 1 && fieldObj.selectedIndex == 0)
                              {              
                                  fieldObj.setAttribute("class","mainFormError");
                                  fieldObj.setAttribute("className","mainFormError");
                                  fieldObj.focus();
                                  return false;                  
                              }

                          }

                          else if(fieldType == 'email')
                          {  
                              if((required == 1 && fieldObj.value=='')  ||  (fieldObj.value!=''  && !validate_email(fieldObj.value)))
                              {              
                                  fieldObj.setAttribute("class","mainFormError");
                                  fieldObj.setAttribute("className","mainFormError");
                                  fieldObj.focus();
                                  return false;                  
                              }

                          }

                      }

                      function validate_email(emailStr)
                      {      
                          apos=emailStr.indexOf("@");
                          dotpos=emailStr.lastIndexOf(".");

                          if (apos<1||dotpos-apos<2)
                          {
                              return false;
                          }
                          else
                          {
                              return true;
                          }
                      }

                      function validateDate(fieldId, fieldBoxId, fieldType, required,  minDateStr, maxDateStr)
                      {
                          retValue = true;

                          fieldBox = document.getElementById(fieldBoxId);
                          fieldObj = document.getElementById(fieldId);   
                          dateStr = fieldObj.value;

                          if(required == 0  && dateStr == '')
                          {
                              return true;
                          }

                          if(dateStr.charAt(2) != '/'  || dateStr.charAt(5) != '/' || dateStr.length != 10)
                          {
                              retValue = false;
                          }  

                          else    // format's okay; check max, min
                          {
                              currDays = parseInt(dateStr.substr(0,2),10) + parseInt(dateStr.substr(3,2),10)*30  + parseInt(dateStr.substr(6,4),10)*365;
                              //alert(currDays);

                              if(maxDateStr != '')
                              {
                                  maxDays = parseInt(maxDateStr.substr(0,2),10) + parseInt(maxDateStr.substr(3,2),10)*30  + parseInt(maxDateStr.substr(6,4),10)*365;
                                  //alert(maxDays);
                                  if(currDays > maxDays)
                                      retValue = false;
                              }

                              if(minDateStr != '')
                              {
                                  minDays = parseInt(minDateStr.substr(0,2),10) + parseInt(minDateStr.substr(3,2),10)*30  + parseInt(minDateStr.substr(6,4),10)*365;
                                  //alert(minDays);
                                  if(currDays < minDays)
                                      retValue = false;
                              }
                          }

                          if(retValue == false)
                          {
                              fieldObj.setAttribute("class","mainFormError");
                              fieldObj.setAttribute("className","mainFormError");
                              fieldObj.focus();
                              return false;
                          }
                      }
                  //-->
                  </SCRIPT>
                  <!-- end validate -->
              </head>

              <body onLoad="collapseAll()">

              <div id="mainForm">

                  <div id="formHeader">
                          <h2 class="formInfo">sumo</h2>
                          <p class="formInfo"></p>
                  </div>

                  <BR /><!-- begin form -->
                  <form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage1();""><ul class=mainForm id="mainForm_1">

                          <li class="mainForm" id="fieldBox_1">
                              <label class="formFieldQuestion">Shikona&nbsp;*</label>
                              <input class=mainForm type=text name=field_1 id=field_1 size='20' value=''></li>

                          <li class="mainForm" id="fieldBox_2">
                              <label class="formFieldQuestion">Email&nbsp;*</label>
                              <input class=mainForm type=email name=field_2 id=field_2 size=20 value="" style="background-image:url(imgs/email.png); background-repeat: no-repeat; padding: 2px 2px 2px 25px;"></li>

                          <li class="mainForm" id="fieldBox_3">
                              <label class="formFieldQuestion">Ozeki&nbsp;*</label>
                              <span>
                              <input class=mainForm type=radio name=field_3 id=field_3_option_1 value="o1" />
                              <label class=formFieldOption for="field_3_option_1">o1</label>
                              <input class=mainForm type=radio name=field_3 id=field_3_option_2 value="o2" />
                              <label class=formFieldOption for="field_3_option_2">o2</label>
                              <input class=mainForm type=radio name=field_3 id=field_3_option_3 value="o3" />
                              <label class=formFieldOption for="field_3_option_3">o3</label>
                              <input class=mainForm type=radio name=field_3 id=field_3_option_4 value="o4" />
                              <label class=formFieldOption for="field_3_option_4">o4</label>
                              </span></li>

                          <li class="mainForm" id="fieldBox_4">
                              <label class="formFieldQuestion">Maegashira&nbsp;*</label>
                              <span>
                              <input class=mainForm type=checkbox name=field_4[] id=field_4_option_1 value="M1" />
                              <label class=formFieldOption for="field_4_option_1">M1</label>
                              <input class=mainForm type=checkbox name=field_4[] id=field_4_option_2 value="M2" />
                              <label class=formFieldOption for="field_4_option_2">M2</label>
                              <input class=mainForm type=checkbox name=field_4[] id=field_4_option_3 value="M3" />
                              <label class=formFieldOption for="field_4_option_3">M3</label>
                              <input class=mainForm type=checkbox name=field_4[] id=field_4_option_4 value="M4" />
                              <label class=formFieldOption for="field_4_option_4">M4</label>
                              <input class=mainForm type=checkbox name=field_4[] id=field_4_option_5 value="M5" />
                              <label class=formFieldOption for="field_4_option_5">M5</label>
                              <input class=mainForm type=checkbox name=field_4[] id=field_4_option_6 value="M6" />
                              <label class=formFieldOption for="field_4_option_6">M6</label>
                              <input class=mainForm type=checkbox name=field_4[] id=field_4_option_7 value="M7" />
                              <label class=formFieldOption for="field_4_option_7">M7</label>
                              </span></li>

                  <!-- end of this page -->

                  <!-- page validation -->
                  <SCRIPT type=text/javascript>
                  <!--
                      function validatePage1() {
                        retVal = true;
                        if (validateField('field_1','fieldBox_1','text',1) == false)
                          retVal=false;
                        if (validateField('field_2','fieldBox_2','email',1) == false)
                          retVal=false;
                        if (validateRadio('field_3','fieldBox_3','radio',4,1) == false)
                          retVal=false;
                        if(retVal == false) {
                          alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
                          return false;
                        }
                        if (validateCheckBox('field_4','fieldBox_4','checkbox',7,5) == false)
                          retVal=false;
                        if(retVal == false) {
                          alert('Fields marked with an asterisk (*) are required.  Please check 5 options.');
                          return false;
                        }
                        return retVal;
                      }
                  //-->
                  </SCRIPT>

                  <!-- end page validaton -->

                  <!-- next page buttons --><li class="mainForm">
                              <input id="saveForm" class="mainForm" type="submit" value="Submit" />
                          </li>

                      </form>
                      <!-- end of form -->
                  <!-- close the display stuff for this page -->
                  </ul></div>
                  <div id="footer">
                  <p class="footer">
                  <a class=footer href=http://phpformgen.sourceforge.net>Generated by phpFormGenerator</a>
                  </p>
                  </div>

              </body>
              </html>

           
    • GungaSF

      GungaSF - 2008-05-06

      Worked great!  Thanks a million for your help!

       

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.