...

View Full Version : Radio button value on click



Purplepieman
05-07-2008, 03:25 PM
I am trying to set a hidden field value according to a radio button selection. The radio buttons are generated dynamically according to an inventory from a database and done using php. I need to set the hidden value so that it can then be posted to another page. I have included the necessary snippets below. I am currently doing a check to see the value for debugging purposes to check the values as I was not able to get it to work. I need to get the value of the radio button clicked onclick and not when the form is posted.

- I Have verified that <?php echo $formname; ?> does come back with the right form (there are multiple ones and I needed to identify each uniquetly.
- The checked value always returns empty.
- All Alerts have been added for debugging purposes.

P

<table width="0%" border="0" cellspacing="0" cellpadding="0">
<form target="paypal" method="post" NAME="<?php echo $formname; ?>" id="<?php echo $formname; ?>" action="https://www.paypal.com/cgi-bin/webscr">
<tr>
<td colspan="2" class="text">
<?php if (($myrow['NA']) == '1') {
echo "";
} else {
echo "Choose a Scent:<br />";
}
?>
<?php if (($myrow['Gurlz']) == '1') {?>
<input type="radio" name="scent" value="Gurlz" onClick="alert('Checked value is: '+getCheckedValue(document.forms['<?php echo $formname; ?>'].elements['scent']))"> Gurlz<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Boyz']) == '1') {?>
<input type="radio" name="scent" value="Boyz" onClick="alert('Checked value is: '+getCheckedValue(document.forms['<?php echo $formname; ?>'].elements['scent']));"> Boyz<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Hip Hop Scrubz']) == '1') {?>
<input type="radio" name="scent" value="Hip Hop Scrubz" onClick="alert('Checked value is: '+getCheckedValue(document.forms['<?php echo $formname; ?>'].elements['scent']));"> Hip Hop Scrubz<br />
<?php } else {
echo "";
}
?>

<br />
</td>
</tr>

------------

function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
alert (radioObj[i].value);
}
}
return "";
}

---------------
Thanks again

Arty Effem
05-07-2008, 03:32 PM
f
or(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
alert (radioObj[i].value);
}
}
You have a call to alert following a return statement.

nottRobin
05-07-2008, 04:01 PM
This is quite a difficult one for us to recreate, as it includes your specific php code.

It is also difficult because that function is some of the ugliest JavaScript code I have seen in a long time.

I haven't found your problem, but I commented and re-structured your code, and now maybe you can use it to work out where your problem is?


function getCheckedValue(radioObj) {
// Exit if we haven't been passed anything
if(!radioObj) {return "";}

var radioLength = radioObj.length;

// Check if radioObj is an array
if(radioLength != undefined) {
// If so, iterate through all radio buttons
for(var i = 0; i < radioLength; i++) {
// If we find a checked one, return its value
if(radioObj[i].checked) {
return radioObj[i].value;
//alert (radioObj[i].value); - this did nothing
}
}

// Failed to find a checked button, so return an empty string
return "";
} else {
// radioObj is not an array...
// Return value if radio object is checked as well
if(radioObj.checked) {return radioObj.value;}
// Otherwise return nothing
else {return "";}
}
}


Cheers,
Robin.

nottRobin
05-07-2008, 04:11 PM
Couple of points: most importantly, your <form> element is not allowed directly inside your <table> element, it has to be either outside the table or inside a <td>.

Less importantly, in xhtml all element attributes should be in lower-case ('NAME=' should be 'name=') and the attributes width, border, cellspacing and cellpadding are all depricated and CSS should be used instead. These do only apply to xhtml, but they're good practice even if you are using HTML 4.01.

So I restructured your HTML code as well and removed all your PHP, and now it seems to work fine for me. Here's the HTML page I created. Hopefully you can use it to work out where your problem is:


<html>
<head>
<script type="text/javascript">
function getCheckedValue(radioObj) {
// Exit if we haven't been passed anything
if(!radioObj) {return "";}

var radioLength = radioObj.length;

// Check if radioObj is an array
if(radioLength != undefined) {
// If so, iterate through all radio buttons
for(var i = 0; i < radioLength; i++) {
// If we find a checked one, return it's value
if(radioObj[i].checked) {
return radioObj[i].value;
//alert (radioObj[i].value); - this did nothing
}
}

return "";
} else {
// radioObj is not an array...
// Return value if radio object is checked as well
if(radioObj.checked) {return radioObj.value;}
// Otherwise return nothing
else {return "";}
}
}
</script>
</head>
<body>
<form target="paypal" method="post" name="testForm" id="testForm" action="https://www.paypal.com/cgi-bin/webscr">
<table width="0&#37;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="text">
<input type="radio" name="scent" value="Gurlz" onClick="alert('Checked value is: '+getCheckedValue(document.forms['testForm'].elements['scent']))"> Gurlz<br />
<input type="radio" name="scent" value="Boyz" onClick="alert('Checked value is: '+getCheckedValue(document.forms['testForm'].elements['scent']));"> Boyz<br />
<input type="radio" name="scent" value="Hip Hop Scrubz" onClick="alert('Checked value is: '+getCheckedValue(document.forms['testForm'].elements['scent']));"> Hip Hop Scrubz<br />
<br />
</td>
</tr>
</table>
</form>
</body>
</html>

Cheers,
Robin.

Purplepieman
05-07-2008, 06:23 PM
Thank you very much for your replies. I have taken the code that you posted and put it into the page, now when i click on one of the radio buttons I get the error "document.forms.testForm.elements.scent" is null or not an object. I renamed the parts of my form to match your example. I even copies your code into a new page and tested that one, worked fine.

Thanks for the help.

Purplepieman
05-07-2008, 07:07 PM
Maybe I should explain what I am fully trying to do instead of just working with the test code. I am generating a page after reading a database. From the database I get a list of products, I then read another table which has the list of options for each product and i build a form for each product for the user to be able to select a "scent" and add it to a shopping cart through paypal. The trick is that they need to select the scent and when they do i need to set an onclick for that radio button which will add a hidden field to the form setting the item_name so that it can be shown which scent was selected. I am posting the complete code for the page in here, even tho you won't need to see most of it, but that way you can see what is there.

now when i click on one of the radio buttons I get the error "document.forms.testForm.elements.scent" is null or not an object.

Help is greatly appreciated.

----------------------------------------------------
<?php require_once('Connections/moxie.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}

mysql_select_db($database_moxie, $moxie);
$query_getmenu = "SELECT * FROM cats";
$getmenu = mysql_query($query_getmenu, $moxie) or die(mysql_error());
$row_getmenu = mysql_fetch_assoc($getmenu);
$totalRows_getmenu = mysql_num_rows($getmenu);

function dollar_format($amount) {
$new_amount = "\$".sprintf("%.2f",$amount)." CAD";
return $new_amount;
}

$colname_getpro = "1";
if ((isset($_GET['sub'])) && ($_GET['sub'] != "99")) {
$colname_getpro = $_GET['sub'];

}else{

$colname_getpro = $_GET['id'];


}

mysql_select_db($database_moxie, $moxie);
$query_getpro = sprintf("SELECT * FROM ecoteen_products WHERE cat = '14' ORDER BY name ASC", GetSQLValueString($colname_getpro, "text"));
$getpro = mysql_query($query_getpro, $moxie) or die(mysql_error());
$row_getpro = mysql_fetch_assoc($getpro);
$totalRows_getpro = mysql_num_rows($getpro);

$catname = 14;

mysql_select_db($database_moxie, $moxie);
$query_getcatname = "SELECT id, name FROM cats WHERE id = '$catname'";
$getcatname = mysql_query($query_getcatname, $moxie) or die(mysql_error());
$row_getcatname = mysql_fetch_assoc($getcatname);
$totalRows_getcatname = mysql_num_rows($getcatname);
?>
<!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>Moxie Store</title>
<META NAME="ROBOTS" CONTENT="all">
<META NAME="ROBOTS" CONTENT="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/interface.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<script type="text/javascript">

// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
// Exit if we haven't been passed anything
if(!radioObj) {return "";}

var radioLength = radioObj.length;

// Check if radioObj is an array
if(radioLength != undefined) {
// If so, iterate through all radio buttons
for(var i = 0; i < radioLength; i++) {
// If we find a checked one, return it's value
if(radioObj[i].checked) {
var field = document.createElement("input");
field.setAttribute("type","hidden");
field.setAttribute("value","Ecoteen - <?php echo $myrow['name']; ?> - "+radioObj[i].value);
field.setAttribute("name","item_name");

//add new element to the existing form
document.getElementById("<?php echo $myrow['name']; ?>").appendChild(field);


}
}

return "";
} else {
// radioObj is not an array...
// Return value if radio object is checked as well
if(radioObj.checked) {return radioObj.value;}
// Otherwise return nothing
else {return "";}
}
}
</script>
<script type="text/javascript" language="javascript" src="Scripts/lytebox.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
td img {display: block;}
</style>
</head>
<body bgcolor="#ffffff"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">


<tr>
<td width="803"><?php include("header_inc.php"); ?></td>
</tr>
<tr>
<td bgcolor="#C8782F"><?php include("store_menu_inc.php"); ?></td>
</tr>

<tr>
<td bgcolor="#FCB43E" height="5"></td>
</tr>
<tr>
<td height="300" align="center" valign="top" bgcolor="#FFFFFF" class="store_back"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%">&nbsp;</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="160" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" align="center" bgcolor="FCB43E" class="menuback_store"><div id="navcontainer">
<ul id="navlist">
<?php do { ?>
<?php if($row_getmenu['space'] != ""){ echo "<br>"; } ?>
<?php if($row_getmenu['id'] != 14){ ?>
<?php if($row_getmenu['id'] != $_GET['id']){ ?>

<li><a href="store.php?id=<?php echo $row_getmenu['id']; ?><?php if($row_getmenu['id'] == "3") { echo "&sub=99"; } ?>"><?php echo $row_getmenu['name']; ?> </a></li>
<?php }else{ ?>

<li> <span class="active"><?php echo $row_getmenu['name']; ?></span> </li>



<?php if($_GET['id'] == "3") {?>
<table width="90" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#C8782F">
<tr>

<td>
<?php if($_GET['sub'] == "99") {?>
<strong>Soap</strong>
<?php }else{ ?>
<li><a href="store.php?id=3&sub=99">Soap</a></li><?php ;} ?>
<?php if($_GET['sub'] == "100") {?>
<strong>Bath Melts</strong>
<?php }else{ ?>
<li><a href="store.php?id=3&sub=100">Bath Melts </a></li><?php ;} ?>
<?php if($_GET['sub'] == "101") {?>
<strong>Bath Salts</strong>
<?php }else{ ?>
<li><a href="store.php?id=3&sub=16">Bath Salts </a></li><?php ;} ?> </td>
</tr>
</table>
<?php ; } ?>
<?php ; } ?>

<?php ; } ?>
<?php } while ($row_getmenu = mysql_fetch_assoc($getmenu)); ?>
<li><a href="ecoteen.php?id=14" class="active">Ecoteen™</a></li>
</ul>
</div></td>
</tr>
<tr>
<td width="20"><img name="lbtm" src="images/lbtm.gif" width="20" height="20" border="0" id="lbtm" alt="" /></td>
<td width="120" bgcolor="#FCAB49">&nbsp;</td>
<td width="20"><img name="rbtm" src="images/rbtm.gif" width="20" height="20" border="0" id="rbtm" alt="" /></td>
</tr>
</table></td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">

</table>



<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td></td>
</tr>
</table>


<table>
<?php

$count = 1;
$column = 1;
//loop statement
while ($myrow = mysql_fetch_array ($getpro))
{
$formname = $myrow['id'];
// first column display
if ($column == 1)
{
?>
<tr><td width="300"><table width="300" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="16"><img src="images/topleft.gif" width="25" height="25"></td>
<td height="25" background="images/ctop.jpg">&nbsp;</td>

<td width="24"><img src="images/righttop.gif" width="25" height="25"></td>
</tr>
<tr>
<td width="16" background="images/cright.jpg"><img src="images/cright.jpg" width="25" height="10"></td>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80"><a href="moreinfo.php?id=<?php echo $myrow['id']; ?>" rel="lyteframe" rev="width: 400px; height: 500px; scrolling: no;" ><img src="products/small/<?php echo $myrow['images']; ?>" width="80" border="0" /></a></td>
<td width="72%" align="left"><span class="text_title"><?php echo $myrow['name']; ?></span><br>
<span class="text">Price: <?php echo dollar_format($myrow['price']); ?><br>
<?php echo $myrow['size']; ?><?php
$i = $_GET['sub'];
switch ($i) {
case "101":
echo "g";
break;
case "100":
echo "g";
break;
default:
echo "oz";
}
?><br>
</span></td>
</tr>
<tr>
<td colspan="2" align="right" valign="bottom">
<table width="0%" border="0" cellspacing="0" cellpadding="0">
<form target="paypal" method="post" NAME="testForm" id="testForm" action="https://www.paypal.com/cgi-bin/webscr">
<tr>
<td colspan="2" class="text">
<?php if (($myrow['NA']) == '1') {
echo "";
} else {
echo "Choose a Scent:<br />";
}
?>
<?php if (($myrow['Gurlz']) == '1') {?>
<input type="radio" name="scent" value="Gurlz" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Gurlz<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Boyz']) == '1') {?>
<input type="radio" name="scent" value="Boyz" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Boyz<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Hip Hop Scrubz']) == '1') {?>
<input type="radio" name="scent" value="Hip Hop Scrubz" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Hip Hop Scrubz<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Hot Rocket']) == '1') {?>
<input type="radio" name="scent" value="Hot Rocket" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Hot Rocket<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Surfs Up']) == '1') {?>
<input type="radio" name="scent" value="Surfs Up" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Surfs Up<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Teens R Us']) == '1') {?>
<input type="radio" name="scent" value="Teens R Us" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Teens R Us<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Sex on the Beach']) == '1') {?>
<input type="radio" name="scent" value="Sex on the Beach" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Sex on the Beach<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Vibe']) == '1') {?>
<input type="radio" name="scent" value="Vibe" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Vibe<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Street Legal']) == '1') {?>
<input type="radio" name="scent" value="Street Legal" onClick="getCheckedValue(document.forms['testForm'].elements['scent']);"> Street Legal<br />
<?php } else {
echo "";
}
?>

<br />
</td>
</tr>
<tr>
<td><a href="moreinfo_ecoteen.php?id=<?php echo $row_getpro['id']; ?>" rel="lyteframe" rev="width: 400px; height: 500px; scrolling: yes;" ><img src="images/more.jpg" border="0" /></a></td>
<td>
<input type="hidden" name="cmd" value="_cart">
</td>
</tr></form>
</table>

<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </td>
</tr>
</table></td>

<td width="24" background="images/rightc.gif"><img src="images/rightc.gif" width="25" height="10"></td>
</tr>
<tr>
<td width="16" height="16"><img src="images/botl.gif" width="25" height="25"></td>
<td height="16" background="images/botc.gif"><img src="images/botc.jpg" width="10" height="25"></td>
<td width="24" height="16"><img src="images/botr.gif" width="25" height="25"></td>
</tr>
</table> </td>

<?php
}else{
?>
<td width="300"><table width="300" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="16"><img src="images/topleft.gif" width="25" height="25"></td>
<td height="25" background="images/ctop.jpg">&nbsp;</td>

<td width="24"><img src="images/righttop.gif" width="25" height="25"></td>
</tr>
<tr>
<td width="16" background="images/cright.jpg"><img src="images/cright.jpg" width="25" height="10"></td>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80"><a href="moreinfo.php?id=<?php echo $myrow['id']; ?>" rel="lyteframe" rev="width: 400px; height: 500px; scrolling: no;" ><img src="products/small/<?php echo $myrow['images']; ?>" width="80" border="0" /></a></td>
<td width="72%" align="left"><span class="text_title"><?php echo $myrow['name']; ?></span><br>
<span class="text">Price: <?php echo dollar_format($myrow['price']); ?><br>
<?php echo $myrow['size']; ?><?php
$i = $_GET['sub'];
switch ($i) {
case "101":
echo "g";
break;
case "100":
echo "g";
break;
default:
echo "oz";
}
?><br>
</span></td>
</tr>
<tr>
<td colspan="2" align="right">
<table width="0%" border="0" cellspacing="0" cellpadding="0">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<tr>
<td colspan="2" class="text">
<?php if (($myrow['NA']) == '1') {
echo "";
} else {
echo "Choose a Scent:<br />";
}
?>
<?php if (($myrow['Gurlz']) == '1') {?>
<input type="radio" name="scent" value="Gurlz"> Gurlz<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Boyz']) == '1') {?>
<input type="radio" name="scent" value="Boyz"> Boyz<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Hip Hop Scrubz']) == '1') {?>
<input type="radio" name="scent" value="Hip Hop Scrubz"> Hip Hop Scrubz<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Hot Rocket']) == '1') {?>
<input type="radio" name="scent" value="Hot Rocket"> Hot Rocket<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Surfs Up']) == '1') {?>
<input type="radio" name="scent" value="Surfs Up"> Surfs Up<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Teens R Us']) == '1') {?>
<input type="radio" name="scent" value="Teens R Us"> Teens R Us<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Sex on the Beach']) == '1') {?>
<input type="radio" name="scent" value="Sex on the Beach"> Sex on the Beach<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Vibe']) == '1') {?>
<input type="radio" name="scent" value="Vibe"> Vibe<br />
<?php } else {
echo "";
}
?>
<?php if (($myrow['Street Legal']) == '1') {?>
<input type="radio" name="scent" value="Street Legal"> Street Legal<br />
<?php } else {
echo "";
}
?>
<br />

</td>
</tr>
<tr>
<td><a href="moreinfo_ecoteen.php?id=<?php echo $row_getpro['id']; ?>" rel="lyteframe" rev="width: 400px; height: 500px; scrolling: yes;"><img src="images/more.jpg" border="0" /></a></td>
<td>
<input type="hidden" name="cmd" value="_cart">

</td>
</tr></form>
</table>

<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">

</td>
</tr>
</table></td>

<td width="24" background="images/rightc.gif"><img src="images/rightc.gif" width="25" height="10"></td>
</tr>
<tr>
<td width="16" height="16"><img src="images/botl.gif" width="25" height="25"></td>
<td height="16" background="images/botc.gif"><img src="images/botc.jpg" width="10" height="25"></td>
<td width="24" height="16"><img src="images/botr.gif" width="25" height="25"></td>
</tr>
</table> </td></tr>
<?php }

$count += 1;

$column = $count % 2;
}


?></table>

</td>
</tr>

</table></td>
<td width="2%" valign="top">&nbsp;</td>
</tr>
</table>
<input type="hidden" name="tax" value="6.00" />
<?php
$rowcount = 0;
while ($row=mysql_fetch_row($getpro))
$teller ++;
print "$row[0]<br>";
if ($rowcount >= $percol) {
print "</td><td>";
$rowcount = 0;
}
?></td>
</tr>
</table>
</body>
</html>
<?php
mysql_free_result($getmenu);

mysql_free_result($getpro);

mysql_free_result($getcatname);
?>

Purplepieman
05-07-2008, 07:17 PM
I would like to ask, if anyone knows an easier way to add a hidden field to a form when you click on a radio button I would gladly accept that too.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum