Javascript, Jquery, Cross browser issues, Frustration

Javascript, Jquery, Cross browser issues, Frustration - javascript

I am a predominantly PHP developer. I realize in this day and age specialization in one scripting language doesn't cut it, but the fact remains that my skills at JavaScript and jQuery are pretty green. I am a novice at best. I can create my own code but Cross Browser compatibility remains a huge issue with my work in JavaScript.
Anyway, I have a script that filters products according to categories/subcategories. This is how it works: you select a category and the javascript in the background does its thing to filter the subcategories so that the options displayed are the ones pertaining to the parent category- a combination of these two filters the product line.
Here is my code:
function scategories(){
//get the category option value from the category drop down bar
var cat = (document.getElementById('categories').value);
//get all the options from the subcategory drop down bar
var subcat = document.getElementsByClassName('subcategories');
var n=0;
//if the category bar option is set to 0 display everything
if(Number(cat)==0){
Show();
}
//filter the subcategories
while(subcat.item(n)){
//if there is no match b/w the subcategories option and the categories id FILTER
if(Number((subcat.item(n).value).split('|')[1]) != Number(cat) && Number(subcat.item(n).value) != 0){
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="none";
}else{
//else display the subcategory
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="list-item";
}
n++;
}
}
This code is pretty self explanatory I would say. I also have a shiftfocus function that shifts the focus from the current option selected in the subcategory to the default one which is 'none' whenever a new category is picked. This basically resets the subcategory.. here's the code:
function shiftfocus(){
document.getElementsByClassName('subcategories')
.item(0)
.removeAttribute("selected");
document.getElementsByClassName('subcategories')
.item(0)
.setAttribute("selected","selected");
}
Shiftfocus is called onChange and scategories is called onClick.
Problem 1:
1) Firefox: Shiftfocus doesn't shift the focus to the default option even though I can see it adds the 'selected' attribute.
2) Safari: Does not work at all.
EDIT: Problem 2 was the product of a careless mistake. I left open an anchor tag which was
creating havoc in IE. Should have double checked before bothering you
guys. Sorry. Problem 1 still persists.
Problem 2:
I understand none of us developers particularly like internet explorer. But I am willing to believe I have made a mistake here. I have some jQuery that fetches data from a script in another file via the native POST function and appends it to a table with the id "content". This works fine on every browser, except IE. If I try going back to IE 7,8 compatibility mode the results are a little better (the data shows up broken in pieces though) and in IE9 compatibility mode nothing is appended at all! Here's the code:
$.post("bagcontents.php", {
"Bid": $(this).attr('bid')
},
function(data){
$("#content").empty().append(data);
roundNumber();
$('#processorder_hidden').attr('value',currentBid);
});
//append here
<div id="contents" style="overflow:auto;height:345px;padding-right:5px;">
<form name="bag_contents" id="bag_contents" method="post" action="<?php _page ;?>">
<table id="content">
</table>
<input type="hidden" id="bag_contents_hidden" name="bag_contents_hidden" value="1" />
</form>
</div>
Any help will be appreciated. I tried outputting the fetched results with alert, alert(data), and the script is fetching everything just fine. Its the just the append part that fails :|

Here are some suggestions and hope you find them somewhat useful.
Problem: 1
Instead of having the shiftfocus() set the to a specific value, have you tried using .val('') just to clear it out. I can imagine that this will default to the first option.
Problem: 2
This will be hard to debug without knowing what data is coming back from the server. Might be bad formatting or some syntax error on the rendered output.

Related

How do I keep a previous value in a textbox when using a checkbox to add information to the textbox?

Okay, so I created this form that I use for work and it works pretty well considering my skill level is most definitely not professional. I learned HTML and JavaScript for a couple years in high school and have been self-taught on a lot of things since. Here's what I'm trying to do:
I have my form set up so that if I select an item from a drop-down menu and click a checkbox, the canned response I created is generated in the textbox. However, if I wrote anything in the textbox in advance, it gets wiped out. Now, the way I learned how to do this was based off of self-taught stuff I found online, so this is an example of what I have for the function that gets my canned responses:
function FillDetails29(f) {
if(f.checkbox29.checked == true) {
f.TEXT.value = ('' + f.trans.value + '')
} else {
f.TEXT.value = "";
}
}
I know that having
} else {
f.TEXT.value = "";
is going to wipe out anything that was there before or after if I uncheck the checkbox.
My question is what should I be doing to maintain my previous value when I uncheck the box? Example being:
Previous value to using the checkbox: Andrea looked good in that sweater.
Using the checkbox: Andrea looked good in that sweater. I wonder if there are any more at the store?
Unchecking the checkbox: Andrea looked good in that sweater.
I've done a lot of searching to see if there's something out there that can solve my problem but I'm afraid I'm not phrasing it right when I google it. Can anyone help me or point me in the right direction for this? I know that you guys don't want to just solve it for me and that I should be able to present some kind of example of what I've done to fix the problem but I've tried so many things that haven't worked that it would take too long to list them all without causing some kind of confusion. Even if you just have a website that you know of with an example of this that you can provide me, I'd be very grateful. Thank you!
Edit 1: To clarify, my original setup actually contains 3 forms. One form is for data entry where I input caller information and the checkbox for that spits out the entered data into a singular line of details for when I copy and paste into another program.
The second form is where I have quite a few checkboxes that I use because each section of the form requires separate canned responses. I work for a health insurance company on the phones with doctors offices (and soon I'll be talking to members as well) and I created the form to shorten the amount of time it takes for me to document information. So I have checkboxes that generate data for specific benefits, eligibility, authorizations, transferring the call, etc.
I have a lot of checkboxes to contend with. About 32, by my count. More, if I need to add them. Most of these checkboxes are connected with drop-down menus with the necessary canned response for it. Some of them are connected to their own textbox where I need to enter some kind of pre-determined data, such as a date of birth or a doctor's name. Those are not the focus, though. Once I enter data or select an option from the drop-down and click the corresponding checkbox, the data from that selected option appears in a main text area so that I can copy and paste the response to the work program.
The third form is one that's generated for claims information and has 10 checkboxes on it.
So, if you require more examples of what I'm referring to, I can provide them but it will take a few minutes for me to scrub the work related data that out of the canned responses I created.
Edit 2: The response I got from Epascarello was extremely helpful and I've been trying to experiment with different ways to keep the previous value at the start of the new text being inserted from the checkbox with no luck in getting what I'm looking for, though something unexpected has happened when I start with an empty box and select an option after I altered the code he suggested to this:
function FillDetails29(f) {
const elem = f.TEXT;
if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
const updatedValue = f.checkbox29.checked ? f.trans.value : (elem.dataset.prevValue || '') + (f.trans.value);
elem.value = updatedValue;
}
What started to happen is that if the box was blank previously and I selected an option, the option would generate. Then, if I unchecked the box, the option would remain. If I selected a new option, the new option generates. If I then unchecked the box, the first option and the second option would be there.
Example:
First option selected: Andrea looked great in that sweater.
Second option selected: I wonder if it's on sale now?
When unchecked, first option remains until second option is checked. When second option is unchecked, this is what results (from the same drop-down and checkbox): Andrea looked great in that sweater. I wonder if it's on sale now?
Now, I added the same kind of element to another checkbox item in the same area resulting in the code looking like this for that section:
function FillDetails28(f) {
const elem = f.TEXT;
if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
const updatedValue = f.checkbox28.checked ? f.dental.value : (elem.dataset.prevValue || '') + (f.dental.value);
elem.value = updatedValue;
}
function FillDetails29(f) {
const elem = f.TEXT;
if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
const updatedValue = f.checkbox29.checked ? f.trans.value : (elem.dataset.prevValue || '') + (f.trans.value);
elem.value = updatedValue;
}
And if I do something similar there, checking box 28 and then checking box 29, only whatever was most recently checked will materialize there. However, once everything is unchecked, each selected option will appear in the text box.
Example:
Checkbox 28 selected: Steven doesn't look good today.
Text area shows: Steven doesn't look good today.
Checkbox 29 selected: Andrea looks good in that sweater.
Text area shows: Andrea looks good in that sweater.
Checkbox 28 unselected with 29 still selected, text area shows: Steven doesn't look good today. Steven doesn't look good today.
Checkbox 28 and 29 now unselected, text area shows: Steven doesn't look good today. Andrea looks good in that sweater.
How should I be fashioning this so that those two options materialize one after another when the boxes are checked rather than when they're unchecked?

You can store the value into a data variable and reference it.
function FillDetails29(f) {
const elem = f.TEXT;
if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
const updatedValue = f.checkbox29.checked ? f.trans.value : (elem.dataset.prevValue || '');
elem.value = updatedValue;
}

ui-grid has duplicate rows

I don't know how this started happening but a ui-grid (project home) on my page (angular SPA) is duplicating 2 rows somehow (and I don't want it to).
Refreshing the page (Chrome) has no effect (I have devtools open, with Disable cache checked).
For reference: I am setting the grid.data to an array with 65 entities, so that count is correct, and if I remove all filters it shows all 65, but actually 67 rows shown (I took the time to count, with the interesting find that alternating rows don't necessarily keep their grey or white color as you scroll up and down).
Here's what I am seeing. If I click row 3 or 4, both are selected and 1 and 2 are unselected. I assume that they have the same generated Id. Note here that it does say that only one row is selected, but 4 are shown!
I can open the page in Firefox and log in, then go to this page which then looks right, so it is either something in Chrome or something in this instance and other users wouldn't see it.
Here is the array from the grid.data:
[{"Name":"Trainer","Desc":"","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-000W"},
{"Name":"System","Desc":"Practice","Type":"string","OptionsCount":97,"$$hashKey":"uiGrid-000Y"},
{"Name":"EMR","Desc":"Electronic","Type":"string","OptionsCount":67,"$$hashKey":"uiGrid-0010"},
{"Name":"Guideline","Desc":"Guideline","Type":"string","OptionsCount":7,"$$hashKey":"uiGrid-0012"},
{"Name":"Notes","Desc":"Notes","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-0014"},
{"Name":"Scorecard","Desc":"April 2015","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-0016"},
{"Name":"Scorecard","Desc":"July 2015 ","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-0018"},
{"Name":"Scorecard","Desc":"November 2","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001A"},
{"Name":"Scorecard","Desc":"December 2","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001C"},
{"Name":"Scorecard","Desc":"September ","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001E"},
{"Name":"2012","Desc":"","Type":"money","$$hashKey":"uiGrid-001G"},
{"Name":"2014","Desc":"","Type":"money","$$hashKey":"uiGrid-001I"},
{"Name":"2015","Desc":"","Type":"money","$$hashKey":"uiGrid-001K"},
{"Name":"2016","Desc":"","Type":"money","$$hashKey":"uiGrid-001M"},
{"Name":"2017","Desc":"","Type":"money","$$hashKey":"uiGrid-001O"},
{"Name":"Specialty","Desc":"Primary","Type":"string","OptionsCount":191,"$$hashKey":"uiGrid-001Q"},
{"Name":"Specialty2","Desc":"Secondary","Type":"string","OptionsCount":191,"$$hashKey":"uiGrid-001S"},
{"Name":"Special","Desc":"Special","Type":"string","$$hashKey":"uiGrid-001U"},
{"Name":"Rooming In","Desc":"Rooming in","Type":"date","$$hashKey":"uiGrid-001W"},
{"Name":"HTN","Desc":"Hyper","Type":"date","$$hashKey":"uiGrid-001Y"},
{"Name":"Depression","Desc":"Depression","Type":"date","$$hashKey":"uiGrid-0020"},
{"Name":"Measure","Desc":"measure","Type":"date","$$hashKey":"uiGrid-0022"},
{"Name":"HCC","Desc":"HCC","Type":"date","$$hashKey":"uiGrid-0024"},
{"Name":"Data 1","Desc":"First","Type":"date","$$hashKey":"uiGrid-0026"},
{"Name":"Data 2","Desc":"Second","Type":"date","$$hashKey":"uiGrid-0028"},
{"Name":"Data 3","Desc":"Third","Type":"date","$$hashKey":"uiGrid-002A"},
{"Name":"Term Date","Desc":"Termination","Type":"date","$$hashKey":"uiGrid-002C"},
{"Name":"2015.11","Desc":"11.1.2015","Type":"float","$$hashKey":"uiGrid-002E"},
{"Name":"2016.07","Desc":"7.1.2016","Type":"float","$$hashKey":"uiGrid-002G"},
{"Name":"Status","Desc":"Practice","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-002I"},
{"Name":"Phase","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-002K"},
{"Name":"EMFMT","Desc":"","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-002M"},
{"Name":"LAB Data","Desc":"","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-002O"},
{"Name":"Phase #","Desc":"Performance","Type":"integer","$$hashKey":"uiGrid-002Q"},
{"Name":"Letter 1","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002S"},
{"Name":"Letter 2","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002U"},
{"Name":"Letter 3","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002W"},
{"Name":"I Term","Desc":"","Type":"date","$$hashKey":"uiGrid-002Y"},
{"Name":"CO","Desc":"CO","Type":"bit","$$hashKey":"uiGrid-0030"},
{"Name":"Chart","Desc":"Chart","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0032"},
{"Name":"Test money","Desc":"","Type":"money","$$hashKey":"uiGrid-0034"},
{"Name":"End-testing","Desc":"","Type":"money","$$hashKey":"uiGrid-0036"},
{"Name":"test1234","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-0022"},
{"Name":"testAbc","Desc":"","Type":"date","$$hashKey":"uiGrid-003A"},
{"Name":"test456","Desc":"","Type":"bit","$$hashKey":"uiGrid-003C"},
{"Name":"M","Desc":"Meaningful","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-003E"},
{"Name":"test date","Desc":"","Type":"date","$$hashKey":"uiGrid-003G"},
{"Name":"Service","Desc":"","Type":"string","$$hashKey":"uiGrid-003I"},
{"Name":"R Notes","Desc":"","Type":"string","OptionsCount":17,"$$hashKey":"uiGrid-003K"},
{"Name":"Appointment","Desc":"Appointment","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-003M"},
{"Name":"Connection","Desc":"Type of Connection","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003O"},
{"Name":"A","Desc":"","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003Q"},
{"Name":"Billing","Desc":"B","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003S"},
{"Name":"E Connection","Desc":"","Type":"string","$$hashKey":"uiGrid-003U"},
{"Name":"Addend","Desc":"Data Addend","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-003W"},
{"Name":"IT","Desc":"","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-003Y"},
{"Name":"Portal","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-0040"},
{"Name":"Follow-up ","Desc":"","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0042"},
{"Name":"Subspecial","Desc":"","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-0044"},
{"Name":"T","Desc":"Trainerh","Type":"string","$$hashKey":"uiGrid-0046"},
{"Name":"S","Desc":"","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0048"},
{"Name":"A","Desc":"Date","Type":"string","$$hashKey":"uiGrid-004A"},
{"Name":"Dual","Desc":"Date joint","Type":"date","$$hashKey":"uiGrid-004C"},
{"Name":"Start D","Desc":"","Type":"date","$$hashKey":"uiGrid-004E"},
{"Name":"CO Addend","Desc":"Data COA","Type":"string","OptionsCount":1,"$$hashKey":"uiGrid-004G"}]
Has anyone else experience this issue with ui-grid, and how did you resolve it?
Or can anyone explain why it is creating these extra rows, and consistently only for these 2 rows?

Ok, so here's my answer. I apologize that this wasn't all in the original question, but there was too much code for it to be helpful. I'm writing an answer to be helpful for anyone else that runs into similar issues and gets stuck debugging (as I see that sharing as the purpose of SO).
For background, a row is supposed to get selected during the page load process if the url has an Id for the row as a parameter.
In the code the data is loaded into the grid.data. Then if the url has a parameter a loop executes on grid.data to find the matching row(s). If it is found, then it would call
gridApi.grid.modifyRows(grid.data).then(action);
where the action would be something like
$timeout(function () {
// Do this after the columns and rows processors have finished and it is all rendered.
selectRows.forEach(function (row) {
gridApi.selection.selectRow(row);
});
gridApi.core.scrollTo(selectRows.pop(), grid.columnDefs[0]);
}, 100);
What is working for me now is to skip the "gridApi.grid.modifyRows" and just call the action. I think that code was in there earlier to update the grid if it had rendered before the data was retrieved and assigned to grid.data, but that is taken care of by waiting for onRegisterApi to fire, then assigning the grid.data.

Javascript : find first unchecked box and retrieve information from row

So I am trying to find a way to extract data from the first row where the checkbox from the first column is unchecked. I know this may sound like a true beginner question but I couldn't manage to find how to do it despite searching for quite a few hours.
Here a step-by-step of my goal to clarify :
Find the first checkbox which is unchecked;
Retrieve information from another column (inner html) but from the corresponding row and an attribute ("name") of the checkbox;
Without opening it on-screen, use the attribute of the checkbox (partial URL) to open completed URL and retrieve more information into MySQL;
Check the checkbox;
Rince and repeat
I am only looking for info concerning step one and two, the rest is there for clarification. I do not have prior experience in Javascript writing prior my last few days of Internet browsing, the only coding I've done were statistical analysis in R.
Any help would be highly appreciated.
Thank you very much!
Nikola

Well, you can use the same class for every checkbox (i.e. rowcheck):
<input type="checkbox" class="rowcheck" id="CbRow_1" name="test" value="test">
And then you loop through the checkboxes:
$(".rowcheck").each(function (index, element) {
if ($(element).prop("checked")) {
//Get the row number from ID
var rownumber = $(element).prop("id").split("_")[1];
//Now you do stuff with the other element
$("#element_" + rownumber).html("whatever")
}
});

multiselect box will not populate without alert

I can't post all my code but I try to get the important pieces in here. The problem I have is that I populate a multiselect box from the database then I get the already selected items and add those to the selected attribute. This all works in IE 7 which is what my testers are using, unfortunately I'm on IE 9 and most of my users are on IE 9. This code doesn't work on IE 9 or on firefox. The very weird thing is it will work if I stick an alert just after the call to the function that populates the multiselect.
after getting the selected values from the database through an ajax call I use
var oldValues.push($(this).find("Value_ID).text());
I do an alert of oldValues they are there 31,32,45
then I use $("drop2-input").val(oldValues);
If I put an alert after this line it works.
I have spent the majority of the day checking every line of code there are no missing semicolons, no curly brackets out of place, and no parentheses out of place. Does anyone know of a way to make this work.
Oh I already tried using a timeout to pause the code that just stoped the rest of the page from loading.

This should work for you.
Take a look at the JSFiddle I put togethre for you:
http://jsfiddle.net/douglasloyo/NEtJd/
var json = [
{name:"Texas", value:1},
{name:"Texas Again", value:2},
{name:"Texas Rocks!", value:3}];
$.each(json, function(i, value) {
$('#my-select').append($('<option>').text(value.name).attr('value', value.value));
});
<select id="my-select">
<option>-Select-</option>
</select>

Java script changing color of element by ID

Hi there I'm trying to do validation for a form I am working on, and I have written a function and used
document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF';
I have tested my function to display an alert message box, for debugging purposes when 'trav_emer_med_insur' is checked the message box is displayed. I have checked here and on countless other sites and they all say getElementById.style.backgroundColor = 'color'; is the method to achieve what I am looking for. I don't understand at this point why it is not working, everything appears correct.
Here is the starting, pertinent part of my function:
function validatePlanTypes(form) {
var error = "";
if (form.trav_emer_med_insur.checked) {
document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';
if (!form.trav_emer_med_insur_opt1.checked || !form.trav_emer_med_insur_opt2.checked || !form.trav_emer_med_insur_opt3.checked || !form.trav_emer_med_insur_opt4.checked) {
form.trav_emer_med_insur_opt1.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt2.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt3.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt4.style.backgroundColor = 'Yellow';
error = "You must pick a plan-type for Travel Emergency Medical insurance, areas with a problem have been highlighted yellow for you.";
}
I am not testing the full function yet, I am only trying to test the very first if statement at this time, as I said the if statement works and alert("bleh"); will display an alert if I check that box
Here is the HTML of the form where I am trying to change the background color of a span element surrounding the checkbox.
<p><span name="span_trav_emer_med_insur" id="span_trav_emer_med_insur" value="span_trav_emer_med_insur" style=""><input type="checkbox" name="trav_emer_med_insur" id="trav_emer_med_insur_if" value="trav_emer_med_insur_if" class="form_elements" onClick="if(this.checked){document.getElementById('trav_emer_med_options').style.display='block';}else{document.getElementById('trav_emer_med_options').style.display='none';}"/></span> <!-- Travel Emergency Medical If Box -->
<label class="form_elements" name="label_for_trav_emer_med_insur_if" id="label_for_trav_emer_med_insur_if"> Travel Emergency Medical Insurance <em>(expands when checked)</em>.</label></p>
<p>
<div id="trav_emer_med_options" name="trav_emer_med_options" class="questions_hidden">
I have also tried
form.span_trav_emer_med_insur.style.backgroundColor = '#FFFFFF';
Also to no avail, I'm really stumped here, the code looks identical to what I see all over the net. Someone please tell me what I am missing.
Thanks,
-Sean
Edit - Just to verify:
if (form.trav_emer_med_insur.checked) {
alert("bleh");
instead of
if (form.trav_emer_med_insur.checked) {
document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';
Does work, so the if statement or function is not a problem.
Complete file here - with getelementbyID not working - http://hotfile.com/dl/135598683/93484d4/general2.html
Complete file here with alert('bleh') WORKING -
http://hotfile.com/dl/135598746/dc9e14b/general23.html
Working PHP code showing exactly what I'm trying to do (minus the page reload part):
// Check if Emergency Medical is selected.
if (isset($_POST['trav_emer_med_insur'])) {
// If Emergency Medical is selected, then check to see if an option has been selected
if (isset($_POST['trav_emer_med_insur_opt1']) or isset($_POST['trav_emer_med_insur_opt2']) or isset($_POST['trav_emer_med_insur_opt3']) or isset($_POST['trav_emer_med_insur_opt4'])) {
$SQLString = $SQLString . "emer_med, emer_med_opt1, emer_med_opt2, emer_med_opt3, emer_med_opt4";
}
// If no option is selected display error message
else {
++$ErrCount;
$Errors[$ErrCount] = "You selected interest in Travel Emergency Medical Insurance but did not select a plan-type for it";
}
}
// Check if All-Inclusive Insurance is selected.
elseif (isset($_POST['allinc_insur'])) {
//If All-Inclusive Insurance is selected, then check to see if an option has been selected
if (isset($_POST['allinc_insur_opt1']) or isset($_POST['allinc_insur_opt2'])) {
}
//If no option is selected display error message
else {
++$ErrCount;
$Errors[$ErrCount] = "You have selected interest in All-Inclusive Insurance but did not select a plan-type for it";
}
}
// Check if Cancellation Insurance is selected.
elseif (isset($_POST['cancel_insur'])) {
}
// Check if Visitor Insurance is selected.
elseif (isset($_POST['visitor_insur'])) {
//If Visitor Insurance is selected, then check to see if country is selected.
if (isset($_POST['country_select'])) {
}
// If no country selected display error message
else {
++$ErrCount;
$Errors[$ErrCount] = "You have selected interest in Visitor Insurance but have not selected a country";
}
}
//If no insurane types selected display error.
else {
++$ErrCount;
$Errors[$ErrCount] = "You haven not selected interest in any insurance plan types";
}
while ($Count != $Target) {
if (checked($QuestionNames[0]) != 1);
++$Count;
}

Have you tried giving the span a colour from the start just to confirm you can see it?
As your code looks prefectly ok it could be the case that you just cannot see the span background colour.
For what it is worth I agree with the OP that using jquery for something trivial like this is a waste of bandwidth.
Based on your comments I created a test page to simulate yours.
This works:
<span name="span_trav_emer_med_insur" id="span_trav_emer_med_insur" style='backgroundcolor:red'>
some words<input type="checkbox" name="trav_emer_med_insur" id="trav_emer_med_insur_if" value="trav_emer_med_insur_if" class="form_elements" onClick="clck(this)"/>
</span>
<label class="form_elements" name="label_for_trav_emer_med_insur_if" id="label_for_trav_emer_med_insur_if"> Travel Emergency Medical Insurance <em>(expands when checked)</em>.</label></p>
<div id="trav_emer_med_options" name="trav_emer_med_options" class="questions_hidden" style='display:none;'>
some hidden words
</div>
<script type="text/javascript">
function clck(cbObj) {
if(cbObj.checked){
document.getElementById("span_trav_emer_med_insur").style.background = "green";
document.getElementById('trav_emer_med_options').style.display='block';
}
else {
document.getElementById("span_trav_emer_med_insur").style.background = "red";
document.getElementById('trav_emer_med_options').style.display='none';
}
}
</script>

I was trying to do this exact thing. I put extra brackets in and it worked.
As in:
(document.getElementById("advert")).style.backgroundColor = "red";

Here's a couple of suggestions:
Use a JS framework - JQuery is the popular choice
Use Firebug for debugging
Set breakpoints in Firebug to figure out what (if anything) is breaking

I think what you are trying may not be the most productive approach.
You have two options here:
learn how to use your browser's consoele to find out why your style settings are not working by learning how things work from the ground up or,
go with jQuery which will make your life so much better.
Choice 1 is worth trying, you will learn a lot about what the DOM/CSS structures look like. To do this right mouse click and choose "inspect element" when your browser of choice repsonds look for the console and literally type "document.getElementById("span_trav_emer_med_insur").style.backgroundColor" on the cmd line and see what you get. This is likely to be insightful.
If you want to get your job done quickly, get jQuery and try the following:
First to include jQuery on your page include a this line (there are other sources of jQuery as well):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
in place of the code you were using:
document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF';
use the following:
$("#span_trav_emer_med_insur").css("background", "#FFFFFF");
See how these two approaches differ? What you are attempting is to understand the low level structure of the browsers DOM model and what jQuery is doing for you is providing an abstraction you can understand, which is "please change the CSS style "background" to "yellow" for me.
I agree with the other's who have contributed, this is really the best course of action for you. It's well worth learning jQuery.
More on the jQuery CDN sites here jQuery CDN
jQuery css call

Your code is correct, if you want so set a background-color with javascript you access (and modify) the .style.backgroundColor property.
So I suppose the problem might be the html (and the styles), check this fiddle http://jsfiddle.net/hqKwd/4/ I set the backgroundColor of a span that's empty, and nothing happends, but after 2 seconds I modify the innerHTML and you can see the color. The thing I'm trying to show is that being an span, it doesn't have display:block, so if you don't add that style or modify the content, you can't see anything.
Another thing might be that the property is being override by another piece of code, but apparently this is not the case
Hope it helps.

Develop Reference

JavaScript is the programming language of the Web.