Develop Reference

How to add an id to an array by clicking on checkbox with javascript?

I have a table with some values, the last input is a checkbox.
I need to save the id of the input into an array only when is checked.
This is my partial table:
<table id="produtcTable" class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Producto</th>
<th scope="col">Precio de lista</th>
<th scope="col">Agregar</th>
</tr>
</thead>
<tbody>
<tr th:each="stock : ${stockList}">
<td th:text="${stock.productName}"></td>
<td th:text="${stock.price}"></td>
<td class="text-center">
<input class="form-check-input" type="checkbox" th:attr="id=${stock.stockCode}" onclick="myFunction(this)" aria-label="...">
this is my javascript that does not work:
<script >
function myFunction(product) {
var arr= [];
$('input[id='+ product.id +']:checked').each(function () {
arr.push(product.id);
});
alert(arr.toString());
};
</script>
what am I doing wrong?

I can't see a id attribute on you checkbox in you snippets. But there is some code i can not identify (not mentioned in post) setting the id. Please make sure there is an id in your current DOM (Browser Development tools: inspector). According to your snippet you can try the follwing:
<input type="checkbox" id="cb1" onclick="myFunction(this)"/>
<input type="checkbox" id="cb2" onclick="myFunction(this)"/>
and the following JS code would update an global array the the clicked checkbox id:
var arr= [];
function myFunction(inputCB) {
arr.push(inputCB.id);
alert(arr);
}

Custom validation plugin fails with multiple table rows

Trying to self create a validation that compares Gross and Tare values in the table using jQuery validation plugin. Tare should always be smaller than Gross.
Here is the JS code:
$.validator.addMethod('lessThan', function (value, element, param) {
if (this.optional(element)) return true;
var i = parseInt(value);
var j = parseInt($(param).val());
return i <= j;
}, "Tare must less than Gross");
$('#myForm').validate({rules: {tare: {lessThan: ".gross"}}});
And my HTML:
<form id="myForm">
<table id="lineItemTable">
<thead>
<th>
<tr>
<td>Gross</td>
<td>Tare</td>
</tr>
</th>
</thead>
<tbody>
<tr>
<td><input type="text" name='gross' class="gross"/></td>
<td><input type="text" name='tare' class="tare"/></td>
</tr>
<tr>
<td><input type="text" name='gross' class="gross"/></td>
<td><input type="text" name='tare' class="tare"/></td>
</tr>
</tbody>
</table>
</form>
This code works fine when only have one row involved.
When comes two table rows, it compares the 2nd row tare value with the 1st row gross value. Apparently I want it to compare 2nd row tare value with 2nd row gross value. Also for some reason the error message shows up at the 1st row.
Here is one screen shot:
Please advise how do I change my code to make it working properly.
And here is the CDN that I am using:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>

Looking for $('.gross').val() will always retrieve the value of the first matched element (in the whole document).
Instead, look only in the row containing the element being validated:
var j = parseInt($(element).closest('tr').find(param).val());
$.validator.addMethod('lessThan', function(value, element, param) {
console.log(element);
if (this.optional(element)) return true;
var i = parseInt(value);
var j = parseInt($(element).closest('tr').find(param).val());
return i <= j;
}, "Tare must less than Gross");
$('#myForm').validate({
rules: {
tare: {
lessThan: ".gross"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="myForm">
<table id="lineItemTable">
<thead>
<th>
<tr>
<td>Gross</td>
<td>Tare</td>
</tr>
</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" name='gross' class="gross" />
</td>
<td>
<input type="text" name='tare' class="tare" />
</td>
</tr>
<tr>
<td>
<input type="text" name='gross' class="gross" />
</td>
<td>
<input type="text" name='tare' class="tare" />
</td>
</tr>
</tbody>
</table>
</form>

Javascript to get the text of checked checkboxes

How can I get the checked checkboxes using JavaScript for the following HTML.
All my check boxes will have id's as follows as shown in the HTML
SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0
SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1
// ... and so on, up to
SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_n
I tried with the following code
var IDtoFind="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_"
var txts = document.getElementsByTagName('input');
for (var i = 0; i < txts.length; ++i) {
if (txts[i].name.indexOf(IDtoFind)!=-1) {
if(txts[i].checked){ alert(txts[i].id); }
// targetId = txts[i].id;
}
}
But its not working . Ineed to get the text of the checkbox labels
<table id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceTable" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td>
<span class="ms-RadioText" title="NO SECURITY ISSUE Observed">
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked">
<label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0">NO SECURITY ISSUE Observed</label>
</span>
</td>
</tr>
<tr>
<td>
<span class="ms-RadioText" title="Staff NOT wearing identification / name badge">
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1" type="checkbox">
<label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1">Staff NOT wearing identification / name badge</label>
</span>
</td>
</tr>
</tbody>
</table>

You can use the nextelementsibling property like
function get() {
var inputs = document.querySelectorAll('input[type="checkbox"][id^="SECURITY_"]'),
labels = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
labels.push(inputs[i].nextElementSibling.innerHTML.trim())
}
}
alert(labels)
}
<table id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceTable" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td>
<span class="ms-RadioText" title="NO SECURITY ISSUE Observed">
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked">
<label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0">NO SECURITY ISSUE Observed</label>
</span>
</td>
</tr>
<tr>
<td>
<span class="ms-RadioText" title="Staff NOT wearing identification / name badge">
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1" type="checkbox">
<label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1">Staff NOT wearing identification / name badge</label>
</span>
</td>
</tr>
</tbody>
</table>
<button onclick="get()">Get</button>
Note: You can simplify the checkbox selector, if you can add a class to those checkboxes
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked" class="security-multichoiceoption"/>
then
inputs = document.getElementsByClassName('security-multichoiceoption')

here
i made a demo which returns an array of maching objects you can simply reach elements by using those function there it returns an array so those()[0].id will simply return the id of first selected element

Apply actions from loop to series of elements, once per element

I have the following situation:
A form has system-generated fields inside a with class "formFieldLabel" (this is a form generated with a from generator). This isn't screen-reader friendly because it doesn't use label tags, and my goal is to basically theme and make more-accessible the forms generated by this system. So, my attempt with this script is to...
1) Loop through the form, copying the .formFieldLabel contents into array "labelArray"
2) After this, paste the appropriate array value inside a label tag next to the input tag
3) Finally, remove the .formFielLabel class, which isn't done yet but I can easily do this part
// HTML example for one part of the multiple fields
<div class="formField">
<table>
<tr>
<td class="formFieldLabel" >First Name<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
<td class="formFieldLabel" style="padding-left: 5px">Last Name<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
</tr>
<tr>
<td ><input type="text" class="l6e formFieldText formFieldMediumLeft" id="form_0004_fld_2_fn" name="First Name" value=""></td>
<td style="padding-left: 5px"><input type="text" class="l6e formFieldText formFieldMediumRight" id="form_0004_fld_2_ln" name="Last Name" value=""></td>
</tr>
<tr><td> </td></tr>
<tr>
<td class="formFieldLabel">Email Address<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
</tr>
<tr>
<td colspan="2"><input type="Email" class="l6e formFieldText formFieldLarge" id="form_0004_fld_2_em" name="E-mail" value=""></td>
</tr>
</table>
</div>
Here's the script I have so far to do this. The problem is that it runs the entire loop for each input, so next to each input it shows FirstNameLastNameEmail and so on. I feel like I'm conceptually going in the wrong direction here.
// jQuery
var label = $(".formFieldLabel");
var labelArray = [];
for(var i=0;i < label.length; i++) {
var arrValue = label[i].innerHTML;
labelArray.push(arrValue);
insertLabel = $("<label>").append(labelArray[i]).append("</label>");
$(".formFieldText").before(insertLabel);
};
JSFiddle: http://jsfiddle.net/qGgwT/
Can anyone point me in the right direction here please?

Try
var label = $(".formFieldLabel");
label.contents().filter(function(){
return this.nodeType == 3 && $.trim($(this).text()).length > 0 ;
}).wrap('<label />')
Demo: Fiddle
If you want to wrap the text and the * with the label then
$(".formFieldLabel").wrapInner('<label />')
Demo: Fiddle

Javascript: Parsing html table

I am working on a html page. The page has a table with 3 columns and a button. One of the columns of the table is a check box (The number of rows are changed dynamically):
<table cellpadding="0" cellspacing="0" border="1" class="display" id="tag" width="100%">
<tbody>
<tr>
<td align="center">
<input type="checkbox" class="case" name="case" value="0"/>
<td>fruit</td>
<td>apple</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" class="case" name="case" value="1"/>
<td>fruit</td>
<td>pear</td>
</tr>
</tbody>
</table>
<p><input type="button" value="Generate" onclick="generate()"></p>
When user click the "Generate" button, the generate() function will generate a special string base on the column of each row.
My question is that how can I check if the "checkbox" row is checked or not? I would like to filter those non-checked rows when I generate the string.
Thanks.

Filter the rows based upon which have a checked checkbox:
var rows = $(".case:checked").closest("tr");
This returns a jQuery object that contains all of your table rows housing checked checkboxes.

Call getElementsByName will give you an array of references of your checkboxes.
Loop the array in order to get the values.
var arr = document.getElementsByName("case");
for(i = 0; i < arr.length; i++){
if(arr[i].checked){
doSomething;
}
}