2011-11-21 65 views
2

您好我想为我工作的一种形式做验证,我已经写了功能和使用Java脚本的通过ID

document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF'; 

我过我的功能来显示改变元素的颜色一个警告消息框,当'trav_emer_med_insur'被选中时出于调试的目的显示消息框。我已经在这里和其他无数网站查过,他们都说getElementById.style.backgroundColor = 'color';是实现我所寻找的方法。在这一点上,我不明白为什么它不起作用,一切看起来都是正确的。

这里是起点,我的函数的相关部分:

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."; 
      } 

我没有测试的全功能呢,我只是想在这个时候来测试第一个if语句,正如我所说的如果声明有效并且警报(“bleh”);将显示一个提醒,如果我检查该框

这里是我试图改变复选框周围元素的背景颜色的窗体的HTML。

<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"> 

我也曾尝试

form.span_trav_emer_med_insur.style.backgroundColor = '#FFFFFF'; 

也无济于事,我真的在这里难倒,代码看起来与我所看到的一切过网。有人请告诉我我缺少的东西。

感谢, -Sean

编辑 - 只是为了验证:的

if (form.trav_emer_med_insur.checked) { 
      alert("bleh"); 

代替

if (form.trav_emer_med_insur.checked) { 
      document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF'; 

没有工作,所以if语句或功能是没有问题的。

这里

完整的文件 - 使用的getElementById不工作 - http://hotfile.com/dl/135598683/93484d4/general2.html

这里

完整的文件与警报( '的Bleh')工作 - http://hotfile.com/dl/135598746/dc9e14b/general23.html

工作显示正是我想要做的PHP代码(减该页面重载的部分):

// 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; 
} 
+0

哪个浏览器(S)是不是工作?另外,你的表单标签的'name'是什么? – GregL

+0

jquery是你的朋友在这里 –

+0

铬它不工作,只是在FF和IE测试,同样的事情。 Firebug报告没有语法错误。 – SC1988

回答

1

你试过从一开始就给跨度一个颜色,以确认你可以看到它?

由于您的代码看起来完全没问题,因此您可能无法看到跨度背景颜色。

对于什么是值得我同意的OP使用jquery这样的琐事是浪费带宽。

根据你的意见,我创建了一个测试页来模拟你的。

这工作:

 
<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> 

+0

我试过了,无济于事。我真的很喜欢让别人真正看看我写的东西,并告诉我如果出现语法错误,而不是轻率地说 - '运行调试或使用jquery noob'。对于他们的信息,我在PHP和VB方面非常熟练,但很抱歉,但良好的编程习惯告诉我 - 我正在使用的工具必须工作。我已经使用了其他人使用的代码,并且已经为他们工作。我已经运行调试,并没有错误 - HENCE为什么我在这里寻求帮助..... – SC1988

+0

@ SC1988我已经添加了一个确认的修复程序。 – blankabout

+0

我已将您的页面完全复制到我的编辑器中,并将其保存为test.html - 这确实有效。我将您使用的document.getElementById语句复制到我的函数中。 (我已经验证是使用警报框工作)。什么也没有发生.......问题是我需要做完整的验证。我很感激你的回应,如果只是单个复选框,我不得不验证这一点。不幸的是,它有一盒子,其中必须检查4个盒子,如果选中3个盒子,则必须检查每个盒子的子选项。我可以在PHP – SC1988

0

这里有几个建议:

  1. 使用JS框架 - JQuery是热门的选择
  2. 使用Firebug在Firebug的调试
  3. 设置断点要弄清楚什么(如果有的话)是打破
+0

感谢您的建议,但使用一个框架对我的需求来说太精细了,我只需要一些简单的if语句来改变元素的背景颜色(如果适用)或者当元素没有被填充时围绕元素的跨度。正如我所说的,我通过放置警报( '的Bleh');代替我的颜色变化声明。当我检查这个盒子并点击提交时,警报出现了 - 这意味着如果正在工作。代码我拷贝了这个网站http://stackoverflow.com/questions/3161154/javascript-function-to-change-button-colour在这个链接,不适合我,但为那个家伙? – SC1988

0

我知道你在想5月不是最有成效的方法。

你这里有两种选择:

  1. 学习如何使用浏览器的consoele找出为什么你的风格设置不通过学习事物如何从地面工作起来或工作,

  2. 去与jQuery,这将使你的生活好多了。

选择1值得尝试,您将了解到很多关于DOM/CSS结构的内容。要做到这一点,鼠标点击并选择“检查元素”,当您选择repsonds浏览器寻找控制台,并在cmd行字面上键入“document.getElementById(”span_trav_emer_med_insur“)。style.backgroundColor”,看看你得到什么。这可能是有见地的。

如果你希望得到您迅速完成任务,获得jQuery和尝试以下操作:

首先要包括你的页面上的jQuery包括这条线(有jQuery的其他来源一样):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 

到位的代码你使用:

document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF'; 

使用以下命令:

$("#span_trav_emer_med_insur").css("background", "#FFFFFF"); 

看看这两种方法有何不同?你在试图理解浏览器DOM模型的低级结构,以及jQuery为你做的是提供一个你能理解的抽象,即“请将CSS样式”背景“改为”黄色“。

我与谁贡献了对方的同意,这实在是对你最好的行动路线。这是很值得学习的jQuery。

更多关于jQuery的CDN网站这里jQuery CDN jQuery css call

+0

非常感谢高调的声音.....我理解CSS DOM非常好,我已经复制了我在本网站使用的代码,并且人们已经使用它并且它工作。我会尝试jQuery方法,但也许会放弃精英主义的态度。 – SC1988

+0

也想添加,关于代码。我意识到FFFFFF是白色的,也许它工作正常,我没有看到任何东西,因为背景已经变成了白色。这没有改变。我使用span元素上的css将背景设置为RED,并使用Jscript将其更改为黑色。依然没有。 – SC1988

+0

在jquery中添加了代码和 $(“span_trav_emer_med_insur”).css(“background-color”,“#000000”);不要工作...... – SC1988

0

你的代码是正确的,如果你要这么设置背景色与JavaScript您访问(和修改).style.backgroundColor财产。

所以我想这个问题可能是html(和样式),检查这个小提琴http://jsfiddle.net/hqKwd/4/我设置了一个span空白的backgroundColor,没有任何事情发生,但2秒后我修改了innerHTML,你可以看到颜色。我试图展示的是,作为一个跨度,它没有显示:块,所以如果你不添加该样式或修改内容,你什么都看不到。

另一件事可能是关键属性是由另一段代码重写,但显然这不是

希望它可以帮助的情况下。

+0

正如您在更新的OP中看到的,我已经上传了我的HTML文件。为了测试目的,这些HTML文件的默认跨度设置为RED。风格正在工作,并没有被覆盖。看来正在发生的事情是有效的,有效的代码只是选择不做它应该做的事情......这是没有道理的。 – SC1988

+0

看着小提琴。粘贴到您写入我的页面的内容,仅使用不同的条件来调用您所写的内容。没有。我的文件被诅咒或什么? – SC1988

0

我正在尝试做这件事。我加入了额外的括号,并且它工作。

如:

(document.getElementById("advert")).style.backgroundColor = "red";