Get value from dynamically created checkboxes if checked - javascript

I made few checkboxes along with a button which on submit calls a function where I want to get all the values of checkboxes which have been checked.
Code for creating those checkboxes is:
for (var loop=0; loop < count; loop++)
{
var chap = document.createElement("input");
chap.type = "checkbox";
chap.value = nearby[loop];
chap.id = nearby[loop];
document.getElementById("mapdisplay").appendChild(chap);
var nearo = nearby[loop];
var s = document.getElementById("mapdisplay");
var text = document.createTextNode(nearby[loop]);
s.appendChild(text);
var br = document.createElement('br');
s.appendChild(br);
}
Now I want to retrieve the values which are checked. I am trying this (but to no available)
function fsearch()
{
var p = x;
var narr = new Array();
narr=nearby;//a global arr
var checked_vals = new Array();
$('#mapdisplay input:checkbox:checked').foreach()
{
checked_vals.push(this.value);
}
Please suggest something to retrieve the checked values id of generated values are in array form. I can not use $("#nearby[0]").val().

var checkedCheckBoxesValueArray = $('#mapdisplay input:checkbox:checked').map(
function(){
return this.value;
}).get();

Correct syntax would be:
$('#mapdisplay input:checkbox:checked').each(function(index) {
checked_vals.push($(this).val());
});
Live test case: http://jsfiddle.net/e6Sr3/

Related

A function to affect multiple rows to substr and copy with Javascript

So, i have this code, it works:
var curp = document.getElementById("id_sc_field_curp_id_1");
var getcurp = curp.options[curp.selectedIndex].text;
var rfc = getcurp.substr(0, 10);
document.getElementById("id_sc_field_virtual_rfc_1").value = rfc;
It copy the text inside the field (td - CURP) "id_sc_field_curp_id_1", and trim it to put the result in another field (RFC) "id_sc_field_virtual_rfc_1"
Example img
JSFIDDLE: https://jsfiddle.net/90yzgcqe/1/
I want to adapt the code to work with the other rows, witch have an incremental id...
id_sc_field_curp_id_1,id_sc_field_curp_id_2,id_sc_field_curp_id_3, d_sc_field_virtual_rfc_1, d_sc_field_virtual_rfc_2, d_sc_field_virtual_rfc_3...etc
Im making this function, but... i dont know how to make it work...
function rfc() {
for (var i = 0; i <= 19; i++) {
var curp = document.getElementById("id_sc_field_curp_id_" + i);
var getcurp = curp.options[curp.selectedIndex].text;
var rfc = getcurp.substr(0, 10);
document.getElementById("id_sc_field_virtual_rfc_" + i).value = rfc;
}
}
What is wrong?
Some jQuery gets us there fairly easily, first get the matching dropdowns and then interact with them.
$(function() {
//get the list of dropdowns that start with all but the numeral
var lst = $("[id^='id_sc_field_curp_id_']");
$.each(lst, function(idx, elem) {
//lets store the dropdown for use in the loop
let $field = $(elem);
//for example lets print the selected text
console.log($field.find("option:selected").text());
});
});
There are a couple of options from there, you can use the dropdown to create the rfc's id, or use the jQuery function closest() to get it. Once you have the associated rfc's input it should be trivial to get set the value.
EDITED:1
More specific javascript, and a link to a modified jsFiddle
$(function() {
//get the list of dropdowns that start with all but the numeral
var lst = $("[id^='id_sc_field_curp_id_']");
$.each(lst, function(idx, elem) {
//lets store the dropdown for use in the loop
let $field = $(elem);
//for example lets alert the selected text
alert($field.find("option:selected").text().substr(0,10));
$field.closest("[id^='idVertRow']")
.find("[id^='id_sc_field_virtual_rfc_']")
.val($field.find("option:selected").text().substr(0,10));
});
});

get Input values dynamically in jquery

I am devolping a web application using symfony framework. I have aproblem in forms. Here is my code:
$('#bookCleaningForm').submit(function() {
// get the array of all the inputs
var $inputs = $('#bookCleaningForm :input[type=text]');
// get an associative array of the values
var values = {};
var allVAlues='';
$inputs.each(function() {
values[this.name] = $(this).val();
allVAlues = values[this.name];
});
alert(allValues);//console.log(allValues);
saveBoookCleaning(allVAlues);
});
In the loop i got all data in allValues variable.But when I access outside the loop i got only one value.
Please help
Each time in the each loop you are assigning the variable allValues to the value of the current input. If you want to store the values as an array you could do this:
$('#bookCleaningForm').submit(function() {
// get the array of all the inputs
var $inputs = $('#bookCleaningForm :input[type=text]');
// get an associative array of the values
var values = {};
var allVAlues=[];
$inputs.each(function() {
values[this.name] = $(this).val();
allVAlues.push(values[this.name]);
});
alert(allVAlues);//console.log(allValues);
saveBoookCleaning(allVAlues);
});
Or, if you want them as a string:
$('#bookCleaningForm').submit(function() {
// get the array of all the inputs
var $inputs = $('#bookCleaningForm :input[type=text]');
// get an associative array of the values
var values = {};
var allVAlues='';
$inputs.each(function() {
values[this.name] = $(this).val();
allVAlues += values[this.name];
});
alert(allVAlues);//console.log(allValues);
saveBoookCleaning(allVAlues);
});

Get control attributes with jQuery and create json

I have multiple checkboxes in a view and each one has some data attributes, example:
Once the button is clicked I'm iterating through all the checkboxes which are selected and what I want to do is get the data-price and value fields for each selected checkbox and create JSON array.
This is what I have so far:
var boxes2 = $("#modifiersDiv :checkbox:checked");
var selectedModifiers = [];
var modifierProperties = [];
for (var i = 0; i < boxes2.length; i++) {
for (var k = 0; k < boxes2[i].attributes.length; k++) {
var attrib = boxes2[i].attributes[k];
if (attrib.specified == true) {
if (attrib.name == 'value') {
modifierProperties[i] = attrib.value;
selectedModifiers[k] = modifierProperties[i];
}
if (attrib.name == 'data-price') {
modifierProperties[i] = attrib.value;
selectedModifiers[k] = modifierProperties[i];
}
}
}
}
var jsonValueCol = JSON.stringify(selectedModifiers);
I'm not able to get the values for each checkbox and I'm able to get the values only for the first one and plus not in correct format, this is what I'm getting as JSON:
[null,"67739",null,"1"]
How can I get the correct data?
You can use $.each to parse a jquery array, something like:
var jsonValueObj = [];
$("#modifiersDiv :checkbox:checked").each(function(){
jsonValueObj.push({'value':$(this).val(),'data-price':$(this).attr('data-price')});
});
jsonValueCol = JSON.stringify(jsonValueObj);
Please note it's generally better to use val() than attr('value'). More information on this in threads like: What's the difference between jQuery .val() and .attr('value')?
As for your code, you only had one answer at most because you were overwriting the result every time you entered your loop(s). Otherwise it was okay (except the formatting but we're not sure what format you exactly want). Could please you provide an example of the result you would like to have?
if you want to get an object with all checked values, skip the JSON (which is just an array of objects) and make your own....
var checked =[];
var getValues = function(){
$('.modifiers').each(function(post){
if($(this).prop('checked')){
checked.push({'data-price':$(this).attr('data-price'),'value':$(this).attr('value')});
}
});
}
getValues();
sure i'm missing something obvious here.. but mind is elsewhere
This should give an array with values (integers) and prices (floats):
var selected = [];
$("#modifiersDiv :checkbox:checked").each(function()
{
var val = parseInt($(this).val(), 10);
var price = parseFloat($(this).data("price"));
selected.push(val);
selected.push(price);
});
Edit: Updated answer after Laziale's comment. The $(this) was indeed not targeting the checked checkbox. Now it should target the checkbox.

jQuery Split dropdown value

Help needed to split the dropdown value and put them to the inputs in two different tables.
$(document).on('change', '[id^="SelID_"]', function () {
SplitSelectValue($(this));
});
function SplitSelectValue(obj) {
var data = obj.find("option:selected").val();
var arr = data.split('|');
var tr = obj.closest('tr');
tr.find("[id^='SelVala_']").val(arr[0]);
tr.find("[id^='SelValb_']").val(arr[1]);
tr.find("[id^='SelValc_']").val(arr[2]);
tr.find("[id^='SelVald_']").val(arr[3]);
tr.find("[id^='SelVale_']").val(arr[4]);
}
jsfiddle
Modify your function like this:
function SplitSelectValue(obj) {
var data = obj.val();
var arr = data.split('|');
var tr = obj.closest('tr');
tr.find(".SelVala_").val(arr[0]);
tr.find(".SelValb_").val(arr[1]);
tr.find(".SelValc_").val(arr[2]);
var table2 = $('#AddFieldsToDebugDiv');
var row = table2.find('tr:eq(' + tr.index() + ')');
row.find(".SelVald_").val(arr[3]);
row.find(".SelVale_").val(arr[4]);
}
Values SelVald_ and SelVale_ go to corresponding row of the second table. Also I changed ids to classes because id cannot be duplicated.
Demo: http://jsfiddle.net/BE5Lr/3745/
Try replacing tr.find with $
function SplitSelectValue(obj) {
var data = obj.find("option:selected").val();
var arr = data.split('|');
//var tr = obj.closest('tr');
$("[id^='SelVala_']").val(arr[0]);
$("[id^='SelValb_']").val(arr[1]);
$("[id^='SelValc_']").val(arr[2]);
$("[id^='SelVald_']").val(arr[3]);
$("[id^='SelVale_']").val(arr[4]);
}
Gave me the expected results

associative array not setting correctly

i'm new to javascript and jquery and was wondering if someone could let me in on why this isn't working correctly.
i have a drop-down box that a user selects a value from, then "Processes." When processed the value of the drop-down as well as a textbox is stored in an array. I want the user to be able to then basically store the same drop-down selection and textbox data in the array again but now in a new value pair.
First store would be
TestArray[0][0] = "Textbox Value"
If "Processed" again, it would be
TestArray[1][0] = "Textbox Value"
that way I can parse through later and figure how many times the user "Processed" the drop-down selection;
var oneClickReport = $("#reportName").val();
if(oneClickReport == "Sample Report One"){
var arrayOneCount = reportOneArray.length;
var totalHouseholds = 0;
$("#reportChecks span:visible").each(function(){
if($(this).find(':checkbox').prop('checked')){
var HHName = $(this).text();
reportOneArray.push(HHName);
arrayTest[arrayOneCount][totalHouseholds] = HHName;
}
totalHouseholds += 1;
});
for(i = 0; i < arrayOneCount; i+=1){
alert(arrayTest[0][i]);
}
}
But when trying to "Process" for the second time, I receive the error of;
SCRIPT5007: Unable to set property '0' of undefined or null reference
on line;
arrayTest[arrayOneCount][totalHouseholds] = HHName;
You need to initialize your array. I'm not sure what exactly you want to do but you need an array like this
var arrayTest = []
And you will need to initialize subsequent value like
arrayTest[1] = []
Then you can access your array
arrayTest[1][0] = []
I made an example for you
var oneClickReport = $("#reportName").val();
var arrayTest = [] # You may need to put this elsewhere
if(oneClickReport == "Sample Report One"){
var arrayOneCount = reportOneArray.length;
var totalHouseholds = 0;
$("#reportChecks span:visible").each(function(){
if($(this).find(':checkbox').prop('checked')){
var HHName = $(this).text();
reportOneArray.push(HHName);
if(!arrayTest[arrayOneCount]){ arrayTest[arrayOneCount] = []; }
arrayTest[arrayOneCount][totalHouseholds] = HHName;
}
totalHouseholds += 1;
});
for(i = 0; i < arrayOneCount; i+=1){
alert(arrayTest[0][i]);
}
}
your problem with var arrayOneCount = reportOneArray.length; and you're not changing this value

Categories