I have to get the radiobuttons row by row, but this query gets all the radios in the table.
function Check() {
var table = document.getElementById("tblMain");
for (var i = 0, row; row = table.rows[i]; i++) {
var arrRadios = new Array();
arrRadios = this.document.getElementsByName("radio");
var len = arrRadios.length; //it gives 6 here, when I want 3
}
}
<table id="tblMain">
<tr>
<td>
<input type="radio" name="radio" />1)
<input type="radio" name="radio" />2)
<input type="radio" name="radio" />3)
</td>
</tr>
<tr>
<td>
<input type="radio" name="radio" />1)
<input type="radio" name="radio" />2)
<input type="radio" name="radio" />3)
</td>
</tr>
<asp:Button ID="btn" runat="server"
OnClientClick="return Check()" value="click"/>
</table>
Please suggest a solution by Javascript
Why not do this:
var table = document.getElementById("tblMain");
for (var i = 0, row; row = table.rows[i]; i++) {
var arrRadios = new Array();
arrRadios = document.querySelectorAll('#tblMain tr:nth-child(' + (i+1) + ') input[type=radio]');
var len = arrRadios.length;
}
This might not work, if your browser isn't a reasonably current version.
Althought there is different solution. Here is one close to what you have started
function Check() {
var table = document.getElementById("tblMain");
for (var i = 0, row; row = table.rows[i]; i++) {
var arrRadios = new Array();
arrRadios = this.document.getElementsByName("radio_"+i);
var len = arrRadios.length; //it gives 6 here, when I want 3
}
}
<table id="tblMain">
<tr>
<td>
<input type="radio" name="radio_0" />1)
<input type="radio" name="radio_0" />2)
<input type="radio" name="radio_0" />3)
</td>
</tr>
<tr>
<td>
<input type="radio" name="radio_1" />1)
<input type="radio" name="radio_1" />2)
<input type="radio" name="radio_1" />3)
</td>
</tr>
<asp:Button ID="btn" runat="server"
OnClientClick="return Check()" value="click"/>
</table>
There is two changes : rename the radio with by added _ + the number of the row
Then il your for loop add the same thing to call the radio on the row.
Related
I have 3 input array fields whom I am calling by name using JS. When I call only one array input then its work as per loop, for example, if loop will run 3 times then it will show alert 3 times using below code
function checkFluency() {
var costPrice = document.getElementsByName('costPrice[]');
var salePrice = document.getElementsByName('salePrice[]');
var gst = document.getElementsByName('gst[]');
for (var i = 0; i <costPrice.length; i++) {
var costPrice_arr=costPrice[i];
var salePrice_arr=salePrice[i];
var gst_arr=gst[i];
//var sale = salePrice_arr.value;
var cost = costPrice_arr.value;
//var gst = gst_arr.value;
alert(cost);
}
}
As you can see, I have commented 2 lines which contains value of array input. When I uncomment any of this line. then loop only run once. If loop need to run 3 times, then it will run only one time if I uncomment any of these 2 lines.
Because of this, I couldn't right my code further in JS. Not getting what causing loop to stop. Any idea please, why loop only works if I use only one array input field?
update
It is showing in console Type Error: salePrice_arr is undefined. But it is defined same as "costPrice_arr"!
Change your var gst = gst_arr.value; to var gst_new = gst_arr.value;. Also, you mispelled salePrice_arr.value;. Change it to salePrice_ar.value;
Here:
function checkFluency() {
var costPrice = document.getElementsByName('costPrice[]');
var salePrice = document.getElementsByName('salePrice[]');
var gst = document.getElementsByName('gst[]');
for (var i = 0; i < costPrice.length; i++) {
var costPrice_arr = costPrice[i];
var salePrice_ar = salePrice[i];
var gst_arr = gst[i];
var sale = salePrice_ar.value;
var cost = costPrice_arr.value;
var gst_new = gst_arr.value;
alert(cost);
}
}
<input name="costPrice[]" value="1" />
<input name="salePrice[]" value="2" />
<input name="gst[]" value="3" />
<input name="costPrice[]" value="2" />
<input name="salePrice[]" value="4" />
<input name="gst[]" value="6" />
<input name="costPrice[]" value="3" />
<input name="salePrice[]" value="6" />
<input name="gst[]" value="9" />
<button onclick="checkFluency()">Check</button>
The case for your image is something like this:
function checkFluency() {
var costPrice = document.getElementsByName('costPrice[]');
var salePrice = document.getElementsByName('salePrice[]');
var gst = document.getElementsByName('gst[]');
for (var i = 0; i < costPrice.length; i++) {
var salePrice_arr = 0;
var gst_arr = 0;
salePrice_arr = salePrice[i];
var costPrice_arr = costPrice[i];
gst_arr = gst[i];
var sale_new = salePrice_arr.value;
var cost = costPrice_arr.value;
var gst_new = gst_arr.value;
alert(cost);
}
}
<input name="costPrice[]" value="1" />
<input name="salePrice[]" value="2" />
<input name="gst[]" value="3" />
<input name="costPrice[]" value="2" />
<input name="salePrice[]" value="4" />
<input name="gst[]" value="6" />
<input name="costPrice[]" value="3" />
<input name="salePrice[]" value="6" />
<input name="gst[]" value="9" />
<!-- Extra -->
<input name="costPrice[]" value="3" />
<button onclick="checkFluency()">Check</button>
I want to make a custom cricket team and select multiple players from different teams and then displaying them
function getMultipleCheckbox(inputdata) {
var selectedItems = [];
var count = 0;
for (var i = 0; i < inputdata.length; i++) {
if (inputdata[i].checked) {
selectedItems[count] = inputdata[i].value;
count++;
}
}
for (var loop = 0; loop < selectedItems.length; loop++) {
console.log(selectedItems[loop]);
}
return selectedItems;
}
<p>Select players</p>
<form>
<input type="checkbox" name="owns" value="player1">player1<br/>
<input type="checkbox" name="owns" value="player2">player2<br/>
<input type="checkbox" name="owns" value="player3">player3<br/>
<input type="checkbox" name="owns" value="player4">player4<br/>
<input type="checkbox" name="owns" value="player5">player5<br/>
<input type="checkbox" name="owns" value="player6">player6<br/>
<input type="button" value="Get Values" onclick="getMultipleCheckbox(this.form.owns);" />
</form>
I would like rewrite a dom document just once.
Html:
<body>
<form id="test">
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td width="30%">?</td>
<td>
<input name="q1" type="checkbox" id="q1" value="R"/>
R
<input name="q1" type="checkbox" id="q1" value="T"/>
T
<input name="q1" type="checkbox" id="q1" value="Ra"/>
Ra
<input name="q1" type="checkbox" id="q1" value="Ho"/>
Ho
<input name="q1" type="checkbox" id="q1" value="F"/>
F
<input name="q1" type="checkbox" id="q1" value="Fr"/>
Fr
<input name="q1" type="checkbox" id="q1" value="Fo"/>
Fo
</td>
</tr>
</table>
<br/>
<input name="submit" type="button" onClick="gradeTest()" value="Com"/>
</form>
</body>
I tried with this:
function gradeTest() {
var a1 = document.getElementsByName('q1');
var a1answers = new Array();
var a1right = new Array('R','T','Ra');
var a1bool = true;
for(i = 0; i < a1.length; i++) {
if(a1[i].checked) {
a1answers.push(a1[i].value);
}
}
a1answers.sort();
a1right.sort();
if(a1answers.length == a1right.length) {
for(i = 0; i < a1answers.length; i++) {
if(a1answers[i] != a1right[i]) {
a1bool = false;
break;
}
}
}
else {
a1bool = false;
}
if(a1bool == true) {
var moveable = document.getElementById('test');
var s = '<p align="center"> <img border=0 src="arbol.png" width="250" /></p>';
var div = document.createElement('div');
div.innerHTML = s;
var elements = div.firstChild;
document.body.appendChild(elements);
var newParent = document.body.appendChild(document.createElement('test'));
newParent.removeChild(newParent.firstChild);
newParent.insertBefore(moveable, newParent.firstChild);
correctAnswers++;
}
}
When I execute this code, print a lot of images, but i want one.
In the line 6, i put test whiout test didn't work
Thank you
Check whether you've already appended the new element, and don't add it again.
if(a1bool == true) {
if (!document.getElementById("arbol")) {
var s = '<p align="center" id="arbol"> <img border=0 src="arbol.png" width="250" /></p>';
var div = document.createElement('div');
div.innerHTML = s;
var elements = div.firstChild;
document.body.appendChild(elements);
}
correctAnswers++;
}
I am running this code and it returns me set of values which are checked
var a = [];
var cboxes = $('input[name="suppcheck[]"]:checked');
var len = cboxes.length;
for (var i=0; i<len; i++) {
a[i] = cboxes[i].value;
//document.getElementByName('suppgrp[]').value = a[i];
}
I have a hidden field with ID suppgrp where I want to push all these values retrieved and wanted to pass it in array..
But I am not able to...where am I going wrong?
i have added some extra code which when page load then will call this function and also when change checkbox value then also call this function so all time it will work
loadCheck(); // initial call this function to load data
$('input[type="checkbox"]').change(function()
{
loadCheck();
});
function loadCheck() {
$('#hiddenValue').val('');
$('#showValue').val('');
var checkboxes = $('input[name="suppcheck[]"]:checked');
var data = [];
var len = checkboxes.length;
for (var i=0; i<len; i++) {
data[i] = checkboxes[i].value;
}
$('#hiddenValue').val(data);
$('#showValue').val(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="suppcheck[]" value="1" />
<input type="checkbox" name="suppcheck[]" value="2" />
<input type="checkbox" name="suppcheck[]" value="3" />
<input type="checkbox" name="suppcheck[]" value="4" />
<input type="checkbox" name="suppcheck[]" value="5" />
<input type="checkbox" name="suppcheck[]" value="6" />
<input type="checkbox" name="suppcheck[]" value="7" />
<input type="checkbox" name="suppcheck[]" value="8" />
<input type="checkbox" name="suppcheck[]" value="9" />
<input type="hidden" id="hiddenValue" />
<input type="text" id="showValue" />
</form>
var a = [];
jQuery('input[type="checkbox"]').change(function()
{
var cboxes = jQuery('input[name="suppcheck[]"]:checked');
var len = cboxes.length;
var alval = '';
for (var i=0; i<len; i++) {
a[i] = cboxes[i].value;
if (alval != '') {
alval += ','+a[i];
}else{
alval = a[i];
}
}
jQuery('#myhidden').val(alval);
});
This is relatively simple, but I'm missing something. I have 10 checkboxes on a page, in a table in a form. They all have names and id's of add0, add1, add2, etc. I wanted to build a "check/uncheck all" checkbox, but my code doesn't seem to be working. On firefox, using firebug, but it can't seem to follow the script execution.
function checkboxprocess(current)
{
for (i = 0; i < 10; i++)
{
if (current.checked)
{
document.getElementById("add" + i).checked = true;
}
else
{
document.getElementById("add" + i]).checked = false;
}
}
}
Checkbox:
echo "Select All: <input type=\"checkbox\" name=\"add\" id=\"add\" value=1 onChange=\"checkboxprocess(this)\"><br>";
You have extra ] in your code:
document.getElementById("add" + i]).checked = false;
And you don't have to check if is current checked each time in the loop, you can do it easily like this:
function checkboxprocess(current) {
for (i = 0; i < 10; i++) {
document.getElementById("add" + i).checked = current.checked;
// current.checked will return true/false
}
}
<form>
Select All: <input type="checkbox" onChange="checkboxprocess(this)">
<br /> <br />
<input type="checkbox" id="add0">
<input type="checkbox" id="add1">
<input type="checkbox" id="add2">
<input type="checkbox" id="add3">
<input type="checkbox" id="add4">
<input type="checkbox" id="add5">
<input type="checkbox" id="add6">
<input type="checkbox" id="add7">
<input type="checkbox" id="add8">
<input type="checkbox" id="add9">
</form>