Javascript validation with html radiobuttons

aselden · Feb 27, 2012

Hello! I was hoping someone would be able to give me some pointers with a problem of mine.

My code does not return true even when the the correct radiobutton is checked. Any help is appreciated!

<html>
<head>
<script type="text/javascript">
function validateForm()
{
var e=document.forms["myForm"]["guardiansPermission"].value;
if (e==null || e=="" || e==0)
{
alert("Permission must be given.");
return false;
}
</script>
</head>

<body>
<form name="myForm" action="form.asp" onsubmit="return validateForm()" method="post">
<input type='radio' name='guardiansPermission' value='1'> Yes
<input type='radio' name='guardiansPermission' value='0' checked> No
<input type="submit" value="Submit">
</form>
</body>

</html>

vacunita · Feb 27, 2012

Assuming the missing curly brace "}" that should close your function is not actually missing in your real code, the problem is that you are treating your radio buttons as a single element.

To Javascript two or more Radio buttons with the same name will be treated as an array. So you want to check either that the first radio button is checked or that the second radio button is unchecked.

Code:

var e=dcument.forms["myForm"]["guardiansPermission"];
if (e[0].checked!=true)
  {
  alert("Permission must be given.");
  return false;
  }

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

aselden · Feb 29, 2012

Thank you for the help Vacunita, unfortionatly i still cannot get this to work, after applying your code it still jumps straight to the form's action.

Must i fetch the radiobuttons as an array or something like that?Been working this for a while now so any pointers are welcome!

Quite new to javascript to be honest!

feherke · Feb 29, 2012

Hi

It works for me after correcting the obvious typo. Did you corrected it ?

Code:

[b]var[/b] e[teal]=[/teal]d[highlight]o[/highlight]cument[teal].[/teal]forms[teal][[/teal][green][i]"myForm"[/i][/green][teal]][[/teal][green][i]"guardiansPermission"[/i][/green][teal]];[/teal]

If still not works, post your modified code.

Next time please post your code between [tt][ignore]

Code:

[/ignore][/tt] and [tt][ignore]

[/ignore][/tt] TGML tags.

Feherke.

http://feherke.github.com/

aselden · Feb 29, 2012

Solved my problem! Thank you for the help!

For others with the same problem:

<code>
<html>
<head>
<script type="text/javascript">
function validateForm()
{
if(document.getElementById('test').checked!=true) {
alert("Permission must be given.");
return false;
}
}
</script>
</head>

<body>
<form name="myForm" action="form.asp" onsubmit="return validateForm()" method="post">
<input type='radio' name='guardiansPermission' id='test' value='1'> Yes
<input type='radio' name='guardiansPermission' id='two' value='0' checked> No
<input type="submit" value="Submit">
</form>
</body>

</html>
</code>

aselden · Feb 29, 2012

Yes, i corrected that part, and whops. Used to html tags!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript validation with html radiobuttons

aselden

Programmer

vacunita

Programmer

aselden

Programmer

feherke

Programmer

aselden

Programmer

aselden

Programmer

Similar threads

Part and Inventory Search

Sponsor