www.webdeveloper.com
Results 1 to 7 of 7

Thread: Radio button validation

  1. #1
    Join Date
    Feb 2014
    Posts
    3

    Radio button validation

    Hello,
    I'm just trying to validate that a radio button is checked. I know this is quite basic but I'm not able to get what I'm looking for. For some reason my code only works when the 1st option is checked but when the 2nd option is checked it behaves as if none of them was marked.
    I'm pretty new to JavaScript so I can't find out what's wrong in my code.
    Thank you for your help.

    My code is:

    Code:
    <html><head>
    
    <script language="javascript">
    	
    	function validacionArea2() {
    		
    	var surgical = document.getElementsByName("surgical");
    	var surgicalcheck = false;
    	
    	for(var i=0; i<surgical.length; i++) {    
    		if(surgical[i].checked) {
    			surgicalcheck = true;
    			alert('hay alguno seleccionado')
    			break;
    		} else {
    			alert('no hay ninguno seleccionado')
    			break;
    		}
    	}
    		
    	}
    	
    	
    </script>
    
    
    <title>Freelancer</title>
    
    </head>
    
    <body>
    
    				<div class="label3">Surgical procedures?</div>
    				<input type="radio" class="bigradio" name="surgical" value="a"><label>a</label>	
    				<input type="radio" class="bigradio" name="surgical" value="b"><label>b</label>
    				<input type="button" onclick="validacionArea2()"
    	
    </body>
    </html>

  2. #2
    Join Date
    Feb 2014
    Posts
    3
    Quote Originally Posted by Wyoming View Post
    Hello,
    I'm just trying to validate that a radio button is checked. I know this is quite basic but I'm not able to get what I'm looking for. For some reason my code only works when the 1st option is checked but when the 2nd option is checked it behaves as if none of them was marked.
    I'm pretty new to JavaScript so I can't find out what's wrong in my code.
    Thank you for your help.

    My code is:

    Code:
    <html><head>
    
    <script language="javascript">
    	
    	function validacionArea2() {
    		
    	var surgical = document.getElementsByName("surgical");
    	var surgicalcheck = false;
    	
    	for(var i=0; i<surgical.length; i++) {    
    		if(surgical[i].checked) {
    			surgicalcheck = true;
    			alert('hay alguno seleccionado')
    			break;
    		} else {
    			alert('no hay ninguno seleccionado')
    			break;
    		}
    	}
    		
    	}
    	
    	
    </script>
    
    
    <title>Freelancer</title>
    
    </head>
    
    <body>
    
    				<div class="label3">Surgical procedures?</div>
    				<input type="radio" class="bigradio" name="surgical" value="a"><label>a</label>	
    				<input type="radio" class="bigradio" name="surgical" value="b"><label>b</label>
    				<input type="button" onclick="validacionArea2()"
    	
    </body>
    </html>
    Now I have realised my mistake. I must take the "else" part out of the loop. That way it works:
    Code:
    function validacionArea2() {
    		
    	var surgical = document.getElementsByName("surgical");
    	var surgicalcheck = false;
    	
    	for(var i=0; i<surgical.length; i++) {    
    		if(surgical[i].checked) {
    			surgicalcheck = true;
    			break;
    		} 
    	}
    		
    		alert(surgicalcheck)
    	}

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440
    An alternative solution...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <input type="radio" name="surgical" value='Yes'> Yes 
    <input type="radio" name="surgical" value='No'> No 
    
    <script type="text/javascript">
    function validacionArea2() {
      var surgical = document.getElementsByName("surgical");
      var surgicalcheck = -1;
      for(var i=0; i<surgical.length; i++) {    
        if(surgical[i].checked) { surgicalcheck = i; } 
      }
    //  return surgicalcheck;  // allows delayed validation of user response
      if (surgicalcheck != -1) { alert('surgical: '+surgicalcheck+' or '+surgical[surgicalcheck].value); }
                          else { alert('No surgical selection made'); }
    }
    window.onload = function() {
      var sel = document.getElementsByName('surgical');
      for (var i=0; i<sel.length; i++) { sel[i].onclick = validacionArea2; }
    }
    </script>
    
    </body>
    </html>
    Note: It could be made more generic if more named radio buttons need to be validated.

    Good Luck!

  4. #4
    Join Date
    Feb 2014
    Posts
    3
    Sorry for not answering before, JMRKER, I wasn't aware of your post :S
    Thanks a lot for your help, it has been really helpful. I'm pretty new to JavaScript and I really appreciate this kind of tips.

  5. #5
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    Are you getting your checkboxes and radio buttons mixed up? Checkboxes are stand alone as to whether they are checked or not but radio buttons come in sets. This round robin generator has several sets of radio buttons but only one checkbox.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,440
    I don't see any reference to checkboxes in the original post.

  7. #7
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    Sorry, I missed the [i] in the original post.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles