#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0

    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
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Hi,

    the logic is wrong.

    You immediately complain about no options being checked when you find an unchecked one. But you need to wait until the loop is over. Only then do you know whether no option is checked.

    In cases like this, it's usually a good idea to leave aside the JavaScript stuff and write down the basic logic as pseudo code:

    Code:
    // We first assume that no option has been checked and
    // then wait for the loop to prove otherwise.
    checked_option_exists := false
    
    each option in options:
    	if option.checked:
    		print "You have checked this option"
    		checked_option_exists := true
    		break
    		
    if not checked_option_exists:
    	print "No option has been checked"
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0
    Originally Posted by Jacques1
    Hi,

    the logic is wrong.

    You immediately complain about no options being checked when you find an unchecked one. But you need to wait until the loop is over. Only then do you know whether no option is checked.

    In cases like this, it's usually a good idea to leave aside the JavaScript stuff and write down the basic logic as pseudo code:

    Code:
    // We first assume that no option has been checked and
    // then wait for the loop to prove otherwise.
    checked_option_exists := false
    
    each option in options:
    	if option.checked:
    		print "You have checked this option"
    		checked_option_exists := true
    		break
    		
    if not checked_option_exists:
    	print "No option has been checked"
    Thanks Jacques1,
    I'm sorry but I'm a bit confused about your explanation. I mean, I completely agree that the logic should be the way you have said, but looking at my code it seems to me that it is following the same logic (obviously it isn't since it doesn't work), this is, first it checks all radio buttons
    Code:
    for(var i=0; i<surgical.length; i++) {    
    		if(surgical[i].checked)
    and then, if this condition is not fulfilled (none of them are checked) then it complains.
    At least this is what I was trying to do
    Could you let me know what exactly is wrong in my code since I'm not able to see it?
    Thanks again
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Check your loop: You test each option. If it is checked, you say that. If it is not checked, you say that no option is checked. That second part is wrong.

    Like I said, you need to wait until the end of the loop before you know whether no option was checked. You don't know that inside the loop.

    So you first need a loop with an if statement which only tests if a particular option is checked. And then you need a second if statement after the loop which tests if no option was checked.

    Your current structure is this:

    javascript Code:
    for (...)
    {
    	if (option.checked)
    	{
    		...		
    	}
    	else
    	{
    		...
    	}
    }

    The correct structure is this:

    javascript Code:
    for (...)
    {
    	if (option.checked)
    	{
    		...
    	}
    }
     
    if (!checked_option_exists)
    {
    	...
    }
    Last edited by Jacques1; February 19th, 2014 at 04:31 AM.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0
    Originally Posted by Jacques1
    Check your loop: You test each option. If it is checked, you say that. If it is not checked, you say that no option is checked. That second part is wrong.

    Like I said, you need to wait until the end of the loop before you know whether no option was checked. You don't know that inside the loop.

    So you first need a loop with an if statement which only tests if a particular option is checked. And then you need a second if statement after the loop which tests if no option was checked.

    Your current structure is this:

    javascript Code:
    for (...)
    {
    	if (option.checked)
    	{
    		...		
    	}
    	else
    	{
    		...
    	}
    }

    The correct structure is this:

    javascript Code:
    for (...)
    {
    	if (option.checked)
    	{
    		...
    	}
    }
     
    if (!checked_option_exists)
    {
    	...
    }
    Now I see, I really appreciate your help.
    This is the first time I've used the "for" structure and I hope I have learned how to use it properly from now on.
    Thanks a lot.
  10. #6
  11. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Sure.

    By the way, please don't fullquote each of my replies. They're right above your posts, so no need to repeat everything.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".

IMN logo majestic logo threadwatch logo seochat tools logo