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>