Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    help with checkbox array

    I have two sets of checkboxes on my page. The first set, if I plan to attend radio button is selected then 1 of the 4 checkboxes are required:

    Instead of writing out 4 separate lines for each checkbox,

    Code:
    function requireNumber(field)
    {
         if(document.forms[0].Attendance1.checked && document.forms[0].attend_fa.checked == false && document.forms[0].attend_tb.checked == false ...)
        {
           alert ("Choose a checkbox under the I plan to attend section");
    	   return false;
        }
           return true;
    }

    how can I put them into an array? (They have to be distinct because of other checkboxes on the page.

    So I tried something like this that finds the prefix "attend_" but then I get stuck on what to do:
    Code:
    <script language="JavaScript" type="text/javascript">	
       	var len = document.forms[0].elements.length; 
    	for (var i=0; i<len; i++)
    	{		
              var fname = document.forms[0].elements[i].name;
              if (fname.length > 8 && ( fname.substring(0,7) == 'attend_')) {
    		find those related fields and then if they are not checked, popup an alert");
              }
    	}
    </script>

    Code:
    <tr valign="top"> 
    			<td class="a-body" colspan="3"><input type="radio" name="Attendance1" value="Plan to attend"> I plan to attend, however no payment is required at this time. for the reason stated below. See <a href="">link</a> for additional information.</td>
    			</tr>
    			<tr valign="top"> 
    			<td class="a-body" width="30%" align="right">&nbsp;</td>
    			<td width="2"></td>
    			<td class="a-body"width="70%">
    				<table border="0" cellpadding="3" cellspacing="2">
                        <tr valign="top">
                        <td><input name="fa" type="checkbox" value="I have Financial Aid to cover my term balance"></td>
                        <td>This certifies that I have Financial Aid<br />
                        <textarea name="Non pending financial aid" size="80" rows="4"></textarea></td>
                        </tr>
                        <tr valign="top">
                        <td><input name="tb" type="checkbox" value="I have a tuition benefit covering my term balance"></td>
                        <td>This certifies that I have a tuition benefit covering my term balance. </td>
                        </tr>
                        <tr valign="top">
                        <td><input name="gc" type="checkbox" value="I am on Graduate Contract"></td>
                        <td>This certifies I am on Graduate Contract. </td>
                        </tr>
                        <tr valign="top">
                        <td><input name="tp" type="checkbox" value="Third party covers the cost of my tuition and fees"></td>
                        <td>This certifies that third party covers the cost of my tuition and fees</td>
                        </tr>
    				</table>
    			</td>
    			</tr>
    Can someone help?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function requireNumber()
    {
      var frm = document.forms[0];
      if (frm.Attendance1.checked && !hasChecked(['fa', 'tb', 'gc', 'tp'], frm))
      {
        alert("Choose a checkbox under the I plan to attend section");
        return false;
      }
      return true;
    }
    
    function hasChecked(arrChk, frm){
      for (var i=0; i<arrChk.length; i++){
        if (frm.elements[arrChk[i]].checked) return true;
      }
      return false;
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    oh man that is beautiful. Thank you!

    I'll give it a go and see what happens

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ok I got it to work with my form but when I add the second radio, the form is submitting with validating either radios. The second set is also named Attendance1

    Code:
    <tr valign="top"> 
    			<td class="a-body" colspan="3"><input type="radio" name="Attendance2" value="Not attending"> 
    			I am <strong>NOT</strong> planning to attend - cancel my registration for the term above.</td>
    			</tr>
    			<tr valign="top"> 
    			<td class="a-body" width="30%" align="right">&nbsp;</td>
    			<td width="2"></td>
    			<td class="a-body"width="70%">
    			<input name="ha" type="checkbox" value="Cancel my housing assignment">
    			Cancel my housing assignment <br>
    			<input name="dp" type="checkbox" value="Cancel my dining plan">
    			Cancel my dining plan <br></td>
    			</tr>

    so I tried adding to the script.

    Code:
    function reqAttend()
    {
      var frm = document.forms[0];
      if (frm.Attendance1.checked && !hasChecked(['fa', 'tb', 'gc', 'tp'], frm))
    	{
        	alert("Choose a checkbox under the I plan to attend section");
        	return false;
    	}	
    else if (frm.Attendance1.checked && !hasChecked(['ha', 'dp'], frm))
      	{
      		alert("Choose a checkbox under the I am NOT planning to attend section");
        	return false;
    	}	
      return true;
    }
    function hasChecked(arrChk, frm)
    {
    	var frm = document.forms[0];
      	for (var i=0; i<arrChk.length; i++){
        if (frm.elements[arrChk[i]].checked) return true;
      }
      return false;
    }
    I'd really like to understand what is going on as opposed to just cutting and paste the solution code. The hasChecked function basically loops through the entire form to see what elements are checked correct?

    So why does the validation not work when I add the else if statement?

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I got it to work. Looks like I needed to loop thru the 2 attendance radios to see if they were checked. Thanks again for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •