<div>
<input type="radio" name="check" value="cash" checked/>cash
<input type="radio" name="check" value="credit" />credit
</div>
<table>
<tbody id="cash">
<tr>
<td>
Cash User name:
</td>
<td>
<input type="text" name="cash1" />
</td>
</tr>
</tbody>
<tbody id="credit">
<tr>
<td>
credit User name:
</td>
<td>
<input type="text" name="credit1" />
</td>
</tr>
</tbody>
</table>
In the div tag I am having two radio buttons. By default I have made the radio button named cash checked now. What I want is that when radio button cash is checked tbody with id cash is shown and tbody with id credit hidden and when radio button with name credit is checked then tbody with id credit is shown and other tbody to be hidden. I have done it with jQuery but I want it to do with Javascript.
If you are willing to go for a pure CSS solution, than you have to get rid of the div around your radio buttons
Demo
tbody {
display: none;
}
input[value="cash"]:checked + input[value="credit"] + table tbody[id="cash"] {
display: table-row-group;
}
input[value="credit"]:checked + table tbody[id="credit"] {
display: table-row-group;
}
Note: Just make sure you declare some class and make these selectors
specific, else it will target all the elements in the above
combination in the document.
Here is the Javascript code, to be written after the HTML:
var radios = document.getElementsByName("check");
for( var i = 0; i < radios.length; i++){
switch( radios[i].value){
case "cash":
radios[i].onclick = function(){
document.getElementById("credit").style.display = 'none';
document.getElementById("cash").style.display = 'block';
};
break;
case "credit":
radios[i].onclick = function(){
document.getElementById("cash").style.display = 'none';
document.getElementById("credit").style.display = 'block';
};
break;
}
if( radios[i].checked){
radios[i].click();
}
}
The code is running at http://jsfiddle.net/2sPGn/
Javascript Code
<script>
function showData(obj) {
if ( obj.value == "cash") {
document.getElementById("cash").style.display = '';
document.getElementById("credit").style.display='none';
} else {
document.getElementById("cash").style.display = 'none';
document.getElementById("credit").style.display='';
}
}
</script>
HTML
<div>
<input type="radio" name="check" value="cash" onclick='showData(this);' checked/>cash
<input type="radio" name="check" value="credit" onclick='showData(this);' />credit
</div>
<table>
<tbody id="cash">
<tr>
<td>Cash User name:</td>
<td>
<input type="text" name="cash1" />
</td>
</tr>
</tbody>
<tbody id="credit" style='display:none'>
<tr>
<td>credit User name:</td>
<td>
<input type="text" name="credit1" />
</td>
</tr>
</tbody>
</table>
I think this will help you :
$(document).ready(function(){
$('#cash,#credit').hide();
$('input[type=radio]').change(function(){
$('#'+$(this).attr('value')).show();
});
});
Related
the issues is that if you check and then uncheck the vacancy_select checkbox, then check the selection checkbox it doesn't change the vacancy_select check status
I have a few checkboxes on screen, the first checkbox $("input[type=checkbox]#selection") will toggle all other checkboxes, on or off depending on the status of the first checkbox.
$('input[type=checkbox]#selection').on('change', function () {
let rows = $("tr.content_list > td > input[type=checkbox].vacancy_select");
for(let i=0; i < rows.length; i++){
$(rows[i]).attr('checked', this.checked);
}
});
if, I select or change the status of any of the other checkboxes then these checkboxes
$("tr.content_list > td > input[type=checkbox].vacancy_select") don't updated when marking this $("input[type=checkbox]#selection") checkbox as checked.
$('input[type=checkbox]#selection').on('change', function() {
let rows = $("input[type=checkbox].vacancy_select");
for (let i = 0; i < rows.length; i++) {
$(rows[i]).attr('checked', this.checked);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="list_table" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>
<input type="checkbox" id="selection" name="selection">Selection
</th>
</tr>
<tr>
<td class="na">
<a class="btn btn-primary" href="{{ asset('/dashboard/vacancy/add')}}" style="color: #FFF">New Vacancy</a>
</td>
</tr>
</thead>
<tr class="content_list">
<td>
<input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
</td>
</tr>a
<tr class="content_list">
<td>
<input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
</td>
</tr>a
<tr class="content_list">
<td>
<input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
</td>
</tr>
</table>
You have to use .prop() for this, also you don't need for loop to set the attribute/prop: here is a fiddle and a working snippet:
$('input[type=checkbox]#selection').on('change', function() {
let rows = $("input[type=checkbox].vacancy_select");
rows.prop('checked', this.checked);
});
$('input[type=checkbox].vacancy_select').on('change', function() {
let selectedRows = $("input[type=checkbox].vacancy_select:checked").length;
let allElements = $('input[type=checkbox].vacancy_select').length;
let checked = false;
if(selectedRows === allElements) {
checked = true;
}
$('input[type=checkbox]#selection').prop('checked', checked)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selection" name="selection">Selection
<input type="checkbox" class="vacancy_select" data-vacancy-id="1">
<input type="checkbox" class="vacancy_select" data-vacancy-id="2">
<input type="checkbox" class="vacancy_select" data-vacancy-id="3">
<input type="checkbox" class="vacancy_select" data-vacancy-id="4">
Objective - user select regular, short or long then toggle between Inch and CM based on the selection made previously.
The first tier is already working so we show a different table based on selecting options regular, short or long now I just need the ability to show a table in inch or CM. please see code below. any help is welcome. thanks
var tables = $('.charge-table');
$('input[name="group1"]').on('change', function() {
tables.hide();
$('#' + $(this).val()).show();
});
#charge {
display: table;
}
.charge-table {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="selection1" type="radio" name="group1" value="charge" checked>Regular
<br/>
<input id="selection2" type="radio" name="group1" value="charge1">Short
<br/>
<input id="selection3" type="radio" name="group1" value="charge2">Long
<br/>
</div>
<br/>
<div>
<input id="selection4" type="radio" name="group1" value="charg3">Inches
<br/>
<input id="selection5" type="radio" name="group1" value="charge4">CM
<br/>
</div>
<table id="charge" class="charge-table">
<tr>
<td>Regular</td>
</tr>
</table>
<table id="charge1" class="charge-table">
<tr>
<td>Short</td>
</tr>
</table>
<table id="charge2" class="charge-table">
<tr>
<td>Long</td>
</tr>
</table>
Separate the Inches and CM to another group.
Add class .charge-row to <tr>s.
Add .charge3 and .charge4 as class to different tr.
Add another input change listener to act the similar action.
Or
Change the use chargeX as class, and create all the combinations from length and type (So created 6 table), add class to each of them like charge1 charge4 ...
When any of the group's value changed, get both value of them, eg. value1=charge1, value2=charge4.
hide all tables.
use $('.' + value1 + '.' + value2).show() to show the target table.
var tables = $('.charge-table');
var rows = $('.charge-row');
$('input[name="group1"]').on('change', function() {
tables.hide();
$('#' + $(this).val()).show();
});
$('input[name="group2"]').on('change', function() {
rows.hide();
$('.' + $(this).val()).show();
});
#charge {
display: table;
}
.charge-row.charge3 {
display: table-row;
}
.charge-table, .charge-row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="selection1" type="radio" name="group1" value="charge" checked>Regular
<br/>
<input id="selection2" type="radio" name="group1" value="charge1">Short
<br/>
<input id="selection3" type="radio" name="group1" value="charge2">Long
<br/>
</div>
<br/>
<div>
<input id="selection4" type="radio" name="group2" value="charge3" checked>Inches
<br/>
<input id="selection5" type="radio" name="group2" value="charge4">CM
<br/>
</div>
<table id="charge" class="charge-table">
<tr class="charge3 charge-row">
<td>Regular</td><td>Inches</td>
</tr>
<tr class="charge4 charge-row">
<td>Regular</td><td>CM</td>
</tr>
</table>
<table id="charge1" class="charge-table">
<tr class="charge3 charge-row">
<td>Short</td><td>Inches</td>
</tr>
<tr class="charge4 charge-row">
<td>Short</td><td>CM</td>
</tr>
</table>
<table id="charge2" class="charge-table">
<tr class="charge3 charge-row">
<td>Long</td><td>Inches</td>
</tr>
<tr class="charge4 charge-row">
<td>Long</td><td>CM</td>
</tr>
</table>
However, if you can save the data in js. I'd prefer only have 1 table, and have a function that will get value from {regular, short, long} and {inches, cm} and create formatted data, then update each td's text to the new data.
var $table = $('.charge-table');
// Fake data.
var data = [['data']];
// Create
var lMapping = {
charge : 'Regular',
charge1: 'Short',
charge2: 'Long'
};
var tMapping = {
charge3: 'Inches',
charge4: 'CM'
};
var renderTable = function() {
// Get value from each group
var value1 = $('input[name="group1"]:checked').val();
var value2 = $('input[name="group2"]:checked').val();
// Put data to each td.
data.forEach(function(rowData, i) {
var $row = $table.find('tr').eq(i);
rowData.forEach(function(item, j) {
var $td = $row.find('td').eq(j);
// Create formatted data from radio values.
var str = lMapping[value1] + ' ' + tMapping[value2] + ' ' + data;
$td.text(str);
});
});
};
$('input[type="radio"]').on('change', renderTable);
// Set init state.
renderTable();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<input id="selection1" type="radio" name="group1" value="charge" checked /> Regular
<br/>
<input id="selection2" type="radio" name="group1" value="charge1"/>Short
<br/>
<input id="selection3" type="radio" name="group1" value="charge2" />Long
<br/>
<hr/>
<div/>
<div>
<input id="selection4" type="radio" name="group2" value="charge3" checked />Inches
<br/>
<input id="selection5" type="radio" name="group2" value="charge4" />CM
<br/>
</div>
<table id="charge" class="charge-table">
<tr>
<td>Regular</td>
</tr>
</table>
I know this is proboly the most asked question out there but I have scoured the net and tried several examples and none of them have worked. Here is my issue.
First I have no control over the TR TD structure, can't use DIV.
I need to be able to display certain TD's based on the select dropdown menu value. I have 4 different id's I am using "to", "to_field", "from", "from_field". The script I have shown is not working. Can someone help me out?
Example: If someone selects "In Use" in the dropdown then I just want all the elementID that have "from" and "from_field" to display only. If someone selects a different value then I would like to change that around.
<script type="text/javascript">
function showstuff(element){
document.getElementById("from").style.display = element=="in_use"?"visibility":"visible";
document.getElementById("to").style.display = element=="in_use"?"visibility":"hidden";
document.getElementById("from_field").style.display = element=="in_use"?"visibility":"visible";
document.getElementById("to_field").style.display = element=="in_use"?"visibility":"hidden";
document.getElementById("from").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("to").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("from_field").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("to_field").style.display = element=="relocated"?"visibility":"visible";
}
</script>
<table>
<tr>
<td><h2>Add/Edit Parts</h2></td>
</tr>
</table>
<form action="includes/inventory_parts.php" method="post" name="myform">
<table cellpadding="10" style="border:solid 1px #000000">
<tr>
<td colspan="20"><h3>Add New Part</h3></td>
</tr>
<tr>
<td style="font-weight:bold">Printer Man Part#</td>
<td style="font-weight:bold">Part#</td>
<td style="font-weight:bold">Title</td>
<td style="font-weight:bold">Serial#</td>
<td style="font-weight:bold">Status</td>
<td id="from" style="font-weight:bold;visibility:hidden">From Printer Serial#</td>
<td id="to" style="font-weight:bold;visibility:hidden;">To Printer Serial#</td>
<td style="font-weight:bold">Submit</td>
</tr>
<tr>
<td><input type="text" name="printer_man_part_number" /></td>
<td><input type="text" name="part_number" /></td>
<td><input type="text" name="title" /></td>
<td><input type="text" name="this_part_serial_number" /></td>
<td>
<select name="status" onchange="showstuff(this.value);">
<option></option>
<option value="in_use">In Use</option>
<option value="relocated">Relocated</option>
<option value="disposed">Disposed</option>
<option value="selling">Selling</option>
</select>
</td>
<td id="from_field"><input type="text" name="from" style="visibility:hidden" /></td>
<td id="to_field"><input type="text" name="to" style="visibility:hidden" /></td>
<td><input type="submit" name="submit" value="Add Part" /></td>
</tr>
</table>
</form>
function showstuff(element) {
// first hide everything
document.getElementById("from").style.visibility = 'hidden';
document.getElementById("to").style.visibility = 'hidden';
document.getElementById("from_field").style.visibility = 'hidden';
document.getElementById("to_field").style.visibility = 'hidden';
var targets;
// select the IDs that should be unhidden based on element
switch (element) {
case 'in_use': targets = ['from', 'from_field']; break;
case 'relocated': targets = ['to', 'to_field']; break;
...
}
// now unhide the selected IDs.
for (var i = 0; i < targets.length; i++) {
document.getElementById(targets[i]).style.visibility = 'visible';
}
}
I need to create sum of the values selected, but i have small problem with the jquery bit.
My html table
<TR>
<TD>
<INPUT disabled onchange=updateDetails() value=33441 CHECKED type=checkbox name=invoiceRow dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees for Searches</TD>
<TD>285.00</TD></TR>
<TR>
<TD><INPUT onchange=updateDetails() value=36486 CHECKED type=checkbox name=invoiceRow dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees</TD>
<TD>3213.03</TD></TR>
my javascript is:
where #InvoiceItemsRows is <tbody> tag
function updateDetails() {
$("#InvoiceItemsRows input[type=checkbox][checked]").parent().last().each(
function(index, value) {
alert(value.html());
}
);
}
Javascript, maybe not as fancy as some of the other ones people have posted but it makes sense.
$(document).ready(function() {
$('[name=invoiceRow]').click(function() {
updateDetails();
});
function updateDetails() {
var total = 0;
var currentnum = 0;
$("input:checked").each(
function(index, value) {
currentnum = $(this).val();
currentnum = Number(currentnum);
total = total + currentnum;
});
alert(total);
}
});
HTML
<TR>
<TD>
<INPUT disabled value="33441" CHECKED type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees for Searches</TD>
<TD>285.00</TD></TR>
<TR>
<TD><INPUT value="36486" CHECKED type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees</TD>
<TD>3213.03</TD></TR>
I fixed some of the missing quotes you may want to finish fixing them though.
Try this (you have to close <Input> tags):
function updateDetails() {
var sum = 0;
$("#InvoiceItemsRows input[type=checkbox]:checked").each(
function() {
sum += parseFloat($(this).closest('tr').children('td:eq(2)').text());
}
);
return sum;
}
alert(updateDetails());
You'll have to change:
$("#InvoiceItemsRows input[type=checkbox][checked]")
To:
$("#InvoiceItemsRows input:checked")
That new rule will return all 'checked' elements. Have a look at the documentation of the :checked selector.
Try this:
var total = 0;
$('#InvoiceItemsRows input:checked').each(function() {
total += $(this).val();
});
I suspect you want to total what's in the <td> though?
you have invalid html your your values need quotes
<tr>
<td>
<input disabled="disabled" onchange="updateDetails()" value="33441" checked="checked" type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"> <input type="hidden" name="isProfFee">
</td>
<td>
Professional fees for Searches
</td>
<td>
285.00
</td>
</tr>
<tr>
<td>
<input onchange="updateDetails()" value="36486" checked="checked" type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"> <input type="hidden" name="isProfFee">
</td>
<td>
Professional fees
</td>
<td>
3213.03
</td>
</tr>
and then
$("#InvoiceItemsRows input:checked")
I have a few radiobuttons in a jsp page. I run a javascript method once the page is loaded that seeks for certain radio buttons and change its name so they work like a radio group.
I'm doing it this way because the radio buttons are inside jsf table and I have no access to the name property when coding and I want all of the radio buttons work like a radio group.
Anyways the script run without problems and the radio buttons' names are changed properly.
But while this works in FF 3 (the work like a radio group) it doesn't work in IE 6 or IE7 though they have the same 'name' property. Does anyone know how can I solve this?
function setRadioGroup (nombreRadio){
var listaRadios = document.getElementsByTagName('input');
var tam = listaRadios.length;
for (i = 0; i < tam; i++){
if (listaRadios[i].type == 'radio' && listaRadios[i].title == 'Seleccionar'){
listaRadios[i].name = nombreRadio;
}
}
}
EDIT: Added the code output of the webpage:
<form id="formulario" name="formulario" method="post"
action="/serequp/faces/administracion/articulosPv.jspx"><input
type="hidden" id="formulario:hidRegTablaArticulos"
name="formulario:hidRegTablaArticulos" value="">
<div class="dr-pnl rich-panel " id="formulario:ContFormularios">
<div class="dr-pnl-h rich-panel-header cabeceraFormulario"
id="formulario:ContFormularios_header">LISTADO DE GRUPOS DE
EQUIPAMIENTOS</div>
<div class="dr-pnl-b rich-panel-body cuerpoFormularios"
id="formulario:ContFormularios_body">
<table id="formulario:botones">
<tbody>
<tr>
<td class="estiloColumnas"><input id="formulario:j_id66"
name="formulario:j_id66"
onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id66':'formulario:j_id66'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id66'} );return false;"
value="Crear" type="button"></td>
<td class="estiloColumnas"><input id="formulario:j_id67"
name="formulario:j_id67"
onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id67':'formulario:j_id67'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id67'} );return false;"
value="Modificar" type="button"></td>
<td class="estiloColumnas"><input id="formulario:j_id68"
name="formulario:j_id68"
onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id68':'formulario:j_id68'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id68'} );return false;"
value="Borrar" type="button"></td>
<td></td>
</tr>
</tbody>
</table>
<table class="dr-table rich-table " id="formulario:tablaArticulos"
border="0" cellpadding="0" cellspacing="0">
<colgroup span="3"></colgroup>
<thead class="dr-table-thead">
<tr class="dr-table-subheader rich-table-subheader ">
<th class="dr-table-subheadercell rich-table-subheadercell "
scope="col" id="formulario:tablaArticulos:j_id69header">
<div id="formulario:tablaArticulos:j_id69header:sortDiv">Nombre</div>
</th>
<th class="dr-table-subheadercell rich-table-subheadercell "
scope="col" id="formulario:tablaArticulos:j_id71header">
<div id="formulario:tablaArticulos:j_id71header:sortDiv">Nombre</div>
</th>
<th class="dr-table-subheadercell rich-table-subheadercell "
scope="col" id="formulario:tablaArticulos:j_id75header">
<div id="formulario:tablaArticulos:j_id75header:sortDiv">Descripción</div>
</th>
</tr>
</thead>
<tbody id="formulario:tablaArticulos:tb">
<tr class="dr-table-firstrow rich-table-firstrow ">
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:0:j_id69">
<table id="formulario:tablaArticulos:0:radioGroup1">
<tr>
<td><input id="formulario:tablaArticulos:0:radioGroup1:0"
type="radio" name="formulario:tablaArticulos:0:radioGroup1"
value="1" onclick="updateSelected('hidRegTablaArticulos', '1');"
title="Seleccionar"><label
for="formulario:tablaArticulos:0:radioGroup1:0"></label></td>
</tr>
</table>
</td>
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:0:j_id71">fff</td>
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:0:j_id75">PRUEBA SDS</td>
</tr>
<tr class="dr-table-firstrow rich-table-firstrow ">
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:1:j_id69">
<table id="formulario:tablaArticulos:1:radioGroup1">
<tr>
<td><input id="formulario:tablaArticulos:1:radioGroup1:0"
type="radio" name="formulario:tablaArticulos:1:radioGroup1"
value="1" onclick="updateSelected('hidRegTablaArticulos', '2');"
title="Seleccionar"><label
for="formulario:tablaArticulos:1:radioGroup1:0"></label></td>
</tr>
</table>
</td>
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:1:j_id71">dd</td>
<td class="dr-table-cell rich-table-cell center "
id="formulario:tablaArticulos:1:j_id75">PRUEBA SDS</td>
</tr>
</tbody>
</table>
<script>
setRadioGroup('radioGroup1');
</script></div>
</div>
<table id="formulario:botonera">
<tbody>
<tr>
<td><input id="formulario:j_id80" name="formulario:j_id80"
onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id80':'formulario:j_id80'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id80'} );return false;"
value="Grabar" type="button"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="formulario" value="formulario"><input
type="hidden" name="autoScroll" value=""><input type="hidden"
name="formulario:j_idcl" value=""><input type="hidden"
name="formulario:_link_hidden_" value=""><script
type="text/javascript">function clear_formulario() {
_clearJSFFormParameters('formulario','',['formulario:j_idcl','formulario:_link_hidden_']);
}
function clearFormHiddenParams_formulario(){clear_formulario();}
function clearFormHiddenParams_formulario(){clear_formulario();}
clear_formulario();</script><input type="hidden" name="javax.faces.ViewState"
value="!40dc077b"></form>*
I finally got the answer!
The solution come from this blog, but with some modification (the blog, as many others, solve the problem for create a new element, not to modify an existant one).
The problem is that Internet Explorer does not allow some attributes modification during the run time. One of these is the attribute name. As it can not be modified, the behaviour is not what you're expecting. The solution is to create a new element, remove the old one and replace it by the new one.
Here the solution (work with Firefox 3 and IE 7):
<script>
function setRadioGroup (name){
var listaRadios = document.getElementsByTagName('input');
var tam = listaRadios.length;
for (i = 0; i < tam; i++){
cur = listaRadios[i];
if (cur.type == 'radio' ){
try {
// if not IE, raise an error and go to catch.
element = document.createElement('<input onclick="alert(this.name + this.value);" type="radio" name="' + name + '" value="' + cur.value + '">');
parentNode = cur.parentNode;
parentNode.insertBefore(element, cur);
parentNode.removeChild(cur);
} catch (err ) {
cur.setAttribute('name', name);
cur.setAttribute('onclick', 'alert(this.name + this.value);');
}
}
}
}
</script>
<html>
<head>
<title>My Page</title>
</head>
<body onload="setRadioGroup('test')">
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="radio" value="Milk"> Milk<br>
<input type="radio" value="Butter" > Butter<br>
<input type="radio" value="Cheese"> Cheese
<hr>
<input type="radio" value="Water"> Water<br>
<input type="radio" value="Beer"> Beer<br>
<input type="radio" value="Wine" > Wine<br>
</div>
</form>
</body>
</html>