[SOLVED] radio buttons coming out of my ears

cleary1981 · December 12, 2008

Hi,

I have a script that generates a load of groups of radio buttons on one page. I can select them, they turn nice colours and everything. The problem is I have a button at the end of my page where I want to get the value (quote_id) of each radio button in each group that is checked.

Heres my script

<?php
require "config.php";
$proj_id = $_GET['x'];
$group = 0;
$q3 = mysql_query("SELECT project_name FROM project WHERE proj_id='$proj_id'") or die(mysql_error());
$r3 = mysql_fetch_assoc($q3);

print "<h1>$r3[project_name] - Select Prices</h1>";
print "<form name='form1' id='form1'>";
$q1 = mysql_query("SELECT panel_no, panel_name FROM panel WHERE proj_id = '$proj_id'") or die(mysql_error());
while($r1 = mysql_fetch_array($q1)){ //each group loop
$group = $group + 1;
print "<span class='name'>$r1[panel_name]</span>\n";
$panel_no = $r1['panel_no'];
$q2 = mysql_query("SELECT * FROM quote WHERE panel_no = '$panel_no'");
print"<table width=100%><th></th><th>Date</th><th>Labour</th><th>Consumables</th><th>Components</th><th>Copper</th><th>Busbar</th><th>Panel</th><th>Drawings</th><th>Sub Total</th><th>Markup</th><th>Percentage</th><th>Total</th>";
$record = 0;
while($r2 = mysql_fetch_array($q2)){ //each panel loop
	$record = $record + 1;
	$x = $r2['quote_id'];
	//print "<tr id='$r2[quote_id]'><td><input type='radio' name='$group' value='$r2[quote_id]'></td><td>$r2[date]</td><td>$r2[labour]</td><td>$r2[consumables]</td><td>$r2[components]</td><td>$r2[copper]</td><td>$r2[busbar]</td><td>$r2[panel]</td><td>$r2[draw]</td><td>$r2[subT]</td><td>$r2[markup]</td><td>$r2[percentage]</td><td>$r2[total]</td></tr>";
	if ($record == 1){
		print "<tr id='$r2[quote_id]' name='$r2[panel_no]' class='checked' onClick=\"checkpanels('$r2[panel_no].$r2[quote_id]')\"><td><input type='radio' name='$group' value='$r2[quote_id]' checked></td><td>$r2[date]</td><td>$r2[labour]</td><td>$r2[consumables]</td><td>$r2[components]</td><td>$r2[copper]</td><td>$r2[busbar]</td><td>$r2[panel]</td><td>$r2[draw]</td><td>$r2[subT]</td><td>$r2[markup]</td><td>$r2[percentage]</td><td>$r2[total]</td></tr>";
	}
	else{
		print "<tr id='$r2[quote_id]' name='$r2[panel_no]' class='notchecked' onClick=\"checkpanels('$r2[panel_no].$r2[quote_id]')\"><td><input type='radio' name='$group' value='$r2[quote_id]'></td><td>$r2[date]</td><td>$r2[labour]</td><td>$r2[consumables]</td><td>$r2[components]</td><td>$r2[copper]</td><td>$r2[busbar]</td><td>$r2[panel]</td><td>$r2[draw]</td><td>$r2[subT]</td><td>$r2[markup]</td><td>$r2[percentage]</td><td>$r2[total]</td></tr>";
	}
}
print "</table>";
}
print "$group<span id='button'><input type='button' value='Proceed' onClick=\"proceed()\"></span>";
print "</form>";
?>

<html>
<head>
<style type="text/css">
body {
background-image: url('modulecost.gif');
background-repeat: no-repeat;
}
.name{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
line-height: 2;
color:#006666;
}
h1{
text-align:center;
color:#006666;
}
.notchecked{
background:white;
}
.checked{
background:#9EEDF4;
}
#button{
padding-left:90%;
}
th{
background:white;
}
td{
text-align:center;
}
</style>
<script type="text/javascript" src="text-utils.js"> </script>
<script type="text/javascript" src="request.js"> </script>
<script type="text/javascript">
function checkpanels(quote_id){
var returned = quote_id;
var splitResult = returned.split(".");
var panel = splitResult[0];
var quote = splitResult[1];

var arr = document.getElementsByTagName("tr");
			for (var i=0;i<arr.length;i++) {
				if (panel == arr[i].name) {
					arr[i].style.background = "white";
				}
			}


//alert(quote_id);
document.getElementById(quote).style.background = "#9EEDF4";
}
function proceed(){
//get the quote id from each checked radio
}
</script>
</head>
<body>

</body>
</html>

Psycho · December 12, 2008

Post the processed (i.e. HTML) code. JavaScript is run client-side. We don't have your database to run aganst in order to create the client side code.

But, a quick review of your code seems to indicate some problems in the construction. There is content being printed to the page in the PHP code at the top, but then after all of that is the opening HTML tag. I'm not sure what you are trying to accomplish after reading your comments and looking at the code. Posting the HTML output - or even a mock-up of a page - would help greatly.

cleary1981 · December 15, 2008

here is the processed html

<h1>Merchant Hotel Phase 2 - Select Prices</h1><form name='form1' id='form1'><span class='name'>New Extension Switchboard</span>
<table width=100%><th></th><th>Date</th><th>Labour</th><th>Consumables</th><th>Components</th><th>Copper</th><th>Busbar</th><th>Panel</th><th>Drawings</th><th>Sub Total</th><th>Markup</th><th>Percentage</th><th>Total</th> 
<tr id='8' name='4' class='checked' onClick="checkpanels('4.8')"><td><input type='radio' name='1' value='8' checked></td><td>12/12/2008</td><td>3390</td><td>515</td><td>0</td><td>1098.36</td><td>1098.36</td><td>9450</td><td>0</td><td>14453.36</td><td>4336.01</td><td>30</td><td>18789.37</td></tr> 
</table><span class='name'>Firefighting Sub Switchboard</span>
<table width=100%><th></th><th>Date</th><th>Labour</th><th>Consumables</th><th>Components</th><th>Copper</th><th>Busbar</th><th>Panel</th><th>Drawings</th><th>Sub Total</th><th>Markup</th><th>Percentage</th><th>Total</th> 
<tr id='9' name='5' class='checked' onClick="checkpanels('5.9')"><td><input type='radio' name='2' value='9' checked></td><td>12/12/2008</td><td>825</td><td>130</td><td>0</td><td>226.98</td><td>226.98</td><td>2250</td><td>0</td><td>3431.98</td><td>1029.59</td><td>30</td><td>4461.57</td></tr> 
</table><span class='name'>NIE INCOMER CUBICLE</span>
<table width=100%><th></th><th>Date</th><th>Labour</th><th>Consumables</th><th>Components</th><th>Copper</th><th>Busbar</th><th>Panel</th><th>Drawings</th><th>Sub Total</th><th>Markup</th><th>Percentage</th><th>Total</th> 
<tr id='15' name='11' class='checked' onClick="checkpanels('11.15')"><td><input type='radio' name='3' value='15' checked></td><td>12/12/2008</td><td>405</td><td>115</td><td>0</td><td>90.792</td><td>90.792</td><td>950</td><td>0</td><td>1560.79</td><td>468.24</td><td>30</td><td>2029.03</td></tr> 
</table><span class='name'>Ground Floor FOH Sub Switchboard</span>
<table width=100%><th></th><th>Date</th><th>Labour</th><th>Consumables</th><th>Components</th><th>Copper</th><th>Busbar</th><th>Panel</th><th>Drawings</th><th>Sub Total</th><th>Markup</th><th>Percentage</th><th>Total</th> 
<tr id='11' name='7' class='checked' onClick="checkpanels('7.11')"><td><input type='radio' name='4' value='11' checked></td><td>12/12/2008</td><td>810</td><td>190</td><td>0</td><td>181.584</td><td>181.584</td><td>2000</td><td>0</td><td>3181.58</td><td>954.47</td><td>30</td><td>4136.05</td></tr> 
</table><span class='name'>Ground Floor Bar Sub Switchboard</span>
<table width=100%><th></th><th>Date</th><th>Labour</th><th>Consumables</th><th>Components</th><th>Copper</th><th>Busbar</th><th>Panel</th><th>Drawings</th><th>Sub Total</th><th>Markup</th><th>Percentage</th><th>Total</th> 
<tr id='12' name='8' class='checked' onClick="checkpanels('8.12')"><td><input type='radio' name='5' value='12' checked></td><td>12/12/2008</td><td>1230</td><td>225</td><td>0</td><td>272.376</td><td>272.376</td><td>3000</td><td>0</td><td>4727.38</td><td>1418.21</td><td>30</td><td>6145.59</td></tr> 
</table><span class='name'>1st Floor Plant Room Sub Switchboard</span>
<table width=100%><th></th><th>Date</th><th>Labour</th><th>Consumables</th><th>Components</th><th>Copper</th><th>Busbar</th><th>Panel</th><th>Drawings</th><th>Sub Total</th><th>Markup</th><th>Percentage</th><th>Total</th> 
<tr id='10' name='9' class='checked' onClick="checkpanels('9.10')"><td><input type='radio' name='6' value='10' checked></td><td>12/12/2008</td><td>405</td><td>115</td><td>0</td><td>90.792</td><td>90.792</td><td>950</td><td>0</td><td>1560.79</td><td>468.24</td><td>30</td><td>2029.03</td></tr> 
<tr id='13' name='9' class='notchecked' onClick="checkpanels('9.13')"><td><input type='radio' name='6' value='13'></td><td>12/12/2008</td><td>1290</td><td>240</td><td>0</td><td>272.376</td><td>272.376</td><td>3000</td><td>0</td><td>4802.38</td><td>1440.71</td><td>30</td><td>6243.09</td></tr> 
<tr id='14' name='9' class='notchecked' onClick="checkpanels('9.14')"><td><input type='radio' name='6' value='14'></td><td>12/12/2008</td><td>405</td><td>115</td><td>0</td><td>90.792</td><td>90.792</td><td>950</td><td>0</td><td>1560.79</td><td>468.24</td><td>30</td><td>2029.03</td></tr> 
</table><span class='name'>Basement Laundry Sub Switchboard</span>
<table width=100%><th></th><th>Date</th><th>Labour</th><th>Consumables</th><th>Components</th><th>Copper</th><th>Busbar</th><th>Panel</th><th>Drawings</th><th>Sub Total</th><th>Markup</th><th>Percentage</th><th>Total</th> 
<tr id='16' name='10' class='checked' onClick="checkpanels('10.16')"><td><input type='radio' name='7' value='16' checked></td><td>12/12/2008</td><td>1230</td><td>225</td><td>0</td><td>340.47</td><td>340.47</td><td>3750</td><td>0</td><td>5545.47</td><td>1663.64</td><td>30</td><td>7209.11</td></tr> 
</table>7<span id='button'><input type='button' value='Proceed' onClick="proceed()"></span></form>
<html>
<head>
<style type="text/css">
body {
background-image: url('modulecost.gif');
background-repeat: no-repeat;
}
.name{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
line-height: 2;
color:#006666;
}
h1{
text-align:center;
color:#006666;
}
.notchecked{
background:white;
}
.checked{
background:#9EEDF4;
}
#button{
padding-left:90%;
}
th{
background:white;
}
td{
text-align:center;
}
</style>
<script type="text/javascript" src="text-utils.js"> </script>
<script type="text/javascript" src="request.js"> </script>
<script type="text/javascript">
function checkpanels(quote_id){
var returned = quote_id;
var splitResult = returned.split(".");
var panel = splitResult[0];
var quote = splitResult[1];

var arr = document.getElementsByTagName("tr");
			for (var i=0;i<arr.length;i++) {
				if (panel == arr[i].name) {
					arr[i].style.background = "white";
				}
			}


//alert(quote_id);
document.getElementById(quote).style.background = "#9EEDF4";
}
function proceed(){
//get the quote id from each checked radio
}
</script>
</head>
<body>

</body>
</html>

what I need to do is find some way to distinguish which radio button in each group has been selected.

Psycho · December 15, 2008

Well, the HTML code is way out of wack - all of the BODY code is before your opening HTML tag!

You will want to change the radio group names. The elements of the form are treated as an array and the JavaScript gets confused between an element that is at the index position '1' (the second element in the array) and an element with the name of '1'. In my example below I changed all of the radio groups to 'group_1', 'group_2', etc.

Another problem is that a radio group with multiple elements is treated as an array, whereas a radio group with only 1 element is not. I accounted for that in the code below.

Here's some basic code to get the value of the selected radio option:

function getSelectedRadio(radioGroupObj)
{
    if (radioGroupObj.length)
    {
        for(var i=0; i<radioGroupObj.length; i++)
        {
            if (radioGroupObj[i].checked)
            {
                radioValue = radioGroupObj[i].value;
                break;
            }
            radioValue = false;
        }
    }
    else
    {
        radioValue = radioGroupObj.value;
    }
    return radioValue;
}


function proceed(formObj)
{
    alert(getSelectedRadio(formObj['group_1']));
    alert(getSelectedRadio(formObj['group_2']));
    alert(getSelectedRadio(formObj['group_3']));
    alert(getSelectedRadio(formObj['group_4']));
    alert(getSelectedRadio(formObj['group_5']));
    alert(getSelectedRadio(formObj['group_6']));
    alert(getSelectedRadio(formObj['group_7']));
}

In addition to modifying the radio group namee, the button trigger would be changed as follows

onClick="proceed(this.form);"

Sign In

[SOLVED] radio buttons coming out of my ears

Recommended Posts

cleary1981

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

cleary1981

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information