function perform_global(tablecounter)
{
for (index = 1; index <= 2; ++index) {
var dnsname = "dns_name"+index;
oRadio = document.getElementsByName(dnsname);
alert (" radio ID " + dnsname + " " + index + "length " + oRadio.length);
for(var i = 0; i < oRadio.length; i++)
{
if(oRadio[i].checked)
{
alert( "Checked Value is " + oRadio[i].value );
}
}
}
}
<form id=globe>
<table id=x >
<THEAD><TR>
<TH> DNSNAME </TH>
</TR> </THEAD>
<TBODY id="tbody_1_1"> <TR>
<TD>
<input type='radio' name='dns_name1' value='service_name_xx' checked> service_names_xx
</TD>
<TD>
<input type='radio' name='dns_name1' value='service_name_yy' > service_name_yy
</TD>
</TR></TBODY>
</table>
<table id=y>
<THEAD><TR>
<TH> DNSNAME </TH>
</TR> </THEAD>
<TBODY id="tbody_1_2"> <TR>
<TD>
<input type='radio' name='dns_name2' value='service_name_xxx' checked> service_names_xxx
</TD>
<TD>
<input type='radio' name='dns_name2' value='service_name_yyy'> service_name_yyy
</TD>
</TR></TBODY>
</table>
<button onclick="perform_global()">
</form>
If I understand your question correctly, then one option to achieve what you require would be via the querySelectorAll() and getAttribute() methods.
First, pass the following selector to querySelectorAll() to acquire all radio input elements that are checked:
querySelectorAll('input[type="radio"]:checked')
Next, iterate the list of matching elements that this query returned, and get the corresponding value attribute (and name attribute if required) of each element via the getAttribute() method:
radio.getAttribute("value")
These ideas can be combined together as follows:
function perform_global(event) {
// Prevent button from submitting
event.preventDefault();
// Use querySelectorAll to select radio elements that are checked
for (let radio of document.querySelectorAll(`input[type="radio"]:checked`)) {
// Use getAttribute to aquire value attribute for checked radio
console.log("Checked group:" + radio.getAttribute("name") + ", value:" + radio.getAttribute("value"));
}
}
<form id=globe>
<table id=x>
<TH> DNSNAME </TH>
<TD>
<input type='radio' name='dns_name1' value='service_name_xx' checked> service_names_xx
</TD>
<TD>
<input type='radio' name='dns_name1' value='service_name_yy'> service_name_yy
</TD>
</table>
<table id=y>
<TH> DNSNAME </TH>
<TD>
<input type='radio' name='dns_name2' value='service_name_xx' checked> service_names_xx
</TD>
<TD>
<input type='radio' name='dns_name2' value='service_name_yy'> service_name_yy
</TD>
</table>
<!-- Pass event to onclick handler -->
<button onclick="perform_global(event)">Button</button>
</form>
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">
I have a grid setter in javascript like this :
function AddMdrPymt(){
var f = document.frmPL0011;
var grid = document.getElementById("mdrPymtGrid");
var numRows = grid.rows.length;
grid.insertRow(numRows);
grid.rows[numRows].insertCell(0);
grid.rows[numRows].insertCell(1);
grid.rows[numRows].insertCell(2);
grid.rows[numRows].insertCell(3);
grid.rows[numRows].cells[0].innerHTML = "<input type='checkbox' value='" + curRow + "' name='__mdrPymt' id='__mdrPymt'>";
grid.rows[numRows].cells[1].innerHTML = "<table border='0' align='center'><tr align='center'><td><input type='text' onkeyPress='checkNumber(this)' name='txt_strtAmnt' id='txt_strtAmnt' class='" + txtclass + "' maxlength='18' size='25' fieldName='<%=LangFormatter.getString("PL0011_LoanStartAmnt", true)%>' onblur='checkData(this)' value = '" + val + "' "+dsb+"></td></tr></table>";
grid.rows[numRows].cells[2].innerHTML = "<table border='0' align='center'><tr align='center'><td><input type='text' onkeyPress='checkNumber(this)' name='txt_endAmnt' id='txt_endAmnt' class='portlet-form-input-field' maxlength='18' size='25' fieldName='<%=LangFormatter.getString("PL0011_LoanEndAmnt", true)%>' onblur='checkData2(this)'></td></tr></table>";
curRow += 1;
And this is the grid HTML, the HTML code for the grid tittle, and the function above is function when user press add button
<table width="95%" align="center">
<tr>
<td>
<input name="addBtn" id="addBtn" type=button class='btn' onmouseover="this.className='btnHov'" onmouseout="this.className='btn'" value="<%=LangFormatter.getString("button_add",true)%>" onclick="AddMdrPymt()" tabindex="4">
<input name="delBtn" id="delBtn" type=button class='btn' value="<%=LangFormatter.getString("button_dlt",true)%>" onclick="delMdrPymt()" onmouseover="this.className='btn btnHov'" onmouseout="this.className='btn'" tabindex="5">
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="1" cellpadding="1" name="mdrPymtGrid" id="mdrPymtGrid" class="grid" width="95%">
<thead class="header">
<th width="1%"></th>
<th width="20%"><%=LangFormatter.getString("PL0011_LoanStartAmnt",true)%></th>
<th width="20%"><%=LangFormatter.getString("PL0011_LoanEndAmnt",true)%></th>
<th width="20%"><%=LangFormatter.getString("PL0011_FixAmntInd",true)%></th>
<th width="20%"><%=LangFormatter.getString("PL0011_FixCashAmnt",true)%></th>
<th width="20%"><%=LangFormatter.getString("PL0011_CashbackLoanAmnt",true)%></th>
</thead>
</table>
</td>
</tr>
<tr>
<td>
<input name="addBtn" id="addBtn" type=button class='btn' onmouseover="this.className='btnHov'" onmouseout="this.className='btn'" value="<%=LangFormatter.getString("button_add",true)%>" onclick="AddMdrPymt()" tabindex="6">
<input name="delBtn" id="delBtn" type=button class='btn' value="<%=LangFormatter.getString("button_dlt",true)%>" onclick="delMdrPymt()" onmouseover="this.className='btn btnHov'" onmouseout="this.className='btn'" tabindex="7">
</td>
</tr>
</table>
How to get value from txt_strtAmnt ?
Thank you
Please use the below code snippet to get the TABLE > TR > TD HTML elemnt value : -
/* To get any TD element value. If one input type inside TD element.
No need to mention the id name as we are getting the value using Tag Name. */
var grid = document.getElementById("mdrPymtGrid");
var tableRows = grid.getElementsByTagName("tr");
for (var j = 0 ; j <= tableRows.length; j++){
var tds = tableRows[j].getElementsByTagName("td");
for (var k = 0 ; k <= tds.length; k++){
var strtAmntVal = tds[k].getElementsByTagName('input')[0].value;
break;
}
}
If you are using grid with multiple rows then solution provided by #Arun will not work,
To make it work
1)find grid element first with document.getElementById('gridid');
2)iterate through its children
3)in that iteration loop find document.getElementById('txt_strtAmnt').value
I am sure that will help you !
also we can achieve through JQuery if you want
<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();
});
});
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>