Comma separated list from checkbox values - javascript

I've been digging around to try and get a list of comma separated values from a set of checkboxes. There have been lots of useful answers here, but I can't work out a final kink. My code is behaving oddly depending on whether or not the first checkbox is checked and I can't work out why (this is my first ever attempt at javascript!)
<script type="text/javascript">
function updateTextArea() {
var allVals = $('input.gift:checked').map(
function() {return this.value;}).get().join();
$('#txtValue').val(allVals)
}
$(function () {
$('#gift input').click(updateTextArea);
updateTextArea();
});
</script>
And here's the html that accompanies it.
<fieldset id="gift">
<input type='checkbox' name='lFreeProductid' value='8840'
id="lFreeProductid1" class="gift">
</td>
<td class="style42">64 SSG</td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='420' id="lFreeProductid1" class="gift"></td>
<td class="style41">Perfect D</td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='460' id="lFreeProductid1" class="gift"></td>
<td class="style41">Soccer Attack</td>
<td> </td>
</tr>
</fieldset>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
<textarea id="txtValue"></textarea>
I know this is the sort of question that's been asked a thousand times, but I can't seem to find a solution to this specific issue. Any help would be greatly appreciated.

I think your code is working fine !
Check this demo once : https://jsbin.com/vigixi/46/edit?html,js,output
And if this is not the desired output you want. Then let us know what exactly you want.

I advice you to correct all the HTML syntax errors
<fieldset id="gift">
<table>
<tr id="tr1">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='8840' id="lFreeProductid1" class="gift"></td>
<td class="style42"><label for="lFreeProductid1">64 SSG</label></td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='420' id="lFreeProductid2" class="gift"></td>
<td class="style41"><label for="lFreeProductid2">Perfect D</label></td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='460' id="lFreeProductid3" class="gift"></td>
<td class="style41"><label for="lFreeProductid3">Soccer Attack</label></td>
<td> </td>
</tr>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
</fieldset>
<textarea id="txtValue"></textarea>
Your issue could be due to a certain browser or/and doctype

Related

Get specific HTML table element with google script

I've been looking for this same question but none of them seems to have an accurate answer.
I think this should be simpler, I want to get a specific cell from an HTML table in a website using google script.
It needs to work inside google script so pls dont suggest =importhtml, although that's exactly the function I'm looking for.
This is a website example https://prestadores.pami.org.ar/result.php?c=6-2-1-1&beneficio=110313900302&parent=00&vm=2
I need to get the date next to the FECHA DE NACIMIENTO cell, but I dont want to do messy things like indexOf since I have to do it with a few more values.
<table width="480" border="0" cellpadding="3" style="margin-left: 40px;">
<tbody><tr>
<td class="gris"><p>APELLIDO Y NOMBRE:</p></td>
<td class="grisClaro"><p>PEREZ JUANA ANTONIA </p></td>
</tr>
<tr>
<td class="gris"><p>TIPO BENEFICIARIO:</p></td>
<td class="crema"><p>JUBILACION</p></td>
</tr>
<tr>
<td class="gris"><p>N? BENEFICIO:</p></td>
<td class="grisClaro"><p>110313900302</p></td>
</tr>
<tr>
<td class="gris"><p>FECHA DE NACIMIENTO:</p></td>
<td class="crema"><p>08/03/1922</p></td>
</tr>
<tr>
<td class="gris"><p>NACIONALIDAD:</p></td>
<td class="grisClaro"><p>ARGENTINA</p></td>
</tr>
<tr>
<td class="gris"><p>PAIS:</p></td>
<td class="crema"><p>ARGENTINA</p></td>
</tr>
<tr>
<td class="gris"><p>UGL:</p></td>
<td class="crema"><p>LANUS</p></td>
</tr>
<tr>
<td class="gris"><p>DOCUMENTO:</p></td>
<td class="grisClaro"><p>DNI123456</p></td>
</tr>
<tr>
<td class="gris"><p>SEXO:</p></td>
<td class="crema"><p>FEMENINO</p></td>
</tr>
<tr>
<td class="gris"><p>ESTADO CIVIL:</p></td>
<td class="grisClaro"><p>SEPARADO/A LEGAL</p></td>
</tr>
<tr>
<td class="gris"><p>VENCIMIENTO AFILIACION:</p></td>
<td class="crema"><p></p></td>
</tr>
<tr>
<td class="gris"><p>UNIDAD OPERATIVA:</p></td>
<td class="grisClaro"><p>NO ASIGNADA</p></td>
</tr>
<tr>
<td class="gris"><p>ALTA:</p></td>
<td class="crema"><p>01/09/1982</p></td>
</tr>
<tr>
<td class="gris"><p>BAJA:</p> </td>
<td class="grisClaro"><p>10/10/2013</p></td>
</tr>
<tr>
<td class="gris"><p>OTRA OBRA SOCIAL:</p></td>
<td class="crema"><p>NO</p></td>
</tr>
</tbody></table>
Any suggestions?
Using jQuery's contains selector, it can be done like the following easily.
let td = $('table td.gris:contains("FECHA DE NACIMIENTO")');
console.log(td);
let theDate = td.next('td').text();
console.log(theDate);

How to append <div> content in jQuery

How to append below code in jQuery to display dynamically.
<div id="lol">
<tr data-userid="<%=iterator3.next()%>" data-mid="<%=iterator3.next()%>" >
<td width="119">Practise Match</td>
<%-- <td width="119"><%=iterator3.next()%><td>
<td width="119"><%=iterator3.next()%> <td> --%>
<td width="119"><%=iterator3.next()%>pts<td>
<td width="119"><%=iterator3.next()%>rank<td>
</tr>
</div>
$("#lol").append("<tr data-userid="+<%=iterator3.next()%>+" data-mid="+<%=iterator3.next()%>+" >"+ "<td >"+"Practise Match"+"</td>"+"<td >"+<%=iterator3.next()%>+"pts"+"<td>"+" <td width="119">"+<%=iterator3.next()%>+"rank"+"<td>"+"</tr>");
Is this correct or not?
Change the code to
<div id="lol">
<tr data-userid="<%=iterator3.next()%>" data-mid="<%=iterator3.next()%>" >
<td width="119">Practise Match</td>
<%-- <td width="119"><%=iterator3.next()%><td>
<td width="119"><%=iterator3.next()%> <td> --%>
<td width="119"><%=iterator3.next()%>pts<td>
<td width="119"><%=iterator3.next()%>rank<td>
</tr>
</div>
$("#lol").append(`<tr data-userid="${<%=iterator3.next()%>}" data-mid="${<%=iterator3.next()%>}">
<td>Practise Match</td>
<td>${<%=iterator3.next()%>}pts</td>
<td width="119">${<%=iterator3.next()%>}rank</td>
</tr>`);
I changed the code to ES6 standard, that will give a HTML structure look.
You are missing td closing tag.
Hope this will help you.

Choosing more complicated path to element in jquery

I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>
You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Retriving data from a table in HTML by using nextSibling

I have two tables in HTML:
<tr>
<td width="319" align="right" bgcolor="#F5F5F5" class="txtdarkgreybold">Article title:</td>
<td width="346" align="left" bgcolor="#F5F5F5">My title</td>
</tr>
<tr>
<td align="right" class="txtdarkgreybold">Author:</td>
<td align="left">Doe John<br /></td>
</tr>
By using document.getElementsByClassName("txtdarkgreybold") I can retrieve string Article title: but I am interested in what comes after it, that is: My title. How do I do this? In the second table I can get Author: but I am interested in Doe John. I was thinking about nextSibling as a way to get the strings that come after string I can get but I cannot implement it on my own.
You could use nextElementSibling with textContent :
document.querySelector('.txtdarkgreybold').nextElementSibling.textContent
Hope this helps.
console.log( document.querySelectorAll('.txtdarkgreybold')[0].nextElementSibling.textContent );
console.log( document.querySelectorAll('.txtdarkgreybold')[1].nextElementSibling.textContent );
<table>
<tr>
<td width="319" align="right" bgcolor="#F5F5F5" class="txtdarkgreybold">Article title:</td>
<td width="346" align="left" bgcolor="#F5F5F5">My title</td>
</tr>
<tr>
<td align="right" class="txtdarkgreybold">Author:</td>
<td align="left">Doe John<br /></td>
</tr>
</table>

Angular repeat in tables

I have multiple source of income that I want displayed into a table. I will be importing more than 2 values and I want to be able to put them side by side for easy comparing. However, the code below is definitely not working.
https://plnkr.co/edit/Vkcc9YUnEIc3PuuS8Yv3?p=preview
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}>
</td>
<td ng-repeat="type in informationValues1">{{type}}>
</td>
<td ng-repeat="type in informationNameValues2">{{type}}>
</td>
</tr>
</table>
I found this but this doesn't really apply since it is only 1 array and I'll be importing 2+.
Angular ng-repeat in table
you could place each repeat into a different row so your code would look like:
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationValues1">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationNameValues2">{{type}}
</td>
</tr>
</table>
this way they are all listed veritally
if you want them horizontally and you know all of the list are the same length you can do it like this:
`
<table>
<tr ng-repeat="name in informationNames">
<td>{{name}}
</td>
<td>
{{informationValues1[$index]}}
</td>
<td>
{{informationNameValues2[$index]}}
</td>
</tr>
</table>

Categories