Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
116
rated 0 times [  118] [ 2]  / answers: 1 / hits: 28022  / 13 Years ago, mon, november 21, 2011, 12:00:00

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>&nbsp;&nbsp;Travel Emergency Medical Insurance&nbsp;<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;
}

More From » css

 Answers
6

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>


[#88999] Friday, November 18, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alyssiat

Total Points: 608
Total Questions: 102
Total Answers: 101

Location: Japan
Member since Sat, Jun 6, 2020
4 Years ago
;