Develop Reference

Set an array of the checkbox values with another array of values

I have a set of input checkboxes on a form that look like this:
<input type="checkbox" value=""><span value="Atlanta">Atlanta</span>
<input type="checkbox" value=""><span value="Charleston">Charleston</span>
<input type="checkbox" value=""><span value="Chicago">Chicago</span> and etc.
The above is due to running this, $dataTable.ajax.reload(), and for some reason this erases the values of the checkboxes in my form. These checkboxes are not hardcoded and are being dynamically generating.
Instead of doing the below, I realize I can just refresh the page and get all the value back, but I'd like to see if there is another way to do what I'm trying to do below.
Anywho, I took the span text of each checkbox, turned that into an array and called it spanarr. I also turned the input checkboxes into an array, called emergcheck.
var emergspanarr = $('#emergencyForm span').toArray();
var spanarr = [];
var emergcheck = $('#emergencyForm input[type="checkbox"]');
emergspanarr.map(function(item){
spanarr.push(item.innerHTML.trim());
});
I'm trying to insert one span value (from spanarr) into each of input checkbox (from emergcheck).
What I have so far:
for (var j = 0; j < emergcheck.length; j++){
for (var k = 0; k < spanarr.length; k++){
emergcheck.attr("value", function(i, val){
return val + spanarr[k];
})
}
}
But it's producing this:
<input value="AtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontreal....Santa Ana SavannahSeattleSecaucusTorontoVancouverAtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontrealSanta Ana .....Santa AnaSavannahSeattleSecaucusTorontoVancouver" type="checkbox"><span value="Atlanta">Atlanta</span>
<input value="AtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontreal....Santa Ana SavannahSeattleSecaucusTorontoVancouverAtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontrealSanta Ana .....Santa AnaSavannahSeattleSecaucusTorontoVancouver" type="checkbox"><span value="Charleston">Charleston</span> and etc.
I want it to be this instead:
<input type="checkbox" value="Atlanta"><span value="Atlanta">Atlanta</span>
<input type="checkbox" value="Charleston"><span value="Charleston">Charleston</span>
<input type="checkbox" value="Chicago"><span value="Chicago">Chicago</span
I feel like I am close. What am I missing? In need of another pair of eyes. Thanks,

Just try to change code with below code -
JS Code -
for (var j = 0; j < emergcheck.length; j++){
emergcheck.eq(j).val(spanarr[j]);
}
Maybe it can help you.

I think you just want the value of the input. You can use .val() from jQuery or just .value as pure js.
jQuery way:
var emergspanarr = $('#emergencyForm span').toArray();
var emergcheck = $('#emergencyForm input[type="checkbox"]').toArray();
for (var j = 0; j < emergcheck.length; j++) {
emergcheck[j].val(emergspanarr[j].val());
}
Pure js way:
var emergspanarr = $('#emergencyForm span').toArray();
var emergcheck = $('#emergencyForm input[type="checkbox"]').toArray();
for (var j = 0; j < emergcheck.length; j++){
emergcheck[j].value = emergspanarr[j].value;
}

I can't seem to empty a javascript array

I know there are a lot of these questions on Stackoverflow but none of them work for me. I would like to post my own code and try and find out what I am doing wrong.
So, I have a function that adds a bunch of items to an array. The page is never refreshed, as is the way it is designed. So when that same function is called again the array MUST be emptied because:
Items added to an array are linked to a specific item on the page that the user selected.
When a new item is selected the old item's things should not be shown in the array. Only the new item's things.
The array is populated from checkbox values and that array is then used to create different checkboxes on a popup modal form.
Here is the code to populate the array:
// Here I tried emptying the array with below mentioned methods. The array is defined outside of the function. I have also tried defining it inside.
var count = 0;
var optionsSelected = 0;
$('input[name="extrasSelected"]:checked').each(function() {
var selected = $(this).val().split("|");
extras[count] = [selected[0], selected[1], selected[2], selected[3], 'checked'];
optionsSelected++;
count++;
});
$('input[name="extrasSelected"]:not(:checked)').each(function() {
var notSelected = $(this).val().split("|");
extras[count] = [notSelected[0], notSelected[1], notSelected[2], notSelected[3], 'notChecked'];
count++;
});
extras.sort();
This entire thing is working perfectly. Except when I select a new item. The popup displays and checkboxes are created with the previous item's things as well as checkboxes with the new item's things.
I have tried to use:
extras = [];
extras.pop();
extras.length = 0
while (extras > 0) {
extras.pop();
}
Actually, I have tried all methods seen on stackoverflow and google. So I am guessing that I am doing something wrong.
Any help would be greatly appreciated!
EDIT
Additional Code As Requested:
var extras = [];
$("#doLookup").click(function() {
var count = 0;
var optionsSelected = 0;
$('input[name="extrasSelected"]:checked').each(function() {
var selected = $(this).val().split("|");
extras[count] = [selected[0], selected[1], selected[2], selected[3], 'checked'];
//alert(extras[0][1]);
optionsSelected++;
count++;
});
$('input[name="extrasSelected"]:not(:checked)').each(function() {
var notSelected = $(this).val().split("|");
extras[count] = [notSelected[0], notSelected[1], notSelected[2], notSelected[3], 'notChecked'];
//alert(extras[0][1]);
count++;
});
extras.sort();
if (extras.length > 0) {
optionalsJSHead = '<table width="100%"><tr><th style="width: 40%;"><b>Optional Extra</b></th><th style="text-align:right;width:15%"><b>Retail</b></th><th style="text-align:right;width:15%"><b>Trade</b></th><th style="text-align:right;width:15%"><b>Market</b></th><th style="text-align:right"><b>Include</b></th></tr>';
optionalsJSBody = '';
if (parseInt(year) === parseInt(guideYear)) {
for (i = 0; i < extras.length; ++i) {
optionalsJSBody += '<tr><td>'+extras[i][0]+'</td><td align="right">R '+extras[i][1].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right">R '+extras[i][2].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right">R '+extras[i][3].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right"><input class="chckDis" type="checkbox" name="extrasSelectedAdjust" id="'+ extras[i][0] +'" value="'+ extras[i][0] +'|'+ extras[i][1] +'|'+ extras[i][2] +'|'+ extras[i][3] +'" disabled="disabled"/></td></tr>';
}
} else {
for (i = 0; i < extras.length; ++i) {
if (extras[i][4] == 'notChecked') {
optionalsJSBody += '<tr><td>'+extras[i][0]+'</td><td align="right">R '+extras[i][1].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right">R '+extras[i][2].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right">R '+extras[i][3].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right"><input class="chckDis" type="checkbox" name="extrasSelectedAdjust" id="'+ extras[i][0] +'" value="'+ extras[i][0] +'|'+ extras[i][1] +'|'+ extras[i][2] +'|'+ extras[i][3] +'"/></td></tr>';
} else {
optionalsJSBody += '<tr><td>'+extras[i][0]+'</td><td align="right">R '+extras[i][1].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right">R '+extras[i][2].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right">R '+extras[i][3].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</td><td align="right"><input class="chckDis" type="checkbox" name="extrasSelectedAdjust" id="'+ extras[i][0] +'" value="'+ extras[i][0] +'|'+ extras[i][1] +'|'+ extras[i][2] +'|'+ extras[i][3] +'" checked /></td></tr>';
}
}
}
optionalFooter = '</table>';
optionalsJS = optionalsJSHead + optionalsJSBody + optionalFooter;
}
});

From my understanding, you can create a temporary array, populate it with new values and then assign it to extras variable. See the code below:
var extras = []; // actual array whose items you want to use
$("#doLookup").click(function() {
var tmpExtras = []; // temporary array to get the new items you want.
var count = 0;
var optionsSelected = 0;
$('input[name="extrasSelected"]:checked').each(function() {
var selected = $(this).val().split("|");
tmpExtras[count] = [selected[0], selected[1], selected[2], selected[3], 'checked'];
//alert(extras[0][1]);
optionsSelected++;
count++;
});
$('input[name="extrasSelected"]:not(:checked)').each(function() {
var notSelected = $(this).val().split("|");
tmpExtras[count] = [notSelected[0], notSelected[1], notSelected[2], notSelected[3], 'notChecked'];
//alert(extras[0][1]);
count++;
});
tmpExtras.sort();
// now assign tmpExtras to extras array, so that
// you can get the new items
extras = tmpExtras;
// ... rest of code that uses extras

If you should set array as empty before adding some value to the array. I think you should set it in both places before you try to fill it: extras[count] = []; extras[count] = .... . And why do you need the array of array? maybe you should used just array and every time rewrite it? like:
extras = [selected[0], selected[1], selected[2], selected[3], 'checked'];
then no needs to set array like empty before filling.

Your click event is bound to a single item. #doLookup is an id selector which means that there is a single item with the id="doLookup" in the document.
How do you intend to let the function know that the array needs to be emptied?
A simple fix would be to bind the click event to another selector such as .doLookupClass etc and then check inside the function when a different item was selected and empty the array.

It would seem I made a rookie mistake. The array was being emptied. However since I am creating textboxes with javascript I forgot to empty the div before adding the new ones, causing the old ones to still display. And I didn't post that part of the code so that is why you guys probably couldn't assist.
I changed
$("#myDiv").append(OptionalsJS);
to
$("#myDiv").empty().append(OptionalsJS);
What a stupid mistake... X_X anyway, thanks for the assistance anyway!

Maybe the whole thing can be done in a much easier fashion?
See here for a working example
var extras = []; // actual array
$("#doLookup").click(function() {
extras = []; // temporary array
$('input[name="extrasSelected"]').each(function() {
with ($(this)){
var cb=val().split("|");
var state=(is(':checked')?'':'un')+'checked';
}
extras.push([cb[0], cb[1], cb[2], cb[3], state]);
});
$('#show').html(JSON.stringify(extras));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type=checkbox value="a|b|c|d" name="extrasSelected" /><br/>
<input type=checkbox value="e|f|g|h" name="extrasSelected" /><br/>
<input type=checkbox value="i|j|k|l" name="extrasSelected" /><br/>
<input type=checkbox value="m|n|o|p" name="extrasSelected" /><br/>
<input type=checkbox value="q|r|s|t" name="extrasSelected" /><br/>
<input type=checkbox value="u|v|w|x" name="extrasSelected" /><br/>
<input type="button" id="doLookup" value="go"/>
<div id="show" />

Store values from dynamically generated text boxes into array

I'm creating a Time table generating website as a part of my project and I am stuck at one point.
Using for loop, I am generating user selected text boxes for subjects and faculties. Now the problem is that I cannot get the values of those dynamically generated text boxes. I want to get the values and store it into array so that I can then later on store it to database
If I am using localstorage, then it sometimes shows NaN or undefined. Please help me out.
Following is my Jquery code
$.fn.CreateDynamicTextBoxes = function()
{
$('#DynamicTextBoxContainer, #DynamicTextBoxContainer2').css('display','block');
InputtedValue = $('#SemesterSubjectsSelection').val();
SubjectsNames = [];
for (i = 0; i < InputtedValue; i++)
{
TextBoxContainer1 = $('#DynamicTextBoxContainer');
TextBoxContainer2 = $('#DynamicTextBoxContainer2');
$('<input type="text" class="InputBoxes" id="SubjectTextBoxes'+i+'" placeholder="Subject '+i+' Name" style="margin:5px;" value=""><br>').appendTo(TextBoxContainer1);
$('<input type="text" class="InputBoxes" id="FacultyTextBoxes'+i+'" placeholder="Subject '+i+' Faculty Name" style="margin:5px;" value=""><br>').appendTo(TextBoxContainer2);
SubjectsNames['SubjectTextBoxes'+i];
}
$('#DynamicTextBoxContainer, #UnusedContainer, #DynamicTextBoxContainer2').css('border-top','1px solid #DDD');
}
$.fn.CreateTimeTable = function()
{
for (x = 0; x < i; x++)
{
localStorage.setItem("Main"+x, +SubjectsNames[i]);
}
}
I am also posting screenshot for better understanding

I understand you create 2 text boxes for each subject, one for subject, and second one for faculty. And you want it as a jQuery plugin.
First of all, I think you should create single plugin instead of two, and expose what you need from the plugin.
You should avoid global variables, right now you have InputtedValue, i, SubjectsNames, etc. declared as a global variables, and I believe you should not do that, but keep these variables inside you plugin and expose only what you really need.
You declare your SubjectNames, but later in first for loop you try to access its properties, and actually do nothing with this. In second for loop you try to access it as an array, but it's empty, as you did not assign any values in it.
Take a look at the snippet I created. I do not play much with jQuery, and especially with custom plugins, so the code is not perfect and can be optimized, but I believe it shows the idea. I pass some selectors as in configuration object to make it more reusable. I added 2 buttons to make it more "playable", but you can change it as you prefer. Prepare button creates your dynamic text boxes, and button Generate takes their values and "print" them in result div. generate method is exposed from the plugin to take the values outside the plugin, so you can do it whatever you want with them (e.g. store them in local storage).
$(function() {
$.fn.timeTables = function(config) {
// prepare variables with jQuery objects, based on selectors provided in config object
var numberOfSubjectsTextBox = $(config.numberOfSubjects);
var subjectsDiv = $(config.subjects);
var facultiesDiv = $(config.faculties);
var prepareButton = $(config.prepareButton);
var numberOfSubjects = 0;
prepareButton.click(function() {
// read number of subjects from the textbox - some validation should be added here
numberOfSubjects = +numberOfSubjectsTextBox.val();
// clear subjects and faculties div from any text boxes there
subjectsDiv.empty();
facultiesDiv.empty();
// create new text boxes for each subject and append them to proper div
// TODO: these inputs could be stored in arrays and used later
for (var i = 0; i < numberOfSubjects; i++) {
$('<input type="text" placeholder="Subject ' + i + '" />').appendTo(subjectsDiv);
$('<input type="text" placeholder="Faculty ' + i + '" />').appendTo(facultiesDiv);
}
});
function generate() {
// prepare result array
var result = [];
// get all text boxes from subjects and faculties divs
var subjectTextBoxes = subjectsDiv.find('input');
var facultiesTextBoxes = facultiesDiv.find('input');
// read subject and faculty for each subject - numberOfSubjects variable stores proper value
for (var i = 0; i < numberOfSubjects; i++) {
result.push({
subject: $(subjectTextBoxes[i]).val(),
faculty: $(facultiesTextBoxes[i]).val()
});
}
return result;
}
// expose generate function outside the plugin
return {
generate: generate
};
};
var tt = $('#container').timeTables({
numberOfSubjects: '#numberOfSubjects',
subjects: '#subjects',
faculties: '#faculties',
prepareButton: '#prepare'
});
$('#generate').click(function() {
// generate result and 'print' it to result div
var times = tt.generate();
var result = $('#result');
result.empty();
for (var i = 0; i < times.length; i++) {
$('<div>' + times[i].subject + ': ' + times[i].faculty + '</div>').appendTo(result);
}
});
});
#content div {
float: left;
}
#content div input {
display: block;
}
#footer {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="header">
<input type="text" id="numberOfSubjects" placeholder="Number of subjects" />
<button id="prepare">
Prepare
</button>
</div>
<div id="content">
<div id="subjects">
</div>
<div id="faculties">
</div>
</div>
</div>
<div id="footer">
<button id="generate">Generate</button>
<div id="result">
</div>
</div>

Accessing row element of table in Javascript

This is my first attempt in Javascript, so may be this is fairly easy question.
I need to access row element of a table, each row contains checkbox and two other column. If checkbox is checked, i need to get the id of checkbox.
I made following attempt but element_table.rows returns undefined, therefore i could not proceed. I debugged using Inspect element tool of eclipse and found element_table contains the rows.
Please suggest where I am making a mistake.
Javascript code:
function myfunction3(){
var element_table = document.getElementsByName('collection');
var element_tableRows = element_table.rows;
var selectedTr = new Array();
var data = "";
for(var i =0 ; element_tableRows.length;i++)
{
var checkerbox = element_tableRows[i].getElementsByName('checkmark');
if(checkerbox.checked){
selectedTr[selectedTr.length] = element_tableRows[i].getAttribute("name");
data = data + element_tableRows[i].getAttribute("name");
}
}
var element_paragraph = document.getElementsByName('description');
element_paragraph.innerHTML = data;
}
html code:
<table name="collection" border="1px">
<tr name="1">
<td><input type="checkbox" name="checkmark"></td>
<td>Tum hi ho</td>
<td>Arjit singh</td>
</tr>
<tr name="2">
<td><input type="checkbox" name="checkmark"></td>
<td>Manjha</td>
<td>Somesh</td>
</tr>
<tr name="3">
<td><input type="checkbox" name="checkmark"></td>
<td>Ranjhana</td>
<td>A.R Rehman</td>
</tr>
</table>
<input type="button" value="Check" onclick="myfunction3()">

here's a working version
function myfunction3(){
var element_table = document.getElementsByName('collection');
var element_tableRows = element_table[0].rows;
var selectedTr = new Array();
var data = "";
for(var i =0 ; i < element_tableRows.length;i++)
{
var checkerbox = element_tableRows[i].cells[0].firstChild;
if(checkerbox.checked){
//selectedTr[selectedTr.length] = element_tableRows[i].getAttribute("name"); //not sure what you want with this
data = data + element_tableRows[i].getAttribute("name");
}
}
var element_paragraph = document.getElementsByName('description');
element_paragraph.innerHTML = data;
alert(data);
}
http://jsfiddle.net/eZmwy/
jsfiddle for your example, your problem is mainly at when you getElementsByName you need to specify the index, also not that not all getElement methods are available in the table
i would also suggest you learn jQuery, this makes life easier, also not sure why you want to display the data as 1,2,3 the name on the tr... seems pretty strange to me

Actually this line
var element_table = document.getElementsByName('collection');
will return collection of elements. If you are sure that you have exactly one table with the specified name, try this approach:
var element_table = document.getElementsByName('collection')[0];

actually if you are using jQuery (very recommanded )
you can do something like
var idsArray = [];
$("[name=collection] tr td [type=checkbox]:checked").parent().each(function() {
idsArray .push($(this).attr('name'))
});
this answer related only to jQuery use (which is same as javascript only more compiled.)

control radio button from textfield value

everyone..i want after i type "0203-ED" in textfield ...two character behind that text can control the radio button.. "ED" character from that text can make one radiobutton which has value="ED" are checked...
this is my code:
<script type="text/javascript">
var model=$("#tags1").val();
var version[0,0]="JD";
var version[0,1]="87.5-107.9";
var version[1,0]="ED";
var version[1,1]="87.5-108.0";
var version[2,0]="EED";
var version[2,1]="65.0-74.0";
// each version
for (var i = 0; i < version.length; i ++) {
if (model.lastIndexOf(version[i,0])!=-1) {
$("#value").replaceWith("<div id='value'>"+version[i,1]+"</div>");
} else {
$("#value").replaceWith("<div id='value'></div>")
}
// end each
}
</script>
what's wrong with my code??

I see a couple things going on.
First, why do you have a default: in there? That's a keyword used in switch statements; it's not valid in an if statement. Remove it entirely.
You also have model,lastIndexOf instead of model.lastIndexOf

you don't have to use .replaceWith()...
for (var i = 0; i < version.length; i ++) {
if (model.lastIndexOf(version[i,0])!=-1) {
$("#value").html(version[i,1]);
} else {
//default
$("#value").html("");
}
// end each
}

Watch your language typing. It should be text/javascript. Right now you have text/jaavascript. Depending on the browser and your doctype, this could prevent your script from even executing (it wouldn't just fail silently, it wouldn't even get the chance to fail).
In addition to the answers already given, try declaring your array only once. There are several ways create the data structure you're after. Use whichever style you find most comfortable.
var version = [['JD',"87.5-107.9"],["ED","87.5-108.0"],["EED","65.0-74.0"]];
var version = [];
version[0] = ["JD","87.5-107.9"]
version[1] = ["ED","87.5-108.0"];
version[2] = ["EED","65.0-74.0"];
var version = [];
version[0] = [];
version[0,0]="JD";
version[0,1]="87.5-107.9";
version[1] = [];
version[1,0]="ED";
version[1,1]="87.5-108.0";
version[2] = [];
version[2,0]="EED";
version[2,1]="65.0-74.0";
About the third version, though, I'm actually not sure that your array notation (version[0,1]) is universally supported. I don't think I've seen anyone use that notation in more than 10 years. Typically, you access members of a multi-dimensional array with the notation: myArray[x][y]. But maybe that's just a style difference. I'm not sure.
[EDIT] Are you trying to do something like this? This isn't terribly efficient, but it may be a starting point for you. In this case, jQuery is definitely your friend.
<input type="radio" name="version" value="87.5-107.9" /><label class="version">JD</label><br />
<input type="radio" name="version" value="87.5-108.0" /><label class="version">ED</label><br />
<input type="radio" name="version" value="65.0-74.0" /><label class="version">EED</label><br />
<input type="text" name="version_text" value="Enter your value" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">//<![[
var jVersionTextInput = $('input[name=version_text]');
var jLabels = $('label.version');
var jRadioButtons = $('input[name=version]');
var intVersionCount = jLabels.size();
var updateRadioButtons = function() {
var rxLabelValue;
var isValueFound = false;
rxLabelValue = new RegExp( $(jVersionTextInput).val() );
for (var i = 0; i < intVersionCount; i++) {
if (!isValueFound && rxLabelValue.test($(jLabels[i]).html())) {
jRadioButtons[i].checked = true;
isValueFound = true;
}
else {
jRadioButtons[i].checked = false;
}
}
}
jVersionTextInput.keyup(updateRadioButtons);
//]]></script>