We Keep Coding

How do I make an onclick event for a dynamically added checkbox? (JavaScript)

I'm new to html and learning through YouTube and such. I'm writing a JavaScript which allows me to show a custom window with checkboxes and textboxes (and labels) on it. I disabled the textboxes to begin with, but I would like them to be enabled when the corresponding checkboxes are checked.
I've searched on the internet for a solution, already tried using:
document.getElementById('chb1').onclick = function() { //my function };
or
document.getElementById('chb1').onclick = //my function;
but neither of them works.
function MyCheckboxWindow()
{
this.render = function(func,titel,dialog,checktext1)
{
var dialogboxbody = document.getElementById ('dialogboxbody');
dialogboxbody.innerHTML = dialog + ': <br>';
if(checktext1 != null)
{
dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1"><label for="chb1" class="lbl" id="lbl1"></label>'
+ '<label for="txt1">€</label> <input type="text" id="txt1" value="0,00" disabled>';
document.getElementById('lbl1').innerHTML = checktext1 + ': ';
document.getElementById('chb1').onclick = alert('');
}
else if(!checkboxCheck)
{
dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1"><label for="chb1" class="lbl" id="lbl1"></label>'
+ '<label for="txt1">€</label> <input type="text" id="txt1" value="0,00" disabled>';
document.getElementById('lbl1').innerHTML = "Other: : ";
document.getElementById('chb1').onclick = Change.ischanged('chb1');
checkboxCheck = true;
}
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="CheckboxWindow.ok(\''+func+'\')">Ok</button> <button onclick="CheckboxWindow.cancel()">Cancel</button>';
}
}
var CheckboxWindow = new MyCheckboxWindow();
function CheckboxChanged()
{
this.ischanged(id)
{
alert('');
}
}
var Change = new CheckboxChanged();
Just for info, there should be 6 of these checkboxes, but I left them out in this example. Also, in the "if", I replaced my function by an alert. The code in the if-clause produces an alertbox only when I open the custom window, clicking the checkbox doesn't do anything (but tick the box).
Writing it like I did in the "else if" in this example, doesn't produce anything at all, nor does function() { Change.ischanged('chb1'); } (like I said before).
Please tell me why this isn't working. There's probably a better way of adding these checkboxes as well, so if you know any, please let me know as well.

Hope this helps as a starting point:
//Dynamically create a checkbox, and add it to a div.
//appendChild() works for other types of HTML elements, too.
var div = document.getElementById("div");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_1";
div.appendChild(checkbox);
var textbox = document.createElement("input");
textbox.type = "text";
textbox.disabled = true; //programmatically disable a textbox
div.appendChild(textbox);
//do something whenever the checkbox is clicked on (when user checks or unchecks it):
checkbox.onchange = function() {
if(checkbox.checked) { //if the checkbox is now checked
console.log("checked");
textbox.disabled = false;
}
else {
console.log("unchecked");
textbox.disabled = true; //programmatically disable a textbox
}
}
<div id='div'></div>

Thanks for your reply and I'm sorry for responding this late, I was quite busy the past 2 weeks and didn't have a lot of time.
I've tried to use your sample code but was unable to make it work. However, I was able to get it working by adding "onclick="Change.ischanged()" to the input in the if statement. I'm sure I tried something like that before, but I probably typed "CheckboxWindow" or "CheckboxChanged" instead of "Change" by mistake.
if(checktext1 != null)
{
dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1" onclick="Change.ischanged()"><label for="chb1" class="lbl" id="lbl1"></label>'
+ '<label for="txt1">€</label> <input type="text" id="txt1" value="0,00" disabled>';
document.getElementById('lbl1').innerHTML = checktext1 + ': ';
}
I know that adding the objects like this isn't the best way, but I seem to be having trouble trying to achieve my goal in your way.
I also changed "this.ischanged(id)" to "this.ischanged = function()" (I also made it so I don't need to pass the id anymore).

Try the OnClick event instead of the OnChange event for the checkbox.
//Dynamically create a checkbox, and add it to a div.
//appendChild() works for other types of HTML elements, too.
var div = document.getElementById("div");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_1";
div.appendChild(checkbox);
var textbox = document.createElement("input");
textbox.type = "text";
textbox.disabled = true; //programmatically disable a textbox
div.appendChild(textbox);
//do something whenever the checkbox is clicked on (when user checks or unchecks it):
checkbox.onclick = function() {
if(checkbox.checked) { //if the checkbox is now checked
console.log("checked");
textbox.disabled = false;
}
else {
console.log("unchecked");
textbox.disabled = true; //programmatically disable a textbox
}
}
<div id='div'></div>

How to pass values of selected checkboxes from multiple pages in Data Table

I have records in bootstrap data table which has pagination and each record will have a checkbox. Let say when I click some checkboxes in page 1 and some checkboxes in page 2, the form will only pass value of checkbox in page 2. How can I retrieve the checkbox values from page 1?Any help is much appreciated.
var checkboxes = $("input[type='checkbox']"),
btn = $("#btnCutoff");
//structure of table
var table = $('#table').DataTable({
"bLengthChange": false,
"pageLength": 5,
"bFilter": false
});
//disable button when no records are selected
btn.attr("disabled","disabled");
checkboxes.on('click', function(event) {
if($(this).prop('checked')){
btn.removeAttr('disabled');
} else {
btn.attr("disabled",!checkboxes.is(":checked"));
}
});
$("#table tbody").on("click",".clickable-row", function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
when clicks button, it will go to a javascript function
function doEnquiry(){
var f = document.frm;
f.method = "POST";
f.action = "test.jsp";
f.target = "_self";
f.submit();
}
and I want to assign the checkbox values to here
String curr[] = request.getParameterValues("chkTest");
Can anyone help me?

On every checkbox click if the checkbox is checked create a hidden field to store its value.You can rely on the hidden field values to capture all the checkbox values you want and can easily access them on the server side instead.
checkboxes.on('click', function(event) {
if($(this).prop('checked')){
btn.removeAttr('disabled');
$('form').append('<input type="hidden" name="fieldname" value="'+this.value+'" />');
} else {
btn.attr("disabled",!checkboxes.is(":checked"));
}
});

Jquery code
$(document).ready(function() {
$('#viewlist').DataTable();
$("#button").click(function() {
var chcklist = new Array();
var oTable = $('#viewlist').dataTable();
var rowcollection = oTable.$("#emp_name:checked", {"page": "all"});
rowcollection.each(function(index,elem) {
chcklist.push($(elem).val());
});
$.post(
"../accounts/updateSalaryHold.jsp",
{list: chcklist},
function (values) { }
);
});
});
jsp page Code
String[] arrayVal = request.getParameterValues("list[]");

Creating a Dynamic form with Javascript

Lets start again,
I would like to loop through a few values and then append them to a form to show a select box,
This is my button to add a new field in HTML:
<input type="button" value="Add Field" onclick="addField()">
Then the addField Javascript:
function addField() {
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', "newDrop[]");
input.setAttribute('id', 'newDrop');
input.setAttribute('class', 'newDrop');
input.setAttribute('placeholder', 'Options');
document.getElementById('dropdown').appendChild(input);
};
As you can see that this will append a new form with the attributes above.
Once I am happy with the values in each field and submit the additional fields with the below HTML:
<input type="button" value="Create Field" onclick="addInput('dynamicInput')">
I am hoping to create a dynamically created select with the details I added in the fields.
What I would like to happen is that I can loop through the values and create the options with the values that have been entered in the fields. My Javascript for this is below:
function addInput(divName) {
//other case here
case 'dropdown':
myInputs[counter]['atts'] = [];
myInputs[counter]['atts']['label'] = document.getElementById('fieldDropDownLabel').value
myInputs[counter]['atts']['one'] = document.getElementsByName('newDrop[]')
break;
}
var dd = document.createElement('select');
//other cases go here
case 'dropdown':
var label = document.createElement('label');
label.textContent = myInputs[counter]['atts']['label'];
label.setAttribute('for', myInputs[counter]['atts']['label']);
label.setAttribute('id', 'dropdown');
f.appendChild(label);
dd.setAttribute('name', myInputs[counter]['atts']['label'])
//default option
var option = document.createElement('option');
option.text = 'Please Select';
option.value = '';
dd.add(option, dd.options[null]);
//additional options
var option1 = document.createElement('option')
var newDrop = myInputs[counter]['atts']['one']
for(i=0; i < newDrop.length; i++)
{
option1.text = myInputs[counter]['atts']['one'];
option1.value = myInputs[counter]['atts']['one'];
dd.add(option1, dd.options[null]);
}
counter++;
f.appendChild(dd);
break;
I am just unable to get the values to show in the select options. Hopefully this is better than the last post.. Is there any chance someone can help?
Thanks

using radio buttons in php jqGrid

I have a jqgrid using php. In one of the columns i want to use two radio buttons (Yes/No). I have used a custom formatter for this..
$(function () {
function myelem (value, options) {
var radio1 = document.createElement('input');
radio1.id = 'radY';
radio1.type = 'radio';
radio1.name = 'appr';
radio1.value = 'Yes';
var radio2 = document.createElement('input');
radio2.id = 'radN';
radio2.type = 'radio';
radio2.name = 'appr';
radio2.value = 'No';
var label1 = document.createElement('label');
label1.setAttribute('for', radio1.id);
label1.innerHTML = 'Yes';
var label2 = document.createElement('label');
label2.setAttribute('for', radio2.id);
label2.innerHTML = 'No';
var container = document.createElement('div');
container.appendChild(radio1);
container.appendChild(label1);
container.appendChild(radio2);
container.appendChild(label2);
return container;
}
function myvalue(elem, operation, value) {
if(operation === 'get') {
return $(elem).val();
}
else if(operation === 'set') {
$('input',elem).val(value);
}
}
$("#list").jqGrid({
url: "fetch.php?sqlselect=1",
datatype: "json",
mtype: "GET",
colNames: ["Role", "Region", "Approved"],
colModel: [
{ name: "role", width: 60,editable:true},
{ name: "region", width: 60,editable:true},
{ name: "approved", width:250, editable:true, edittype:"custom", editoptions: {custom_element: myelem, custom_value:myvalue}}
],
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery('#list').restoreRow(lastSel);
lastSel=id;
}
jQuery('#list').jqGrid('editRow',id,
{
keys : true,
url : "edit.php"
} );
},
.............
Everything works fine when edited except the radio button column. I can see the radio buttons onClick. But once i press enter the radio button value is not passed to my edit page. That's understandable coz myval function is reading the div element and not a radio element. Since there are two radio buttons (with the same name, so at point only one can be checked Yes/No), and it's not a single entity like a text box, in order to 'return' a myelem i had to use a div. Is there a way I can do this where i can fetch the radio element value?

I have figured it out.. All I needed to do was this:
function myvalue(elem, operation, value) {
if(document.getElementById('radY').checked) {
return "Yes";
}
else {
return "No";
}
}

Copy form elements by field ID instead of by field name

I found a file called copyShipping.js that allows me to copy form elements from one form to another by the click of a checkbox. However, it copies by name of each field rather than ID. Below is the code. How do I get it to copy by ID? I know there's a getElementByID on Javascript but I don't know how to implement it. Ideally I would just like the code changed for me. Thanks.
function eCart_copyBillingToShipping(cb){
if(cb.checked){ // Only copy when the checkbox is checked.
var theForm = cb.form;
// The number of elements must match in billingFields and shippingFields. The type of input element must also match between the arrays.
var billingFields = new Array('firstname', 'lastname', 'email', 'phone', 'fax', 'street1', 'street2', 'city', 'state_province', 'StateOther', 'other_state_province', 'postcode', 'other_postcode', 'country');
var shippingFields = new Array('shipping_firstname', 'shipping_lastname', 'shipping_email', 'shipping_phone', 'shipping_fax', 'shipping_street1', 'shipping_street2', 'shipping_city', 'shipping_state_province', 'ShippingStateOther', 'other_shipping_state_province', 'shipping_postcode', 'other_shipping_postcode', 'shipping_country');
for(var i=0;i<billingFields.length;i++){
var billingObj = theForm.elements[billingFields[i]];
var shippingObj = theForm.elements[shippingFields[i]];
if(billingObj && shippingObj){
if(billingObj.tagName){ // non-radio groups
var tagName = billingObj.tagName.toLowerCase();
if(tagName == 'select'){
shippingObj.selectedIndex = billingObj.selectedIndex;
}
else if((billingObj.type && shippingObj.type ) && (billingObj.type == 'checkbox' || billingObj.type == 'radio')){
shippingObj.checked = billingObj.checked;
}
else{ // textareas and other inputs
shippingObj.value = billingObj.value;
}
}
else if(billingObj.length){ // radio group
for(var r=0;r<billingObj.length;r++){
shippingObj[r].checked = billingObj[r].checked;
}
}
}
}
}
}

It is always recommended to access the elements using Id. Also it is recommended to have id and name same.
Try this.
function eCart_copyBillingToShipping(cb){
if(cb.checked){ // Only copy when the checkbox is checked.
var theForm = cb.form;
// The number of elements must match in billingFields and shippingFields. The type of input element must also match between the arrays.
var billingFields = new Array('firstname', 'lastname', 'email', 'phone', 'fax', 'street1', 'street2', 'city', 'state_province', 'StateOther', 'other_state_province', 'postcode', 'other_postcode', 'country');
var shippingFields = new Array('shipping_firstname', 'shipping_lastname', 'shipping_email', 'shipping_phone', 'shipping_fax', 'shipping_street1', 'shipping_street2', 'shipping_city', 'shipping_state_province', 'ShippingStateOther', 'other_shipping_state_province', 'shipping_postcode', 'other_shipping_postcode', 'shipping_country');
for(var i=0;i<billingFields.length;i++){
//assuming that now array contains id (not name)
var billingObj = theForm.getElementById(billingFields[i]);
var shippingObj = theForm.getElementById(shippingFields[i]);
if(billingObj && shippingObj){
if(billingObj.tagName){ // non-radio groups
var tagName = billingObj.tagName.toLowerCase();
if(tagName == 'select'){
shippingObj.selectedIndex = billingObj.selectedIndex;
}
else if((billingObj.type && shippingObj.type ) && (billingObj.type == 'checkbox' || billingObj.type == 'radio')){
shippingObj.checked = billingObj.checked;
}
else{ // textareas and other inputs
shippingObj.value = billingObj.value;
}
}
else if(billingObj.length){ // radio group
for(var r=0;r<billingObj.length;r++){
shippingObj[r].checked = billingObj[r].checked;
}
}
}
}
}
}