problems completing myvalidation

[bajanstar]

<TR >
<TD align="left" valign="top">
<TABLE border=0 cellspacing=0 cellpadding=0>
<TR>
<TD><INPUT type="radio" name="pay" id="pay" value="Visa"></TD>
<TD>&nbsp;</TD>
<TD>Visa&nbsp;</TD>
</TR>
<TR>
<TD><INPUT type="radio" name="pay" id="pay" value="Master Card"></TD>
<TD>&nbsp;</TD>
<TD>Master Card&nbsp;</TD>
</TR>
<TR>
<TD><INPUT type="radio" name="pay" id="pay" value="American Express"></TD>
<TD>&nbsp;</TD>
<TD>American Express&nbsp;</TD>
</TR>
<TR>
<TD><INPUT type="radio" name="pay" id="pay" value="Other"></TD>
<TD>&nbsp;</TD>
<TD><table border=0 cellspacing=0 cellpadding=0>
<tr>
<td>Other&nbsp;</td>
<td><input type=text name="pay" id="checkpay" value="" size="15"></td>
</tr>
</table>
</TD>
</TR>
</TABLE>


I want to do a validation code for these radio button, that the user would have to click one of the buttons. But i dont know how to go about doing. I got the validation rules for the other stuuf working but i dont know how to do it with radio buttons.



<script language="javascript">
function form_Validator(form)
{

if (form.first_name.value == "")
{
alert("Please enter your first name.");
form.first_name.focus();
return (false);
}

if (form.last_name.value == "")
{
alert("Please enter your last name.");
form.last_name.focus();
return (false);
}

if (form.address.value == "")
{
alert("Please enter your address.");
form.address.focus();
return (false);
}
if (form.acode.value == "")
{
alert("Please enter the area code.");
form.acode.focus();
return (false);
}
if (form.phone.value == "")
{
alert("Please enter your telephone number.");
form.phone.focus();
return (false);
}

return (true);
}
//-->

[agent002]

radio buttons are a little tricky, but I have a nice function for getting the selected value of a radio group.
<script language="javascript">
***tion getRadio(radioName){
var inputs = document.getElementsByTagName('input');
var ret = null;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == 'radio' && (inputs[i].name == radioName || inputs[i].id == radioName) && inputs[i].checked){
ret = inputs[i].value;
}
}
return ret;
}


function form_Validator(form)
{

if (form.first_name.value == "")
{
alert("Please enter your first name.");
form.first_name.focus();
return (false);
}

if (form.last_name.value == "")
{
alert("Please enter your last name.");
form.last_name.focus();
return (false);
}

if (form.address.value == "")
{
alert("Please enter your address.");
form.address.focus();
return (false);
}
if (form.acode.value == "")
{
alert("Please enter the area code.");
form.acode.focus();
return (false);
}
if (form.phone.value == "")
{
alert("Please enter your telephone number.");
form.phone.focus();
return (false);
}
if (getRadio("pay") == "")
{
alert("Please choose a payment method.");
return (false);
}

return (true);
}
//--></script>

[bajanstar]

I did what u said but it isnt working here is the code i used
<script language="javascript">
***tion getRadio(pay){
var inputs = document.getElementsByTagName('input');
var ret = null;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == 'radio' && (inputs[i].name == pay || inputs[i].id == pay) && inputs[i].checked){
ret = inputs[i].value;
}
}
return ret;
}

[agent002]

you don't need to change anything in the getRadio() function... use the code as I gave it :)

[bajanstar]

Originally posted by agent002
radio buttons are a little tricky, but I have a nice function for getting the selected value of a radio group.
<script language="javascript">
***tion getRadio(radioName){
var inputs = document.getElementsByTagName('input');
var ret = null;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == 'radio' && (inputs[i].name == radioName || inputs[i].id == radioName) && inputs[i].checked){
ret = inputs[i].value;
}
}
return ret;
}


function form_Validator(form)
{

if (form.first_name.value == "")
{
alert("Please enter your first name.");
form.first_name.focus();
return (false);
}

if (form.last_name.value == "")
{
alert("Please enter your last name.");
form.last_name.focus();
return (false);
}

if (form.address.value == "")
{
alert("Please enter your address.");
form.address.focus();
return (false);
}
if (form.acode.value == "")
{
alert("Please enter the area code.");
form.acode.focus();
return (false);
}
if (form.phone.value == "")
{
alert("Please enter your telephone number.");
form.phone.focus();
return (false);
}
if (getRadio("pay") == "")
{
alert("Please choose a payment method.");
return (false);
}

return (true);
}
//--></script>
When i did what u stated above nothing wouldnt work at all.So then i put them as 2 separate functions and the validations with the name,address etc worked. But the one with the radio buttons didnt work


<script language="javascript">
***tion getRadio(radioName){
var inputs = document.getElementsByTagName('input');
var ret = null;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == 'radio' && (inputs[i].name == radioName || inputs[i].id == radioName) && inputs[i].checked){
ret = inputs[i].value;
}
}
return ret;
}
</SCRIPT>

<script language="javascript">
function form_Validator(form)
{

if (form.first_name.value == "")
{
alert("Please enter your first name.");
form.first_name.focus();
return (false);
}

if (form.last_name.value == "")
{
alert("Please enter your last name.");
form.last_name.focus();
return (false);
}

if (form.address.value == "")
{
alert("Please enter your address.");
form.address.focus();
return (false);
}
if (form.acode.value == "")
{
alert("Please enter the area code.");
form.acode.focus();
return (false);
}
if (form.phone.value == "")
{
alert("Please enter your telephone number.");
form.phone.focus();
return (false);
}
if (getRadio("pay") == "")
{
alert("Please choose a payment method.");
return (false);
}


return (true);
}
//-->
</script>

[agent002]

Damnit, it should be function, not ***tion. Also getRadio("pay") should be compared to null, not an empty string... sorry. this code should work already:
<script language="javascript">
function getRadio(radioName){
var inputs = document.getElementsByTagName('input');
var ret = null;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == 'radio' && (inputs[i].name == radioName || inputs[i].id == radioName) && inputs[i].checked){
ret = inputs[i].value;
}
}
return ret;
}


function form_Validator(form)
{

if (form.first_name.value == "")
{
alert("Please enter your first name.");
form.first_name.focus();
return (false);
}

if (form.last_name.value == "")
{
alert("Please enter your last name.");
form.last_name.focus();
return (false);
}

if (form.address.value == "")
{
alert("Please enter your address.");
form.address.focus();
return (false);
}
if (form.acode.value == "")
{
alert("Please enter the area code.");
form.acode.focus();
return (false);
}
if (form.phone.value == "")
{
alert("Please enter your telephone number.");
form.phone.focus();
return (false);
}
if (getRadio("pay") == null)
{
alert("Please choose a payment method.");
return (false);
}

return (true);
}
//--></script>
:)

[bajanstar]

Thanks its working now
star

[AndrewAK]

I know this is a JavaScript thread, but hear me out first.

I wasn't clear with your intention of validating the radio buttons at first glance because I find it hard to make an input error that way (It's on or off). I then edited the code to bare bones. I noticed that you had no default button set. So I set the "Visa" button as "checked" (Pure HTML).

All of the buttons have the same name, so I used a little PHP code (server-side) to confirm the choice selected.

Here's the code:

The Form

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<form action="confirmpay.php" method="post" name="form1">
<input name="pay" type="radio" value="Visa" checked="checked" />
Visa <br />
<input name="pay" type="radio" value="Master Card" />
Master Card<br />
<input name="pay" type="radio" value="American Express" />
American Express<br />
<input name="submit" type="submit" value="Submit" />
</form>
</body>
</html>


And heres the PHP Confirmation:


<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<?php
$Cardtype = $_POST['pay'];
print ($Cardtype)
?>
</body>
</html>


I hope you can use this. Good Luck:rocker:

[bajanstar]

hi AndrewAk
Thanks for ur help, I really appreciate it.