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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question validate only checkboxes checked from certain area

    hi,

    hope i explain this well enough,

    i have checkboxes that are in tds (table cells) and each td has a unique id, i want to check if there is only checkboxes checked from one of these table cells, else display an error.

    the cell may have no checkboxes checked, just as long as there aren't checkboxes checked in more than one cell..

    also its worth noting the checkboxes arent' static, they are dynamically pulled from a db using php..

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you post some example output from the php?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no worries, here is the output of the fields, out of the three tds here only one shows at a time depending on what my drop down further up does.. i would like to have only checkboxes from the open td be allowed to be checked,

    is it possible to clear the checkboxes when the td is hidden..? If that is not possible maybe i can simply warn the user when checkboxes in more than one of these regions are checked.. in this case i would also have to warn user if the checkboxes that are checked are not in the same region as selected by the dropdown..

    here is the dropdown..
    Code:
    <select name="tradeID" class="formDropDownField" id="tradeID" onChange="expandcontent(this,this.options[this.selectedIndex].value);">
                                <option value="3">Electrician</option>
                                <option value="1">Plasterer</option>
                                <option value="2"selected="selected">Plumber</option>
                              </select>
    heres the tds that are hidden or shown depending on id
    Code:
              		<tr valign="top" id="3" class="switchcontent">
                <th>Types Of Work </th>
                <td>
    <table border="0" cellspacing="0" cellpadding="0" class="borderTop">
    	<tr valign="top">
    	 <td width="179px">
    	</td>
    <td width="179px">
    	            <input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="10">changing light bulbs<br>
    	        <input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="2">wiring boats<br>
    	        <input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="1">wiring houses<br>
    	  		</td>
      </tr>
    </table></td>
      </tr>	<tr valign="top" id="1" class="switchcontent">
                <th>Types Of Work </th>
                <td>
    <table border="0" cellspacing="0" cellpadding="0" class="borderTop">
    	<tr valign="top">
    	 <td width="179px">
    	</td>
    <td width="179px">
    	            <input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="9">sd<br>
    	        <input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="4">wall building<br>
    	  		</td>
      </tr>
    </table></td>
      </tr>	<tr valign="top" id="2" class="switchcontent">
                <th>Types Of Work </th>
                <td>
    <table border="0" cellspacing="0" cellpadding="0" class="borderTop">
    	<tr valign="top">
    	 <td width="179px">
    				  <input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="5" checked>digging holes<br>
    		  			</td>
    <td width="179px">
    	            <input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="3">unblocking pipes<br>
    	  		</td>
      </tr>
    </table></td>
      </tr>
    the expandcontent() function simply expands or contracts the rows..

    let me know if i haven't given enough info

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I see some issues with this. You have used the same name for all of your checkboxes. Each checkbox should have its own name. I know you are trying to create an array on the server side but still each checkbox should have its own name and id.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, how do you suggest i fix this? I am looping through the array to get the checked boxes and add them into database on submit..

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well the javascript likely won't be able to validate the checkboxes because of the duplicate names and ids. You should probably instead of making them all arrays is add 1 to the end of each checkbox name and id.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Oct 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, will that cause php to have errors when i go to loop through checkboxes in the array?

    what if i put the id of the region into the checkbox, such as typeOfWorKID1[], and then when i do the insert loop, loop through that loop one time for each region ID?? This sounds like its possible in php, would this be ok for the javascript?

    also you say 'javascript likely won't be able to validate the checkboxes', is there a chance it may work?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm try this for the js
    Code:
    <script type="text/javascript">
    function validate()
    {
    	var checkboxes = document.getElementsByTagName('input');
    	var count = 0;
    	for(var i = 0; i < checkboxes.length; i++)
    	{
    		if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
    		{
    			count++;
    		}
    	}
    	if(count > 1)
    	{
    		alert('You have chosen more than one checkbox.');
    		for(var j = 0; j < checkboxes.length; j++)
    		{
    			if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
    			{
    				checkboxes[i].checked = 0;
    			}
    		}
    		return false;
    	}
    }
    </script>
    Use
    Code:
    onsubmit="return validate()"
    in the open form tag. The script loops through all inputs looking for checkboxes that are checked. If it finds more than one checkbox that is checked then it resets all checkboxes to the original checked value however now that I think about it, why are you even using checkboxes? Why don't you use radio buttons? Radio buttons can have the same name and only one of them can be chosen.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Oct 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i can't use radio buttons as there can be more than one checkbox checked..

    to try explain it i am inserting tradesmen and each tradesmen has a trade, now this trade can have different types of work that the tradesmen does.

    Hence if the tradesmen selects the wrong trade and checks some types of work, and then he selects the right trade (the types of work he sees change for the different trade) and checks some types of work,

    then his original checks will still be checked but he won't know as that original region is hidden.. all he will see is the checkboxes he just checked..

    i'll have a look at the code u posted now, but i don;t know much about javascript yet.. just fumbling through.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay so only checkboxes in one section can be checked?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Oct 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes thats correct, i just realised from looking at your javascript that you were checking for one checkbox.

    multiple checkboxes may be check in one area, but this cell id must match the selected drop down value..

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    How many options will be in the select menu? Only 3?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New Coder
    Join Date
    Oct 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no this is a dynamic value.. it will have as many options as there are trades and trades can be added over time..

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay give this a try, notice that each section is now its own table. I did this for reasons explained below.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    form {
    margin:0;
    padding:0;
    }
    table.switchcontent {
    display:none;
    }
    table.switchcontent th, table.switchcontent td {
    vertical-align:top;
    }
    td {
    vertical-align:top;
    }
    </style>
    <script type="text/javascript">
    function validate()
    {
    	var menuLength = document.forms[0].tradeID.options.length;
    	var checkboxes;
    	var theid;
    	for(var j = 1; j <= menuLength; j++)
    	{
    		theid = new String('type'+j);
    		checkboxes = document.getElementById(theid).getElementsByTagName('input');
    		if(document.getElementById(theid).style.display == 'none')
    		{
    			for(var i = 0; i < checkboxes.length; i++)
    			{
    				if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
    				{
    					checkboxes[i].checked = 0;
    				}
    			}
    		}
    	}
    }
    function expandcontent(what)
    {
    	var theTables = document.getElementsByTagName('table');
    	for(x = 0; x < theTables.length; x++)
    	{
    		if(theTables[x].className == 'switchcontent')
    		{
    			theTables[x].style.display = 'none';
    		}
    	}
    	document.getElementById(what).style.display = 'block';
    }
    </script>
    </head>
    <body>
    <form onsubmit="return validate()">
    	<select name="tradeID" class="formDropDownField" id="tradeID" onChange="expandcontent(this.options[this.selectedIndex].value);">
    		<option value="type3">Electrician</option>
    		<option value="type1">Plasterer</option>
    		<option value="type2" selected="selected">Plumber</option>
    	</select>
    	<table id="type3" class="switchcontent">
    		<tr>
    			<th>Types Of Work </th>
    			<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
    					<tr >
    						<td width="179"></td>
    						<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="10">
    							changing light bulbs<br>
    							<input name="typeOfWorkID[]" type="checkbox" value="2">
    							wiring boats<br>
    							<input name="typeOfWorkID[]" type="checkbox" value="1">
    							wiring houses<br>
    						</td>
    					</tr>
    				</table></td>
    		</tr>
    	</table>
    	<table id="type1" class="switchcontent">
    		<tr>
    			<th>Types Of Work </th>
    			<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
    					<tr >
    						<td width="179"></td>
    						<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="9">
    							sd<br>
    							<input name="typeOfWorkID[]" type="checkbox" value="4">
    							wall building<br>
    						</td>
    					</tr>
    				</table></td>
    		</tr>
    	</table>
    	<table id="type2" class="switchcontent" style="display:block">
    		<tr>
    			<th>Types Of Work </th>
    			<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
    					<tr >
    						<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="5">
    							digging holes<br>
    						</td>
    						<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="3">
    							unblocking pipes<br>
    						</td>
    					</tr>
    				</table></td>
    		</tr>
    	</table>
    	<input type="submit" value="Submit">
    </form>
    </body>
    </html>
    It doesn't matter how many options there are in the select menu. A few things you will have to change though. For the option values you need to make them type1, type2, type3, etc. You also need to apply the class switchcontent to the a table rather than the tr since its read only its adding extra space. Just follow the formatting of the example and it should work. The last table displayed that had checkboxes will be the ones that stay checked. If the user checks a box in another section that is hidden and checks one in a section not hidden then onsubmit the hidden section checkboxes will be cleared and the section still visible will have its checkboxes remained checked.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    New Coder
    Join Date
    Oct 2006
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, i havent been able to get this going, firstly the tables don't collapse for me, but when i put the id oin the row they do..? Do i need to use tables for the code to work or will it recognise tr's the same as tables?

    so i have the table rows working correctly but the function validate() doesn't seem to be working.. is this because i have an action on the form? maybe i can put the acxtion into the javascript and it will work??

    here is my javascript in the head

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><!-- InstanceBegin template="/Templates/template_admin.dwt.php" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Trade Hunter Admin</title>
    <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" -->
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    form {
    margin:0;
    padding:0;
    }
    table.switchcontent {
    display:none;
    }
    table.switchcontent th, table.switchcontent td {
    vertical-align:top;
    }
    td {
    vertical-align:top;
    }
    </style>
    <script type="text/javascript">
    function validate()
    {
    	var menuLength = document.forms[0].tradeID.options.length;
    	var checkboxes;
    	var theid;
    	for(var j = 1; j <= menuLength; j++)
    	{
    		theid = new String('type'+j);
    		checkboxes = document.getElementById(theid).getElementsByTagName('input');
    		if(document.getElementById(theid).style.display == 'none')
    		{
    			for(var i = 0; i < checkboxes.length; i++)
    			{
    				if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
    				{
    					checkboxes[i].checked = 0;
    				}
    			}
    		}
    	}
    }
    </script>
    <script type="text/javascript">
    
    /***********************************************
    * Switch Content script II- &#169; Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for legal use. Last updated April 2nd, 2005.
    * Visit http://www.dynamicdrive.com/ for full source code
    * Modified by jscheuer1 in http://www.dynamicdrive.com/forums to
    * initially be closed and allow for persistence in Opera
    ***********************************************/
    
    var initialstate=0 //0 for contracted, 1 for expanded
    var enablepersist="off" //Enable saving state of content structure using session cookies? (on/off)
    var memoryduration="7" //persistence in # of days
    
    var contractsymbol='images/arrow_down.gif' //Path to image to represent contract state.
    var expandsymbol='images/paging_right_small.gif' //Path to image to represent expand state.
    var imageStateVar ='images/arrow_down.gif'//var by john for mouse overs
    
    /////No need to edit beyond here //////////////////////////
    
    if(!initialstate){
    if(document.getElementById)
    document.write('<style id="styletest" type="text/css">\
    #nothing {\
    }\
    <\/style>')
    
    if(typeof document.getElementById('styletest').disabled=='boolean')
    document.write('<style id="added" type="text/css">\
    .switchcontent{\
    display:none;\
    }\
    <\/style>')
    }
    
    function getElementbyClass(rootobj, classname){
    var temparray=new Array()
    var inc=0
    var rootlength=rootobj.length
    for (i=0; i<rootlength; i++){
    if (rootobj[i].className==classname)
    temparray[inc++]=rootobj[i]
    }
    return temparray
    }
    
    
    function sweeptoggle(ec, operaFlag){
    var inc=0
    while (ccollect[inc]){
    ccollect[inc].style.display=ec=="contract"? "none" : ""
    inc++
    }
    revivestatus()
    if (enablepersist=="on"&&window.opera&&!operaFlag)
    saveswitchstate();
    }
    
    function expandcontent(curobj, cid){
    if(!initialstate){
    sweeptoggle('contract', 1)
    document.getElementById('added').disabled=true
    }
    if (ccollect.length>0){
    var el=document.getElementById(cid)
    el.style.display=el.style.display!="none"? "none" : ""
    curobj.src=(el.style.display=="none")? expandsymbol : contractsymbol
    imageStateVar=(el.style.display=="none")? expandsymbol : contractsymbol
    }
    if (enablepersist=="on"&&window.opera)
    saveswitchstate();
    }
    
    function revivecontent(){
    selectedItem=getselectedItem()
    selectedComponents=selectedItem.split("|")
    for (i=0; i<selectedComponents.length-1; i++){
    document.getElementById(selectedComponents[i]).style.display=initialstate? "none" : ""
    }
    }
    
    function revivestatus(){
    var inc=0
    while (statecollect[inc]){
    if (ccollect[inc].style.display=="none")
    statecollect[inc].src=expandsymbol
    else
    statecollect[inc].src=contractsymbol
    inc++
    }
    }
    
    function get_cookie(Name) { 
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { 
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    function getselectedItem(){
    if (get_cookie(window.location.pathname) != ""){
    selectedItem=get_cookie(window.location.pathname)
    return selectedItem
    }
    else
    return ""
    }
    
    function saveswitchstate(){
    var inc=0, selectedItem=""
    while (ccollect[inc]){
    if (!initialstate&&ccollect[inc].style.display!=="none"||initialstate&&ccollect[inc].style.display=="none")
    selectedItem+=ccollect[inc].id+"|"
    inc++
    }
    if (get_cookie(window.location.pathname)!=selectedItem){ //only update cookie if current states differ from cookie's
    var expireDate = new Date()
    expireDate.setDate(expireDate.getDate()+parseInt(memoryduration))
    document.cookie = window.location.pathname+"="+selectedItem+";path=/;expires=" + expireDate.toGMTString()
    }
    }
    
    function do_onload(){
    uniqueidn=window.location.pathname+"firsttimeload"
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    ccollect=getElementbyClass(alltags, "switchcontent")
    statecollect=getElementbyClass(alltags, "showstate")
    if(!initialstate){
    sweeptoggle('contract', 1)
    document.getElementById('added').disabled=true
    expandcontent(this,'')
    }
    if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && ccollect.length>0)
    revivecontent()
    if (ccollect.length>0 && statecollect.length>0)
    revivestatus()
    }
    
    if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
    else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
    else if (document.getElementById)
    window.onload=do_onload
    
    if (enablepersist=="on" && document.getElementById)
    window.onunload=saveswitchstate
    
    </script>
    and here is my form as 'view source' compiled from php..

    Code:
    <form onsubmit="return validate()" action="/tradehunter/admin/tradesmen_add.php?" method="POST" name="tradesmenForm" id="tradesmenForm">
            <table border="0" cellpadding="0" cellspacing="0" class="tableForm">
              <tr>
                <th>Business Name</th>
                <td width="350"><input name="businessName" type="text" class="formTextField" id="businessName" value=""></td>
              </tr>
              <tr>
                <th>Trade</th>
            <td><select name="tradeID" class="formDropDownField" onChange="expandcontent(this,this.options[this.selectedIndex].value);">
                  <option value="selected="selected""></option>
                                                                                        <option value="3">Electrician</option>
                                <option value="1">Plasterer</option>
                                <option value="2">Plumber</option>
                              </select></td>
              </tr>
    	<tr id="3" class="switchcontent">
                <th valign="top">Types Of Work</th>
    <td class="borderTop">
    	<table border="0">
                      <tr>
                      <td>
    	<table>
    	<td>
    	<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="10">
                      changing light bulbs<br>
    	<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="2">
                      wiring boats<br>
    	<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="1">
                      wiring houses<br>
    </td></tr></table>
    </td>
    	</tr>
                  </table></td>
              </tr>
    <tr id="1" class="switchcontent">
    <th valign="top">Types Of Work</th>
    <td class="borderTop">
    	<table border="0">
                      <tr>
                      <td>
    	<table>
    	<td>
    	<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="9">
                      sd<br>
    		<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="4">
                      wall building<br>
    </td></tr></table></td>
    	</tr>
                  </table></td>
              </tr>
    <tr id="2" class="switchcontent">
    <th valign="top">Types Of Work</th>
    <td class="borderTop">
    	<table border="0">
                      <tr>
                      <td>
    	<table>
    	<td><input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="5">
                      digging holes<br>
    	<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="3">
                      unblocking pipes<br>
    </td></tr></table></td>
    	</tr>
                  </table></td>
              </tr>
    	<tr>
                <td></td>
                <td><input name="Submit" type="submit" class="formButton" value="Submit"></td>
              </tr>
            </table>
            <input type="hidden" name="MM_insert" value="tradesmenForm">
    
          </form>
    Last edited by john6767; 10-12-2006 at 11:52 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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