SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    checkbox and textbox validation prolem

    I have a form with multiple checkboxes. and the checkbox has a corresponding textbox for a write in value.
    I would like to make sure that the textbox can only be filled in if the corresponding checkbox is checked and if that same checkbox is then unchecked then the textbox value is cleared out.


    if I checked a check box then that corresponding textfiled has to be enabled and user must enter a value in the text box,
    Note:all textbox and checkbox dynamically creating.
    please help me

    thanks
    Last edited by aniltc; Apr 14, 2008 at 23:27.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Code css:
    .disabled {
        background: silver;
    }

    Code javascript:
    function enableByCheckbox(elemId, checkbox) {
        elem = document.getElementById(elemId);
        if (checkbox.checked) {
            elem.disabled = null;
            elem.className = '';
        } else {
            elem.disabled = true;
            elem.className = 'disabled';
        }
    }

    Code html4strict:
    <input type="checkbox" id="myCheckbox"><br>
    <input type="text" id="myTextbox">

    After the page has loaded, run the following script. Place this code at the end of the body, or use some kind of onload technique.

    Code javascript:
    var checkbox = document.getElementById('myCheckbox');
    checkbox.onclick = function () {
    	enableByCheckbox('myElem', this);
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its not working in my case
    I am geeting all the textboxes and chckbox dynamically

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is the full test code that has been tweaked to allow it to be extended more easily.

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <style type="text/css">
    .disabled {
        background: silver;
    }
    </style>
    <script>
    function enableByCheckbox(elemId, checkbox) {
        elem = document.getElementById(elemId);
        if (checkbox.checked) {
            elem.disabled = null;
            elem.className = '';
        } else {
            elem.disabled = true;
            elem.className = 'disabled';
        }
    }
    </script>
    </head>
    <body>
    <p><input type="checkbox" id="myCheckbox1">
    <input type="text" id="myTextbox1"></p>
    <p><input type="checkbox" id="myCheckbox2">
    <input type="text" id="myTextbox2"></p>
    <script>
    var checkboxes = [
    	['myCheckbox1', 'myTextbox1'],
    	['myCheckbox2', 'myTextbox2']
    ];
    var checkbox;
    for (var i = 0; i < checkboxes.length; i++) {
    	checkbox = document.getElementById(checkboxes[i][0]);
    	checkbox.onclick = function (textboxId) {
    		return function() {
    			enableByCheckbox(textboxId, this);
    		}
    	}(checkboxes[i][1]);
    	checkbox.onclick();
    }
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice,its working
    but this logic doesn't work for dynamic textbox and checkbox ? That is what i am trying.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Please explain further, perhaps with an instructive example or two. In the meantime I'll come back to this in the morning.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    suppose my check box name is same how i can implement this same code and text boxex name also same (i can use arrays such as



    <tr>
    <td><input type="checkbox" name="setcurrent" value="1"> </td>
    <td>blah1</td>
    <td><input type="text" name="eposition[]" size="3"/></td>
    </tr>
    <tr>
    <td><input type="checkbox" name="setcurrent" value="2"></td>
    <td>blah2</td>
    <td><input type="text" name="eposition[]" size="3" /></td>
    </tr>
    <tr>
    <td><input type="checkbox" name="setcurrent" value="3"></td>
    <td>blah3</td>
    <td><input type="text" name="eposition[]" size="3" /></td>
    </tr>
    <tr>
    <td><input type="checkbox" name="setcurrent" value="4"></td>
    <td>blah4</td>
    <td><input type="text" name="eposition[]" size="3" /></td>
    </tr>
    <tr>
    <td colspan="3"><input type="submit" value="submit" /></td>
    </tr>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You would use getElementByName('setcurrent') and getElementByName('eposition[]') as the two arrays instead.

    Then the code becomes

    Code javascript:
    var checkboxes = getElementByName('setcurrent');
    var textboxes = getElementByName('eposition[]');
    var checkbox;
    for (var i = 0; i < checkboxes.length; i++) {
        checkbox = document.getElementById(checkboxes[i]);
        checkbox.onclick = function (textboxId) {
            return function() {
                enableByCheckbox(textboxId, this);
            }
        }(textboxes[i]);
        checkbox.onclick();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,I have now a clear solutions just check.


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<title>www.w3answers.com</title>
    
    		<script type="text/javascript">
    
    
    
    
    function trim(s)
    	 {
        return s.replace(/^\s+|\s+$/g,"");
         }
    
    
    
    
    function validate(form) {
    
    
    //var val; 
    
    
    var checkSelected=false;
    var count=0;
          for(var i=0;i<=3;i++)
              { 
    
    var cust= eval('document.f1.setcurrent'+i);
    
               if (cust.checked){
    count=count+1;
             checkSelected=true;   
       	
    }
    
    	}
    
    
    if(count>=3)
    {
    alert("You can't select morethan two values at a time!!!!!");
    return false;
    }   
    
    if(!checkSelected){
              alert("Please select at least one checkbox.");
              return false;
            }
    
                                    
                                 
    				var ok = true;
    				var errors = new Array();
    				var usedPositions = new Array();
    				//var positions = document.getElementsByName("eposition[]");
    				//var boxes = document.getElementById("d"+[x]);
    //document.getElementsByName("setcurrent");
    				var checkbox;
    
    
    
    
    
    
    
    
    
    
    
    
    
    				for (var x = 0; x<=3; x++) {
    
    
    
    if (document.getElementById("d"+[x]).checked && (!document.getElementById("setkey"+[x]).value)) {
    						errors.push("Please enter a text into the textbox-"+(x+1) );
                                                    document.getElementById("setkey"+[x]).focus();
     						ok = false;
    
    					}
    					
    					if (document.getElementById("setkey"+[x]).value && !document.getElementById("d"+[x]).checked) {
    						errors.push("Please check the box for the  textbox-"+(x+1));
                                                    document.getElementById("setkey"+[x]).focus();
    						ok = false;
    					}
    					
                                           if (inArray(document.getElementById("setkey"+[x]).value, usedPositions)) {
                                                        
                                                
    						errors.push("you have entered same text more than once");
                                                    document.getElementById("setkey"+[x]).focus();
    						ok = false;
                                                     break;
    					}
    					
    					
    					if (document.getElementById("setkey"+[x]).value) {
    						usedPositions.push(document.getElementById("setkey"+[x]).value);
    					}
    
    
    
    reWhiteSpace = new RegExp(/^\s+|\s+$/);
         if (reWhiteSpace.test(document.getElementById("setkey"+[x]).value)) {
    		  var s=document.getElementById("setkey"+[x]).value;
    		  alert("Spaces are not allowed");
    		  document.getElementById("setkey"+[x]).value=trim(s);
    		
    
    		  return false;
         }
    
    
    
    
    
    				}
    
    
    
    
    				
    				if (errors.length > 0) {
    					alert("Please correct the following errors:\n"
    						+ errors.join("\n"));
    				}
    				
    				return ok;
    			}
    			
    			function inArray(needle, haystack) {
    				var found = false;
    				for (var x = 0; x < haystack.length; x++) {
    					if (needle == haystack[x]) {
    						found = true;
    					}
    				}
    				return found;
    			}
    
    
    function t()
    
    {
    
    //var positions = document.getElementsByName("eposition[]");
    for (var x = 0; x <4 ; x++) {
    					
    			
    
    if(document.getElementById("d"+[x]).checked)
    
    {
    if(document.getElementById("setkey"+[x]).value=="")
    {
    
    alert("enter a value in the corespondibg text box");
    document.getElementById("setkey"+[x]).focus();
    break;
    }
    
    }
    
    else {
    
    document.getElementById("setkey"+[x]).value="";
    document.getElementById("setkey"+[x]).focus();
    
    
    
    
    }
    }
    
    
    }
    
    
    
    
    
    		</script>
    
    	</head>
    
    	<body>
    		<form method="post" action="a.php" name="f1" onsubmit="return validate(this);">
    			<table>
    				
    				<tr>
    					<td><input type="checkbox"  id="d0"  onClick="t();" name="setcurrent0" value="1"> </td>
    					<td id="i0">www.w3answers.com</td>
    					<td><input type="text" id="setkey0" name="eposition1" size="3"/></td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" id="d1"  onClick="t();"  name="setcurrent1" value="2"></td>
    					<td id="i1">www.referads.com</td>
    					<td><input type="text" id="setkey1" name="eposition2" size="3" /></td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" id="d2"  onClick="t();" name="setcurrent2" value="3"></td>
    					<td id="i2">www.w3tips.com</td>
    					<td><input type="text" id="setkey2" name="eposition3" size="3"  /></td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" id="d3"  onClick="t();" name="setcurrent3" value="4"></td>
    					<td id="i3">www.w3answer.com</td>
    					<td><input type="text" id="setkey3" name="eposition4" size="3"   /></td>
    				</tr>
    				<tr>
    					<td colspan="3"><input type="submit" value="submit" /></td>
    				</tr>
    			</table>
    			
    		</form>
    	</body>
    </html>

  10. #10
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have other problem.when i click on a checkbox i want that checkbox coresponding name. for eg:


    HTML Code:
    <tr>
    					<td><input type="checkbox"  id="d0"  onClick="t();" name="setcurrent0" value="1"> </td>
    					<td id="i0">www.w3answers.com</td>
    					<td><input type="text" id="setkey0" name="eposition1" size="3"/></td>
    				</tr>
    I need the name www.w3answers.com from the
    <td id="i0">www.w3answers.com</td>.How can i take from <td>.please help me to do.
    thanks

    full Html code below

    HTML Code:
    <body>
    		<form method="post" action="a.php" name="f1" onsubmit="return validate(this);">
    			<table>
    				
    				<tr>
    					<td><input type="checkbox"  id="d0"  onClick="t();" name="setcurrent0" value="1"> </td>
    					<td id="i0">www.w3answers.com</td>
    					<td><input type="text" id="setkey0" name="eposition1" size="3"/></td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" id="d1"  onClick="t();"  name="setcurrent1" value="2"></td>
    					<td id="i1">www.referads.com</td>
    					<td><input type="text" id="setkey1" name="eposition2" size="3" /></td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" id="d2"  onClick="t();" name="setcurrent2" value="3"></td>
    					<td id="i2">www.w3tips.com</td>
    					<td><input type="text" id="setkey2" name="eposition3" size="3"  /></td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" id="d3"  onClick="t();" name="setcurrent3" value="4"></td>
    					<td id="i3">www.w3answer.com</td>
    					<td><input type="text" id="setkey3" name="eposition4" size="3"   /></td>
    				</tr>
    				<tr>
    					<td colspan="3"><input type="submit" value="submit" /></td>
    				</tr>
    			</table>
    			
    		</form>
    	</body>


Bookmarks

Posting Permissions

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