Develop Reference

How to change the background of multiple buttons when reading from Session Storage

I'm trying to get all the buttons on this page begin neutral and then turn red when the page loads and finally turn green whenever a checklist on the next page is completed. I can only seem to get the first button to work but the others aren't doing anything. Any advice? All other attempts are in the comments.
function initial(){
if (localStorage.getItem("run") == null) {
/* var form = document.getElementById("myForm");
var idObject = {};
idObject[form.elements[0].id].("false");
for(var i = 1; i < form.length ; i++){
idObject[form.elements[i].id].push("false");
}
sessionStorage.setItem("savedIds",JSON.stringify(idObject)); */
/* var ids = [ {area:"kitchen",done:"true"},
{area:"livingroom",done:"false"},
{area:"bathroom",done:"false"},
{area:"dining",done:"false"},
{area:"bredroom",done:"false"}]; */
/* var ids = {"kitchen":false,
"livingroom":true,
"bathroom":false,
"dining":false,
"bedroom":false}; */
var ids = [false,false,false,false,false];
sessionStorage.setItem("savedIds",JSON.stringify(ids));
localStorage.setItem("run", true);
}
}
function loader(){
var form = document.getElementById("myForm");
var obj = JSON.parse(sessionStorage.getItem("savedIds"));
for(var i = 0;i < 5;i++){
if(obj[i] == true){
document.getElementById(form.elements[i].id).style.backgroundColor = "green";
return false;
}else{
document.getElementById(form.elements[i].id).style.backgroundColor = "red";
return false;
}
}
}
So I have mentioned this on the forum but I haven't been able to quite solve this. It is killing me since I have spent days on this alone. Any advice would be great!
Something to note, this is the function on the checklist page that reads the checklist and turns the buttons to green. There is also an issue where the color doesn't change the green because of a "VM915:1 Uncaught SyntaxError: Unexpected token , in JSON at position 4"
function checkTasks(form){
var count = 0;
for(var i = 0;i<form.task.length;i++){
if(form.task[i].checked){
count++;
}
}
if(count == form.task.length){
var obj = JSON.parse(sessionStorage.getItem("savedIds"));
obj[0] = true;
sessionStorage.setItem("savedIds",obj);
//sessionStorage.setItem("kitchen","true");
window.open("http://localhost:8080/Project/home.html","_self");
}else{
alert("You have not completed all the tasks! Please check all the boxes to indicate you have completed the tasks. If there is an issue, write it in the other box.");
}
}

function initial(){
if (localStorage.getItem("unitrun") === null) {
var form = document.getElementById("myForm");
var tot = form.length;
for(var i = 0; i < tot ; i++){
sessionStorage.setItem(form.elements[i].id,"false");
}
localStorage.setItem("unitrun", true);
}
}
function loader(){
var form = document.getElementById("myForm");
var tot = form.length;
for(var i = 0; i < tot ; i++){
if(sessionStorage.getItem(form.elements[i].id) === "true"){
document.getElementById(form.elements[i].id).disabled = true;
}else{
document.getElementById(form.elements[i].id).disabled = false;
}
}
}
function checkTasks(form){
var count = 0;
var list = document.getElementById("tasks").getElementsByTagName("li");
var tot = list.length;
for(var i = 0;i < tot;i++){
if(form.task[i].checked){
count++;
}
}
if(count == tot){
sessionStorage.setItem("kitchen","true");
window.open("http://localhost:8080/Project/home.html","_self");
}else{
alert("You have not completed all the tasks! Please check all the boxes to indicate you have completed the tasks. If there is an issue, write it in the other box.");
}
}

The best way to do this (IMO) is maximizing the power of CSS
for example:
CSS
button.myBtn {
color: initial;
}
body.loaded button.myBtn {
color: red;
}
body.processed button.myBtn {
color: green;
}
Add class myBtn to all of the buttons whose color you want to change. Then in your javascript all you need to do is add class loaded and class processed to document.body to get all of your buttons' colors to change.

compare a select option value and a value from URL

I have a select tag to choose categories, each option contain the category number as value.
The category number is in the URL string.
I'm trying to write a JS to check if the option value is the same as the category number in the URL and if so make the option selected. so far the script dosnot work.
What am I doing wrong?
here is the code:
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] === VarSearch){
return KeyValuePair[1];
}
}
}
function compareValue(){
var x = document.getElementById("selectcategory").length;
for (var i = 0; i < x; i++){
var categNo = document.getElementById("selectcategory").options[i];
var UrlValue1 = GetUrlValue('icid');
if (categNo === UrlValue) {
document.getElementById("selectcategory").options[i].selected = true;
}
alert(UrlValue1);
}
}
if needed, I will send a link to the work.
if doing that with jquery is easier, i will be happey to learn.
thanx.

The problem is that categNo should be the value of the corresponding option tag. Also it's better to cache select element and not requery DOM in the loop:
function compareValue() {
var select = document.getElementById("selectcategory");
var x = select.options.length;
for (var i = 0; i < x; i++) {
var categNo = document.getElementById("selectcategory").options[i].value;
var UrlValue = GetUrlValue('icid');
if (categNo === UrlValue) {
select.options[i].selected = true;
}
}
}
Demo: http://jsfiddle.net/dj7c6sdL/

How can I put JSON data into a jQuery/Javascript array for later use?

I have some code like this:
var data = // coming in from AJAX and confirmed working, don't need to wory about this...
var row = // cloning an existing HTML structure in the DOM
for (i = 0; i < data.length; i++) {
var rowclone = row.clone();
var orderLastChangedTime = new Date(data[i].createDate);
var diffDays = Math.round(Math.abs((currentTime.getTime() - orderLastChangedTime.getTime())/(oneDay)));
rowclone.find(".home-order-calc").text(diffDays);
rowclone.find(".home-order-status").text(data[i].status);
rowclone.find(".home-order-po-number").text(data[i].poNumber);
rowclone.find(".home-order-number").text(data[i].orderId);
rowclone.find(".home-order-last-changed").text(orderLastChangedTime);
rowclone.find(".home-order-lines").text(data[i].itemsCount);
rowclone.find(".home-order-cost").text(data[i].cost);
var rowstatus = rowclone.find(".home-order-status").text();
rowstatus = rowstatus.toUpperCase();
openJSONitems = [];
closedJSONitems = [];
otherJSONitems = [];
if (status[rowstatus] == "open") {
openJSONitems.push(rowclone);
}
else if (status[rowstatus] == "closed") {
closedJSONitems.push(rowclone);
}
else {
otherJSONitems.push(rowclone);
}
console.log(openJSONitems);
openJSONitems.appendTo("#home-table-orders");
}
I am trying to create 3 new JavaScript arrays and array push data into them based on sort criteria from the JSON payload. Once they are sorted I want to hang on to them and attach them to the DOM on some user actions... what am I doing wrong?

openJSONitems is an array, it doesn't have the appendTo method, you'll have to iterate over that array and append its elements to "#home-table-orders". Besides, you're creating a new array in each iteration. I think this changes would fix the problem. You could also avoid the last loop inserting the element directly when status[rowstatus] == "open" if you liked.
var openJSONitems = [],
closedJSONitems = [],
otherJSONitems = [];
var data = // coming in from AJAX and confirmed working, don't need to wory about this...
var row = // cloning an existing HTML structure in the DOM
for (i = 0; i < data.length; i++) {
var rowclone = row.clone();
var orderLastChangedTime = new Date(data[i].createDate);
var diffDays = Math.round(Math.abs((currentTime.getTime() - orderLastChangedTime.getTime())/(oneDay)));
rowclone.find(".home-order-calc").text(diffDays);
rowclone.find(".home-order-status").text(data[i].status);
rowclone.find(".home-order-po-number").text(data[i].poNumber);
rowclone.find(".home-order-number").text(data[i].orderId);
rowclone.find(".home-order-last-changed").text(orderLastChangedTime);
rowclone.find(".home-order-lines").text(data[i].itemsCount);
rowclone.find(".home-order-cost").text(data[i].cost);
var rowstatus = rowclone.find(".home-order-status").text();
rowstatus = rowstatus.toUpperCase();
if (status[rowstatus] == "open") {
openJSONitems.push(rowclone);
}
else if (status[rowstatus] == "closed") {
closedJSONitems.push(rowclone);
}
else {
otherJSONitems.push(rowclone);
}
}
console.log(openJSONitems);
for (i = 0; i < openJSONitems.length; i++) {
$(openJSONitems[i]).appendTo("#home-table-orders");
}

You could add then as a data element onto a DOM object.
$('body').data('openItems', openJSONitems);
And retrieve them later:
var items = $('body').data('openItems');

Have you considered using localStorage?
localStorage.setItem('openJSONitems', openJSONitems );
And retrieving it with...
var openJSONitems = localStorage.getItem('openJSONitems');

how to get checkbox from multiple cells in html table?

I have dynamic html table and every cell have one checkbox. I want to get the selected checkbox if the user select from multiple checkbox from different row.
function GetAllChecked() {
var chkedshid = new Array();
var rows = new Array();
rows = document.getElementById("Tbl_Id").getElementsByTagName("tr");
trcount = rows.length;
for (var i = 0; i < rows.length; i++) {
trid = rows[i].id;
chkedshid = chkedshid + chkedshid
if (inputList = document.getElementById(trid).getElementsByTagName("input")) {
for (var n = 0; n < inputList.length; n++) {
if (inputList[n].type == "checkbox") {
if (inputList[n].checked == true) {
chkedshid[n] = inputList[n].id;
}
}
}
}
}
document.getElementById('Hidden_CellSelected').value = chkedshid.join();
document.getElementById("BtnSav2Cart").click();
}
why why this function return just last selected checkbox for last row in loop????
i need the all selected checkbox for all rows!!!!!!!

Assuming you are using jQuery.
Then you can simply do -
$("#myTableId input:checked")
If your checkbox have specific class then you can also do -
$("#myTableId .specificCheckboxClass:checked")

On some Button click try to execute this code
var checkedTransactions = $("input:[name='idofcheckboxe']:checked").map(function () {
return $(this).val();
}).get();
var will return all id of check boxes which are selected

thanks all i solve the problem:
function GetAllChecked() {
var chkedshid = new Array();
var rows = new Array();
rows = document.getElementById("Tbl_Id").getElementsByTagName("tr");
trcount = rows.length;
var totlchk = new Array();
for (var i = 0; i < rows.length; i++) {
trid = rows[i].id;
if (inputList = document.getElementById(trid).getElementsByTagName("input")) {
for (var n = 0; n < inputList.length; n++) {
if (inputList[n].type == "checkbox") {
if (inputList[n].checked == true) {
chkedshid[n] = inputList[n].id;
}
}
}
totlchk = totlchk.concat(chkedshid.join());
}
}
document.getElementById('myHiddenfield').value = totlchk.join();
document.getElementById("BtnSav2Cart").click();
}

var table = document.getElementById("mytable");
checkbox = table.getElementsByTagName("input");
for(var indexCheckbox = 1; indexCheckbox<checkbox.length; indexCheckbox++){
if(checkbox[indexCheckbox].checked){
//do something
}
}

Remove first options from the select form

Is there a way to remove the first options from this script:
http://javascript.internet.com/navigation/connected-comboxes.html
I want to remove the [ Type ] and [ Style ] options from the list and display other options only...
Can anyone please help?

Remove the following lines:
document.product.id_type.options[0] = new Option("[ Type ]");
document.product.id_style.options[0] = new Option("[ Style ]");

In addition to what is already suggested do some tweaks in code, set 1 =0 and if you also want to remove first empty option from second combo use j = 0
================================
function init(sel_type, sel_style){
for(i = 0; i <= TypeArray.length; i++){
document.product.id_type.options[i] = new Option(TypeArray[i].type, TypeArray[i].id);
if(TypeArray[i].id == sel_type)
document.product.id_type.options[i].selected = true;
}
OnChange(sel_style);
}
function OnChange(sel_style){
sel_type_index = document.product.id_type.selectedIndex;
sel_type_value = parseInt(document.product.id_type[sel_type_index].value);
for(i = document.product.id_style.length - 1; i > 0; i--)
document.product.id_style.options[i] = null;
j=1;
for(i = 0; i <= StyleArray.length; i++){
if(StyleArray[i].id_type == sel_type_value){
document.product.id_style.options[j] = new Option(StyleArray[i].style, StyleArray[i].id);
if(StyleArray[i].id == sel_style) document.product.id_style.options[j].selected = true;
j++;
}
}
}