We Keep Coding

How can I capture checkboxes that I'm creating programmatically?

In my code below, I'm pulling in data from SharePoint (basically an excel spreadsheet) and displaying on my page. Checkboxes are pushed to my page using .innerHTML and are given an ID programmatically.
My question: How can I determine whether those checkboxes are checked (being that they could be different each time my app loads) ?
(Once I know what is checked, I'll display more metadata on the next page based on the checks - that part I have figured out)
$.ajax({
url: "myWebsite",
type: "GET",
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function(data){
$.each(data.d.results, function(index) {
var $this = $(this);
var courseName = $this.attr('Title');
var courseNumber = $this.attr('Course_x0020_Number');
var courseUrl = $this.attr('URL');
var trainingGroup = $this.attr('Training_x0020_Group');
var recurrence = $this.attr('Recurrence');
if (trainingGroup == 'Group1') {
if (recurrence == "Don't Specify") {recurrence = '';
} else recurrence = " ("+recurrence+")";
document.getElementById('officeListSpan').innerHTML += '<ul class="courseLists"><li><input type="checkbox" id="'+courseName.replace(/\s+/g, '')+'"/>'+courseName+recurrence+'</li></ul>';
}
if (trainingGroup == 'Group2') {
if (recurrence == "Don't Specify") {recurrence = '';
} else recurrence = " ("+recurrence+")";
document.getElementById('labListSpan').innerHTML += '<ul class="courseLists"><li><input type="checkbox" id="'+courseName.replace(/\s+/g, '')+'"/>'+courseName+recurrence+'</li></ul>';
}
});
},
error: function(){
alert("Failed to query SharePoint list data. Please refresh (F5).");
}
});

You will need a way to know how many checkboxes has been created. When creating the checkboxes, them id must have a generic name and a number, for example id="checkbox0", id="checkbox1 and so on, then write the ammount of checkboxes in some part of the html code and put it some hidden tag. Then when reading the checkboxes data read the ammount of checkboxes and do a for
function getCheckboxes(){
var ammount = parseInt(document.getElementById("checkBoxesAmmount"));
var checkbox;
for(var i = 0; i<ammount; i++){
checkbox = document.getElementById("checkbox"+i);
//do staff
}
return;
I hope this works for you c:

This bit of jQuery returns all the checked input boxes that are in a ul with the class courseList:
jQuery('ul.courseList input:checked')
If your question is asked because the course name might change (your checkbox IDs are based on the course name), I suggest switching to the course number instead (or an appropriate mix of the two).
If you want to know if your dynamically created checkboxes were checked and want to do this via Javascript before the form is submitted, then add a class to your checkboxes (say dynamicCourse) and look for get the checked checkboxes via jQuery('input.dynamicCourse:checked').
Also, your checkboxes in your example don't have a value attribute set. If you're submitting it to a backend, you'll probably want it to have some value (course number would be my suggestion from the looks of it).

Oracle APEX | Validate Tabular form Row by Row

I have tabular form to add order details for an order,
Tabular form has Popup LOV with this custom attribute:
onchange="javascript:do_cascade(this);"
here is the code of the last function
function do_cascade(pThis)
{
var row_id=pThis.id.substr(4);
apex.server.process("cascade_order_values", { x02: $(pThis).val()},
{type:"GET", dataType:"json", success:function(json)
{
var cond=0;
// this var as flag changes to 1 when the new value found in tabular form.
var l_code=$(pThis).val();
// to catch selected value to compare it with tabular form values
for (i =row_id;i>0;i=i-1)
// this loop in order to check all tabluar form #f02_ column values
{
var id=('000'+i);//.slice(-4,0);
var curr_id='#f02_'+id;
var curr_code=$(curr_id).val();
if(curr_code==l_code)
{
$('#f05_'+id).val('got it');
$('#f05_'+id).focus();
// i=0; cond=1;
} else cond=0;
}
if (cond==0)
{
$('#f06_'+row_id).val(json.price);
$('#f04_'+row_id).val(json.pro_name);
}
else {
// I want to write something here to delete the new added row
}
}
}
);
}
what the last function do shortly: when selected value change of the Popup LOV the function call application process to query and return some data and set them to the tabular form fields, and this perform correctly.
here is the application process than this function process:
declare
price number;
pro_code nvarchar2(20):=null;
pro_name nvarchar2(50);
begin
pro_code:=apex_application.g_x02;
SELECT nvl(sell_price,0) into price from products where product_code=pro_code;
SELECT C.CAT_NAME || ' - ' || U.UNIT_NAME into pro_name
FROM PRODUCTS P , CATEGORIES C, UNITS U
WHERE P.CAT_ID=C.CAT_ID AND P.UNIT_ID=U.UNIT_ID AND P.PRODUCT_CODE=pro_code;
sys.htp.p('{"price":"'||price||'", "pro_name":"'||pro_name||'","code":"'||pro_code||'"}');
EXCEPTION
WHEN others
THEN
pro_name:='الرقم غير صحيح';
sys.htp.p('{"price":"'||0||'", "pro_name":"'||pro_name||'","code":"'||pro_code||'"}');
end;
THE PROBLEM IS:
I want to check if the selected product code exist in the tabular form that mean check tabular form row by row from current row to the first one when the selected value exists move the focus to item #f05_ and set a value to it
and then delete the new row that was added to the tabular form
How can I do that Please.
Help Please!..

The problem is in deleting the whole row from tabular form,
so replace your conditional lines with this code:
if(curr_code==l_code)
{
$(pThis).val('');
$('#f02_'+row_id).closest("tr").remove();
$('#f05_'+id).val(parseInt($('#f05_'+id).val())+1);
$('#f05_'+id).focus(); i=0; cond=1; }
else
cond=0;

Adding custom attribute values of dynamically created dropdowns to another element

I have a bit of HTML here:
<tr taskId="(#=obj.task.id#)" assigId="(#=obj.assig.id#)" class="assigEditRow" >
<td><select name="resourceId" class="get-resources formElements"></select></td>
<td><span class="resources-units"></span></td>
<td><span class="resources-quantity"></span></td>
<td><input type="text" placeholder="Required Q"></td>
<td align="center"><span class="teamworkIcon delAssig" style="cursor: pointer">d</span></td>
</tr>
And a bit of JS here:
'use strict';
function addResourceFunction(){
let ResourcesJSON = (json) => {
let Resources = json;
console.log(Resources);
let contactsLength = json.length;
let arrayCounter = -1;
let resID;
let resName;
let resUnit;
let resQuantity;
let Option = $('<option />');
let assignedID = $('tr.assigEditRow:last').attr("assigId");
while(arrayCounter <= contactsLength) {
arrayCounter++;
resID = Resources[arrayCounter].ID;
resName = Resources[arrayCounter].name;
resUnit = Resources[arrayCounter].unit;
resQuantity = Resources[arrayCounter].quantity;
$('.assigEditRow').last().find('select').append($('<option>', {
value: resName.toString(),
text: resName.toString(),
resourceID: resID.toString(),
resourceUnit: resUnit.toString(),
resourceQuantity: resQuantity.toString()
}));
}
}
$.getJSON("MY JSON URL IS HERE", function(json) {
ResourcesJSON(json);
});
};
So what's actually going on here: I get my data from the URL (JSON array), trigger the addResourceFunction() on click to create a new table row and to add a new select with options passed from the array. As you see from my HTML markup, the select input is placed in td.get-resources, and all that works good. I get my date set, I populate the select field and all works good. I can add as many rows/select dropdowns as I want.
Also, every option has a few custom attributes (you can see it in my JS code above), and I want to add the values of those attributes to the second and third column of the row (in HTML those are span.resources-units and span.resources-quantity). The thing is, I have no clue how to make it work 1:1, meaning that one select dropdown "alters" only units and quantity of its own row. Below is the code for that:
let idCounter = 1;
$(document).on('change', '.get-resources', function() {
$('.assigEditRow').last().find('.resources-units').attr('id', 'units-' + idCounter);
$('.assigEditRow').last().find('.resources-quantity').attr('id', 'quantity-' + idCounter);
this.resourceUn = $( ".get-resources option:selected" ).attr( "resourceUnit" );
this.resourceQuant = $( ".get-resources option:selected" ).attr( "resourceQuantity" );
$('#units-' + idCounter).append(this.resourceUn);
$('#quantity-' + idCounter).append(this.resourceQuant);
idCounter++;
});
What happens is that if I add one select input, and change options, the thing works. When I add another one and change its options, it gets attributes of the first one. Adding more - same thing. Whatever I change, it takes the attribute value of the first item added.

Try getting the id from the element instead of from the variable, since you always update the element with the id of the counter, instead of the element with the id of the row that was clicked.
Hmm, what does the counter do exactly? The more I look at it, the less I understand. What I do know is that you're not selecting the correct elements by using the idCounter to reference the correct row.
You want to do something like
$(document).on('change', '.get-resources', function() {
//var row = this;
this.find(/* Some path to the second column */).att(/* some att to change */);
this.find(/* Some path to the third column */).att(/* some att to change */);
});
where you always use the row as the root again, instead of finding a certain id, so you only update that row.
Native:
<table>
<tr>
<td>
<select>
<option data-text="resName1" data-resourceID="resID1" data-resourceUnit="resUnit1" data-resourceQuantity="resQuantity1">1</option>
<option data-text="resName2" data-resourceID="resID2" data-resourceUnit="resUnit2" data-resourceQuantity="resQuantity2">2</option>
<option data-text="resName3" data-resourceID="resID3" data-resourceUnit="resUnit3" data-resourceQuantity="resQuantity3">3</option>
</select>
</td>
<td>
<div class="column2"></div>
</td>
<td>
<div class="column3"></div>
</td>
</tr>
</table>
<script>
document.addEventListener('change', function ( event ) {
var select = event.target,
option = select.options[select.selectedIndex],
values = {
'text' : option.getAttribute('data-text'),
'resourceID' : option.getAttribute('data-resourceID'),
'resourceUnit' : option.getAttribute('data-resourceUnit'),
'resourceQuantity' : option.getAttribute('data-resourceQuantity')
},
row = select.parentNode.parentNode,/* depending on how deep the select is nested into the tr element */
column2 = row.querySelector('.column2'),
column3 = row.querySelector('.column3');
column2.textContent = 'some string with the values you want';
column3.textContent = 'some string with the other values you want';
});
</script>
Basically you start with the select that was changed, from there you get the option node that was clicked. Then you get the attributes you need from that option. Then you go up a few nodes to the row parent and find the two columns inside that row. Then you can set the content of these two columns.

Why is this tiny bit of jQuery messing up the rest of my JavaScript?

I have an area on my page that has tabular data. I am attempting to add in-line editing of the values in each row. I have tried jqGrid, but it will not work for my needs. So, I am attempting a "home brew" version of in-line editing. My table is simple enough:
<table>
<tbody>
<tr id="row0" onClick="changeMe(this);">
<td>
some value
</td>
<td>
some other value
</td>
<td>
...
</td>
</tr>
<tr id="rowN" onClick="changeMe(this);">
<td>
...
</td>
</tr>
</tbody>
</table>
When a user clicks anywhere on the TR, I want my JavaScript to change all static text to the proper form inputs. The first two elements of the form are select boxes. The first box needs to be filled in before the second box's options are available. Here is part of the JavaScript I am using to accomplish this:
function changeMe(row){
var serviceArray = ["option_1-1","option_1-2","option_1-3","option_1-4","option_1-5"]
for(var i=0; i<2; i++){
if(row.children[i].children.length == 0){
var selectBox = document.createElement("select");
var.setAttribute("id",serviceArray[i]);
var.setAttribute("name",serviceArray[i]);
switch(i){
case 0:
$.getJSON("./dataGetter.php?qid=" + Math.random(),function(data){
$.each(data,function(key,value){
var option = document.createElement("option");
var innerValue = document.createTextNode(value);
option.appendChild(innerValue);
option.setAttribute("value",value);
selectBox.appendChild(option);
});
});
selectBox.setAttribute("onChange","someFunction(this.value)");
break;
case 1:
selectBox.setAttribute("onChange","someOtherFunction(this.value)");
var option = document.createElement("option");
option.setAttribute("selected","selected");
option.setAttribute("disabled","disabled");
var textNode = document.createTextNode("\u2190 choose that first");
option.appendChild(textNode);
selectBox.appendChild(option);
break;
}
row.children[i].innerHTML = null;
row.children[i].appendChild(selectBox);
}
}
}
This is where my problem comes in. when a user clicks the TR, child 0 of the TR, which is a TD with text, should be converted into the appropriate select box, filled with the appropriate data from the database. This, however, is not happening. What is happening, is that child 1 of the TR (i.e., the second TD) is the one being converted instead.
Just as a test, I added a new test array to the function:
var testArray = new Array("option_2-1","option_2-2","option_2-3","option_2-4","option_2-5");
and changed my JavaScript to the following:
function changeMe(row){
var serviceArray = ["option_1-1","option_1-2","option_1-3","option_1-4","option_1-5"];
var testArray = new Array("option_2-1","option_2-2","option_2-3","option_2-4","option_2-5");
for(var i=0; i<2; i++){
if(row.children[i].children.length == 0){
var selectBox = document.createElement("select");
var.setAttribute("id",serviceArray[i]);
var.setAttribute("name",serviceArray[i]);
switch(i){
case 0:
$.each(testArray,function(key,value){
var option = document.createElement("option");
var innerValue = document.createTextNode(value);
option.appendChild(innerValue);
option.setAttribute("value",value);
selectBox.appendChild(option);
});
selectBox.setAttribute("onChange","someFunction(this.value)");
break;
case 1:
selectBox.setAttribute("onChange","someOtherFunction(this.value)");
var option = document.createElement("option");
option.setAttribute("selected","selected");
option.setAttribute("disabled","disabled");
var textNode = document.createTextNode("\u2190 choose that first");
option.appendChild(textNode);
selectBox.appendChild(option);
break;
}
row.children[i].innerHTML = null;
row.children[i].appendChild(selectBox);
}
}
}
When I make this change, the first TD (child 0) of the TR is changed as it should be.
When I go directly to my dataGetter.php page in the browser, I get the correct data:
["option_2-1","option_2-2","option_2-3","option_2-4","option_2-5"]
I know this is the correct data, because I put an "alert();" just after the "$.each" line, and the proper data was shown in the alert pop-up.
So, I'm not sure what is happening here. It looks like the one line
$.getJSON("./dataGetter.php?qid=" + Math.random(),function(data){
}
is messing up my switch statement, and populating the second TD (child 1) with child 0 and child 1 data both. It's almost like the "break" in "case 0" is being removed, and all the logic is falling through to the second case.
UPDATE: If I add the line "alert(i);" after my for loop, then everything works as it should ... except for the annoying pop-up.

For all those that are interested, I have figured out the problem. It appears that my switch statement was completing before the AJAX return came back. So, I set "async" to "false" and everything worked perfectly.

Is it possible to update the name of each checkbox in an html table using jquery

I have a html table where one of the columns is a set of checkboxes.
There are three checkboxes in each row. The original names of the checkboxes are:
Row 1: person[0].Choices (value=1 name= person[0].Choices value=2 person[0].Choices, etc. .)
Row 2: person[1].Choices(value=1 name= person[1].Choices value=2 person[1].Choices, etc . .)
Row 3: person[2].Choices(value=1 name= person[2].Choices value=2 person[2].Choices, etc . .)
I want to:
Delete the first row of the html table.
Rename all of the checkbox indexers so at the end of it, there are two left
Row 1: person[0].Choices (value=1 name= person[0].Choices value=2 person[0].Choices, etc. .)
Row 2: person[1].Choices(value=1 name= person[1].Choices value=2 person[1].Choices, etc . .)
but note that since the first row has been deleted what was checked in Row 2 before is now in Row 1 and what used to be in Row 3 is now in Row 2, etc.
Can this be done through jQuery or Javascript as I need them to be in consecutive order for the default asp.net MVC binding to work.
EDIT
I found an image that describes what my table looks like to hopefully clarify the point.
http://weblogs.asp.net/blogs/psperanza/CheckboxGrid_6F9D4218.png

I believe you can just name them person[] and they will be indexed automatically when the form is submit.
As per your updated question, it seems like the simplest way would be to use the jQuery attribute manipulator mentioned in another answer. Still... It feels like there is a better way to do this.
As for the jQuery, you should add a class (like 'person') to each of the form elements, and then use this: (untested)
$('#person:first').remove()

I'm not sure I 100% understand your question, but you can change the name of elements pretty easily, or any other attribute like this:
$(selector).attr('name','new_input_name');

i got it working through some other SO feedback and put the response below. If anyone thinks this can be optimized, please let me know . .
<script type="text/javascript">
$(document).ready(function() {
$(".removeButtonQuestion").live("click", function(event) {
debugger;
var row = $(this).closest("tr").get(0).rowIndex;
var col = $(this).closest("td").get(0).cellIndex;
$(this).closest("tr").remove();
var input = $("#questionsTable :checkbox");
for (i = 0; i <= input.length; i++) {
var checkbox = input[i];
var row1 = $(checkbox).closest('tr').get(0);
var rowIndex = row1.rowIndex;
if (rowIndex >= row) {
var newRowIndex = rowIndex - 1;
$(checkbox).attr('name', 'updater.person[' + newRowIndex + '].Choices');
}
}
});
});
</script>